How to Drag and Drop in Selenium?

Selenium offers a wide range of functionalities for automation testing of a website. One website feature that must be automated during testing is Drag and Drop. Selenium provides an easy way to drag a web element from one part of the site and drop it at another. This article discusses how to perform this function in Selenium WebDriver.

Introduction to Drag and Drop in Selenium WebDriver

Few web applications have the ability to automate the functionality of drag and drop, i.e. drag web elements from one end and drop them on a defined area or element. In order to automate the drag and drop action of such elements, one can use Selenium Webdriver.

What is Drag and Drop in Selenium?

This action is performed using a mouse when a user moves (drags) a web element from one location and then places (drops) it at another point.

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

Syntax:

Actions action = new Actions(driver);
action.dragAndDrop(Sourcelocator, Destinationlocator).build().perform();

In the Selenium dragAndDrop method, we pass two parameters:

• The first parameter is the Sourcelocator element which is being dragged
• The second parameter is the Destinationlocator on which the previous element needs to be droppedMethods for performing drag and drop on a web element are as follows:
  • clickAndHold(WebElement element) – Clicks a web element at the middle (without releasing)
  • moveToElement(WebElement element) – Moves the mouse pointer to the middle of the web element without clicking
  • release(WebElement element) – Releases the left click (which is in the pressed state)
  • build() – Generates a composite action

Code Snippet

The code snippet below demonstrates the automation of the Drag and Drop action program.

//WebElement on which drag and drop operation needs to be performed
WebElement fromElement = driver.findElement(By Locator of fromElement);

//WebElement to which the above object is dropped
WebElement toElement = driver.findElement(By Locator of toElement);

//Creating object of Actions class to build composite actions
Actions builder = new Actions(driver);

//Building a drag and drop action
Action dragAndDrop = builder.clickAndHold(fromElement)
.moveToElement(toElement)
.release(toElement)
.build();

//Performing the drag and drop action
dragAndDrop.perform();

Try Running Code on Cloud Selenium Grid for Free

Difference between Drag and Drop vs Action Class Build

Use case: Example of Drag and Drop Action using Selenium and Java

In this example, the user will drag file A and drop it onto file B as shown below.

Let’s now code the same example to see how it works.

import java.util.concurrent.TimeUnit;
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 DragAndDropExample {
public static void main(String[] args) throws InterruptedException { 
//Set system properties for geckodriver System.setProperty("webdriver.gecko.driver", "Path_of_the_driver");
WebDriver driver = new FirefoxDriver();
String URL = "https://the-internet.herokuapp.com/drag_and_drop";
driver.get(URL);
// It is always advisable to Maximize the window before performing DragNDrop action driver.manage().window().maximize();
driver.manage().timeouts().implicitlyWait(10000, TimeUnit.MILLISECONDS);
//Actions class method to drag and drop 
Actions builder = new Actions(driver);
WebElement from = driver.findElement(By.id("column-a"));
WebElement to = driver.findElement(By.id("column-b")); 
//Perform drag and drop
builder.dragAndDrop(from, to).perform();
//verify text changed in to 'Drop here' box 
String textTo = to.getText();
if(textTo.equals("Dropped!")) {
System.out.println("PASS: File is dropped to target as expected");
}else {
System.out.println("FAIL: File couldn't be dropped to target as expected");
}
driver.close();
} 
}

Try Testing Code on Cloud Selenium Grid for Free

Run the code, and see how to automate the Drag and Drop action in Selenium. This is a common feature of websites and thus needs to be automated during automated Selenium testing. This article simplifies the process and helps testers get started with it immediately.