Several advanced APIs of Selenium Web Driver allow us to perform operations like keyboard events, mouse hover, simple mouse events, and complex events like drag-and-dropping, etc. Here, the Action class implements the Builder pattern to create a composite action containing a group of other actions.
In part 1 of this blog, we will only focus on mouse actions that we can perform:
MoveByOffset
The moveByOffset() method is used to move the mouse from its initial position to another position on the web page. Automation Testers can specify the X distance and Y distance the mouse has to be move.
The syntax for the moveByOffset() method is as follows:
public Actions moveByOffset(int x,int y)
When the x and y values result in moving the cursor out of the document, a MoveTargetOutOfBoundsException is raised
Let us now see an example below of how the move by offset works. You can see the Gmail link getting underlined on the google.com page.
<![CDATA[
public class MoveByOffset {
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "C:\\driver\\New folder\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://www.google.com/");
WebElement elm = driver.findElement(By.xpath("//a[text()='Gmail']"));
Actions act = new Actions(driver);
act.moveByOffset(elm.getLocation().getX() + 1, elm.getLocation().getY() + 1);
act.perform();
}
}
]]>
ClickAndHold
The clickAndHold() method is another method of the Actions class that left-clicks on an element and holds it without releasing the mouse button. Mainly, we use this method as a part of performing drag and drop actions.
<![CDATA[
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "C:\\driver\\New folder\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://www.google.com/");
WebElement elm = driver.findElement(By.xpath("//img[@id='hplogo']"));
Actions act = new Actions(driver);
act.clickAndHold(elm).moveByOffset(40, 40).release().perform();
}
]]>
Release
Whenever we use click and hold action, we need to drop it somewhere, which can only be achieved by the release method in the action class. The release() method is the one that can release the left mouse button on a WebElement.
The API syntax for the release() method is as follows:
public Actions release()
Let’s see some code below where we will demonstrate how to use release.
<![CDATA[
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "C:\\driver\\New folder\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("file://C:/myexample.html");
WebElement myelm = driver.findElement(By.name("elm"));
Actions builder = new Actions(driver);
builder.clickAndHold(myelm).moveByOffset(120, 0).release().perform();
}
]]>
DragandDrop
We can perform some drag and drop action in selenium by using the above actions that we have already learned, or another way is that we can directly use the methods available in the action class.
Type-1: Combination of Actions
<![CDATA[
public static void main(String[] args) throws InterruptedException {
System.setProperty("webdriver.chrome.driver", "C:\\driver\\New folder\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://www.w3schools.com/html/html5_draganddrop.asp");
WebElement from = driver.findElement(By.xpath("//div[@id='main']//img[@id='drag1']"));
WebElement to = driver.findElement(By.xpath("//div[@id='main']//div[@id='div2']"));
Actions act = new Actions(driver);
act.clickAndHold(from).moveToElement(to).release(to).build().perform();
driver.quit();
}
]]>
Type-2: Drag and Drop method
<![CDATA[
System.setProperty("webdriver.chrome.driver", "C:\\driver\\New folder\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://www.w3schools.com/html/html5_draganddrop.asp");
WebElement from = driver.findElement(By.xpath("//div[@id='main']//img[@id='drag1']"));
WebElement to = driver.findElement(By.xpath("//div[@id='main']//div[@id='div2']"));
Actions act = new Actions(driver);
act.dragAndDrop(from, to).perform();
driver.quit();
]]>
DragandDropBy
We can also achieve drag and drop action by using out of the box method given by web driver i.e. dragandDropBy
The API syntax for the dragAndDropBy() method is as follows:
public Actions dragAndDropBy(WebElement source,int x,int y)
Let’s see how to use dragandDropBy
<![CDATA[
public static void main(String[] args) {
System.setProperty("webdriver.chrome.driver", "C:\\driver\\New folder\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("file://C:/DragMe.html");
WebElement dragMe = driver.findElement(By.id("draggable"));
Actions builder = new Actions(driver);
builder.dragAndDropBy(dragMe, 300, 200).perform();
}
]]>
The above codes run most of the time, but sometimes you may find varying performance with various OS devices and various browsers. We are one of the best selenium test automation services provider. And if you want more information concerning Action class, Keyboard Event, mouse Event using selenium WebDriver, then stay tuned with us.
