Drag and Drop in Selenium WebDriver

Few web applications can automate drag and drop functionality, i.e., drag web elements from one end/area and drop them on a defined area or element. For automating the drag and drop action of such elements, one can use the Selenium Web driver.

However, Drag-n-Drop cannot be done by simple WebElement commands. To handle those types of advanced actions, we have the Actions class in Selenium.

What is the Actions class in Selenium?

Actions class is a collection of individual Actions that you want to perform. E.g., we might want to perform a mouse click on an element. In this case, we can look at two different Action:

• Moving the mouse pointer to the element
• Clicking on the element

There is a collection of methods available in the Actions class. The below screenshot shows the list of methods available.

Actions class & Action class reside in org.openqa.selenium.Interactions package of WebDriver API. To consume these, import their packages:

import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.interactions.Action;
Action class is defined and called using the given syntax:
Actions action = new Actions(driver);
action.moveToElement(element).click().perform();

Methods of Action Class:

Action class is mainly useful for mouse and keyboard actions. In order to perform these actions, Selenium provides various methods.

1. Mouse Actions:

• doubleClick(): it performs double click on the element
• clickAndHold(): it performs long click on the mouse without releasing it
• dragAndDrop(): it drags the element from one point and drops to another
• moveToElement(): it shifts the mouse pointer to the center of the element
• contextClick(): it performs right-click on the mouse

2. Keyboard Actions:

• sendKeys(): it sends a series of keys to the element
• keyUp(): it performs key release
• keyDown(): it performs keypress without release

What is Drag and Drop in Selenium Web driver?

Drag and Drop action is performed using a mouse when a user moves/drags any web element from one location/area and then places/drops it to another point.

It is a common action used in Windows Explorer while moving a file from one folder to another. Here, the user selects a file from the folder, drags it to the desired folder, and drops it.

The different methods to perform Drag and Drop are:

1. Drag and Drop using the Action Class dragAndDrop Method.
2. Drag and Drop using the clickAndHold, moveToElement, and release Method.
3. Drag and Drop using the dragAndDropBy and offset method.

Drag and Drop using the Action Class dragAndDrop Method:

In the Selenium dragAndDrop method, two parameters are passed:

• The first parameter is the Sourcelocator, which is being dragged.
• The second parameter is the Destinationlocator on which the Sourcelocator needs to be dropped.

Syntax:

Actions action = new Actions(driver);
action.dragAndDrop(Sourcelocator, Destinationlocator).build().perform();
Example of Drag and Drop using Action Class dragAndDrop method:
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;
public class DemoDragDrop { 
public static void main(String arg[]) throws Exception { 
// Initiate browser
WebDriver driver=new FirefoxDriver(); 
// maximize browser
driver.manage().window().maximize(); 
// Open webpage
driver.get("http://jqueryui.com/resources/demos/droppable/default.html"); 
// Add 5 seconds wait
Thread.sleep(5000); 
// Create object of actions class
Actions act=new Actions(driver); 
// find element which we need to drag
WebElement drag=driver.findElement(By.xpath(".//*[@id='draggable']")); 
// find element which we need to drop
WebElement drop=driver.findElement(By.xpath(".//*[@id='droppable']")); 
// this will drag element to destination
act.dragAndDrop(drag, drop).build().perform(); 
} 
}

Drag and Drop using the clickAndHold, moveToElement, and release Method:

Methods for performing drag and drop on a web element are as follows:

1. clickAndHold(WebElement element) – It clicks a web element at the middle (without releasing).
2. moveToElement(WebElement element) – It moves the mouse pointer to the middle of the web element without clicking.
3. release(WebElement element) – It releases the left click (which is in the pressed state).
4. build() – Generates a composite action.

Example of Drag and Drop using clickAndHold, moveToElement and release Method:

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions; 
public class DragAndDrop { 
public static void main(String arg[]) { 
System.setProperty("webdriver.gecko.driver","E:\\geckodriver.exe"); 
WebDriver driver = new FirefoxDriver(); 
driver.get("https://www.stqatools.com"); 
WebElement drag1 = driver.findElement(By.id("Drag_id")); 
WebElement drop1 = driver.findElement(By.id("Drop_id")); 
Actions act = new Actions(driver); 
act.clickAndHold(drag1).build().perform(); 
act.moveToElement(drop1).build().perform(); 
act.release(drop1).build().perform(); 
} 
}

Drag and Drop using the dragAndDropBy and offset method:

This method will click & hold the source element and moves by a given offset, then releases the mouse. Offsets are defined by x & y.

• xOffset is horizontal movement
• yOffset is a vertical movement 

Syntax:

Actions action = new Actions(driver);
actions.dragAndDropBy(source, xOffset, yOffset).perform();

Example:

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions; 
public class HandleDropDrop { 
public static void main(String arg[]) throws InterruptedException { 
System.setProperty("webdriver.chrome.driver", "./src/test/resources/chromedriver.exe");
WebDriver driver=new ChromeDriver();
// Open webpage
driver.get("http://jqueryui.com/resources/demos/droppable/default.html"); 
driver.switchTo().frame(0);
// Add 5 seconds wait
Thread.sleep(5000); 
// Create object of actions class
Actions act=new Actions(driver); 
// find element which we need to drag
WebElement drag=driver.findElement(By.xpath(".//*[@id='draggable']"));
// calling the method and x,y cordinates are random
act.dragAndDropBy(drag, 250, 150).build().perform(); 
} 
}