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.

Table of Contents

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

Drag and Drop	Action Class Build
Selenium provides action.dragandDrop class to move elements from one end to another	Used to move an element from one end to another by working on the element coordinates
The user does not have to use build() and perform() actions here to move the elements which is an added advantage	build() method in Actions class is used to create the chain of action or operations to be performed. perform() method in Actions Class is used to execute the chain of action created using build() method

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.