Mouse Action Classes in Selenium

The Selenium Web Driver’s Advanced API allows us to perform operations like keyboard events, simple mouse events and complex events such as dragging-and-dropping, mouse hover etc. The Actions class implements the builder pattern to create a composite action containing a group of other actions.

In the part 1 of this blog we will only focus on mouse actions that can be performed:

Mouse Action Classes in Selenium

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 how move by offset works. You can clearly see the gmail link getting underlined in google.com page.

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 left button of the mouse. This method is mainly used as a part of performing drag and drop actions

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 release method in 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

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 drag and drop action in selenium by using the above actions that we have learnt or we can directly use the methods available in action class

Type-1: Combination of Actions

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

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

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 sometime you may find varying performance with various OS devices and various browsers. We are one of the selenium test automation services provider and if you want more information concerning Action class and Keyboard Event, mouse Event using selenium WebDriver then be tune with us.