Mouse Hover, Drag and Drop in Selenium WebDriver

In this article, you will learn how to use mouse hover, drag and drop features in selenium web driver. Mouse hover is basically an action when you hover the mouse over a particular area, it shows a list of sub-menu. In the following diagram you can see when we hover on "Contribute", a list is shown. In selenium to handle such type of menu, we use the "Actions" class. We can not click directly on any entry in the list, if we try to click on any language, an exception will raise "Unable To Locate Element". To overcome this problem selenium has provided an Actions class. So before going into coding details, first we see what is Actions class and what it does?

What is Actions Class:

A class in the Selenium library is used to handle the mouse events, keyboard events, drag and drop and click on multiple elements using the advanced user interactions API. In Actions class, we have the following most commonly used keyboard and mouse events.

1) moveToElement(toElement)
2) clickAndHold(Webelement)
3) contextClick()
4) doubleClick()
5) dragAndDrop(source, target)
6) dragAndDropBy(source, xOffset, yOffset)
7) release()

Let's try to explain some of them that are used frequently in real-time projects.

1) Mouse Movement (moveToElement())

It is used to hover on the designated area. Because without hover we can not click on the submenu items. Let's try to understand this concept by writing the code with Actions class. If you want to click on the sub-element, first we need to mouse hover on the parent-element like "Contribute" as shown in the above image. then we can click on sub-element. Given below example will show the real-time result.

Scenario:

1) Go to https://jqueryui.com/
2) Move mouse on Contribute link with Action class
3) Click on CLA

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
public class MoveToElement {
 public static void main(String[] args) throws InterruptedException {
  System.setProperty("webdriver.chrome.driver", "/home/khawer/Desktop/chromedriver");
  WebDriver driver = new ChromeDriver();
  driver.get("https://jqueryui.com/");
  driver.manage().window().maximize();
  Actions actions = new Actions(driver);
  WebElement contributeLink = driver.findElement(By.xpath("//a[contains(text(),'Contribute')]"));
  actions.moveToElement(contributeLink).perform();
  System.out.println("Mouse Hover on Contribute");
  Thread.sleep(1000);
  driver.findElement(By.xpath("//a[contains(text(),'CLA')]")).click();
  System.out.println("Clicking on CLA");
 }
}

In the above example, we have created an object of an Actions Class passing the WebDriver instance. With the object of the Actions class, the driver moves to the main menu and then to the sub-menu and click on it.

2) Drag and Drop (clickAndHold(Webelement))

In Drag and Drop, we hold the source element and place it on the target element. For this, we use clickAndHold(webelement) method. It holds the left click button down on the specified element. When the source element is moved on the target element then we release the left click by using the release() method. For practice purposes, you can run the following code snippet

Scenario:

1) Go to https://jqueryui.com/droppable/
2) Hold the source element with clickAndHold() method
3) Move the source element on the target element
4) Release the source element

import org.openqa.selenium.By;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
public class ClickAndHoldMethod {
 public static void main(String[] args) throws InterruptedException {
  System.setProperty("webdriver.chrome.driver", "/home/khawer/Desktop/chromedriver");
  WebDriver driver = new ChromeDriver();
  driver.get("https://jqueryui.com/droppable/");
  driver.manage().window().maximize();
  driver.switchTo().frame(0);
  Actions actions = new Actions(driver);
  actions.clickAndHold(driver.findElement(By.xpath("//div[@id= 'draggable']")))
         .moveToElement(driver.findElement(By.xpath("//div[@id= 'droppable']")))
         .release().build().perform();
 }
}

Alternative Method (dragAndDrop(scr element, target element))

Alternatively, you can do drag and drop by using dragAndDrop(sourceElement, targetElement) method. In this method we need to pass the two parameters, one is source element and the other is the target element.

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
public class DragAndDropMethod {
 public static void main(String[] args) throws InterruptedException {
  System.setProperty("webdriver.chrome.driver", "/home/khawer/Desktop/chromedriver");
  WebDriver driver = new ChromeDriver();
  driver.get("https://jqueryui.com/droppable/");
  driver.manage().window().maximize();
  driver.switchTo().frame(0);
  Actions actions = new Actions(driver);
  WebElement sourceElement = driver.findElement(By.xpath("//div[@id= 'draggable']"));
  WebElement targetElement = driver.findElement(By.xpath("//div[@id= 'droppable']"));
  actions.dragAndDrop(sourceElement, targetElement).build().perform();
 }
}

3) Drag and Drop (dragAndDropBy(source, xOffset, yOffset))

If you want to move a single element to a new location then dragAndDropBy(source, xOffset, yOffset) method is used. It takes two parameters one is source element and the other one is x,y coordinates. In the given example the source element will be moved to a new location (xOffset = 200,yOffset = 100).

Selenium Command: actions.dragAndDropBy(elementToDrag, 200, 100).perform();

Example Code:

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
public class DragAndDropBy {
 public static void main(String[] args) {
  System.setProperty("webdriver.chrome.driver", "/home/khawer/Desktop/chromedriver");
  WebDriver driver = new ChromeDriver();
  driver.get("https://jqueryui.com/draggable/");
  driver.manage().window().maximize();
  driver.switchTo().frame(0);
  WebElement elementToDrag = driver.findElement(By.id("draggable"));
  Actions actions = new Actions(driver);
  actions.dragAndDropBy(elementToDrag, 200, 100).perform();
 }
}

4) Double Click (doubleClick())

Double click action in Selenium web driver can be achieved by using Actions class. Actions class is a builtin class in Selenium web driver used to perform multiple keyboard and mouse operations such as Right Click, Drag and Drop. Double click in Selenium using Actions class is done by the following selenium command.

Actions actions = new Actions(driver);
WebElement element = driver.findElement(By.id("ID"));
actions.doubleClick(element).perform();

Initially, we instantiate an object of Actions class and pass the driver object as a parameter. Then we locate the required element that we want to double click. After that, we use the pre-defined method doubleClick() to perform the double click action. Given below is the practical example of double click method.

import org.openqa.selenium.By;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
public class DoubleClick {
 public static void main(String[] args) throws InterruptedException {
  System.setProperty("webdriver.chrome.driver", "/home/khawer/Desktop/chromedriver");
  WebDriver driver = new ChromeDriver();
  driver.get("https://jqueryui.com/");
  driver.manage().window().maximize();
  Actions actions = new Actions(driver);
  actions.moveToElement(driver.findElement(By.xpath("//h3[text()= 'Interactions']")));
  actions.doubleClick().perform();
 }
}

I hope this article, will help you more to understand the Mouse Events, Drag and Drop events.