Selenium Webdriver - Drag and Drop

Drag and Drop operations are performed on an application when we make an attempt to move an
element from one section of a web page to another. Selenium web driver can be used to
automate tests dealing with dragging elements on a page.

Selenium webdriver can be used to perform drag and drop with the help of dragAndDrop() and
dragAndDropBy() methods in Actions class. The dragAndDrop method takes two parameters -
source and destination locator values. The dragAndDropBy method takes three parameters -
source locator, x offset value(in pixels) in horizontal direction, and y offset value(in pixels) in
vertical direction.

Let us now discuss the identification of drag and drop operations performed on a web page as
shown in the below image. First, we would need to right click on the web page, and then click on
the Inspect button in the Chrome browser. Then, the corresponding HTML code for the whole
page would be visible. For investigating both the source and destination elements on that web
page, we would need to click on the left upward arrow, available to the top of the visible HTML
code as highlighted below.
Let us take an example of the above page, where we would drag source the element with text -
Drag me to my target to the destination element having the text - Drop here. Once the entire
action has been completed, we would get the text - Dropped! on the web page as highlighted on
the below image.
Syntax
Syntax to perform Drag and Drop operation with dragAndDrop method −

WebDriver driver = new ChromeDriver();

WebElement sourceElement= driver.findElement(By.id("<value of id>"));
WebElement targetElement= driver.findElement(By.id("<value of id>"));

// Drag and drop method of Actions class

Actions a = new Actions(driver);
a.dragAndDrop(sourceElement, targetElement).build().perform();

Example
Code Implementation on DragAndDrp.java class file.

package org.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;
import java.util.concurrent.TimeUnit;

public class DragAndDrp {

public static void main(String[] args) throws InterruptedException

// Initiate the Webdriver

WebDriver driver = new ChromeDriver();

// adding implicit wait of 15 secs

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

// URL launch for accessing drag and drop elements

driver.get("https://www.tutorialspoint.com/selenium/practice/drop

// identify source and target elements for drag and drop

WebElement sourceElement= driver.findElement(By.id("draggable"))
WebElement targetElement= driver.findElement(By.id("droppable"))

// drag and drop operations without build and perform methods

Actions a = new Actions(driver);
a.dragAndDrop(sourceElement, targetElement).build().perform();

// identify text after element is dropped

WebElement text = driver.findElement(By.xpath("//*[@id='droppable
System.out.println("Text is : " + text.getText());

// quitting browser after drag and drop operations completed

driver.quit();
}
}

Dependencies added in pom.xml file −

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>org.example</groupId>
<artifactId>SeleniumJava</artifactId>
<version>1.0-SNAPSHOT</version>

<properties>
<maven.compiler.source>16</maven.compiler.source>
<maven.compiler.target>16</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding
</properties>

<!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/sele
<dependencies>
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.11.0</version>
</dependency>
</dependencies>
</project>

Output

Text is : Dropped!

Process finished with exit code 0

In the above example, we had first performed a drag and drop operation from the source to the
destination locator, and also received the message in the console - Text is : Dropped! (which is
received after drag and drop operation has been completed in this application).

Finally, the message Process finished with exit code 0 was received, signifying successful
execution of the code.

We can also take the help of the clickAndHold(), moveToElement(), and release() methods(all
part of Actions class) implement the example as discussed above. All these methods take one
parameter - locator id of the element on which those actions are to be performed. Finally, we
would use the perform() and build() methods to execute and complete all the actions
respectively.
Syntax
Syntax to perform Drag and Drop operation using multiple methods of Actions class together −

WebDriver driver = new ChromeDriver();

WebElement sourceElement= driver.findElement(By.id("<value of id>"));
WebElement targetElement= driver.findElement(By.id("<value of id>"));

// Other methods of Actions class

Actions a = new Actions(driver);
a.clickAndHold(sourceElement)
.moveToElement(targetElement)
.release(targetElement)
.build().perform();

Example
Code Implementation on DragAndDrpOption2.java class file.

package org.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;
import java.util.concurrent.TimeUnit;

public class DragAndDrpOption2 {

public static void main(String[] args) throws InterruptedException

// Initiate the Webdriver

WebDriver driver = new ChromeDriver();

// adding implicit wait of 15 secs

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

// URL launch for accessing drag and drop elements

driver.get("https://www.tutorialspoint.com/selenium/practice/drop

// identify source and target elements for drag and drop

 WebElement sourceElement= driver.findElement(By.id("draggable"))
WebElement targetElement= driver.findElement(By.id("droppable"))

// performing drag and drop operations

Actions a = new Actions(driver);
a.clickAndHold(sourceElement)
.moveToElement(targetElement)
.release(targetElement)
.build().perform();

// identify text after element is dropped

WebElement text = driver.findElement(By.xpath("//*[@id='droppable
System.out.println("Text is : " + text.getText());

// quitting browser after drag and drop operations completed

driver.quit();
}
}

Output

Text is after dragging: Dropped!

Process finished with exit code 0

In the above example, we had first performed a drag and drop operation from the source to the
destination locator, and also received the message in the console - Text is : Dropped!(which is
received after drag and drop operation has been completed in this application).

Finally, the message Process finished with exit code 0 was received, signifying successful
execution of the code.

We can also take the help of the dragAndDropBy() method to implement the example as
discussed above.

Syntax
Syntax to perform Drag and Drop operation with dragAndDrop method −

WebDriver driver = new ChromeDriver();

WebElement sourceElement= driver.findElement(By.id("<value of id>"));
WebElement targetElement= driver.findElement(By.id("<value of id>"));
 // Drag and drop by method of Actions class
Actions a = new Actions(driver);
a.dragAndDropBy(sourceElement, x offset value, y offset value).build()

The x off set value can be obtained by the difference of the x coordinates for the target and
source elements. Similarly, the y off set value can be obtained by the difference of the y
coordinates for the target and source elements.

Syntax to perform Drag and Drop operation with dragAndDropBy method −

WebDriver driver = new ChromeDriver();

WebElement sourceElement= driver.findElement(By.id("<value of id>"));
WebElement targetElement= driver.findElement(By.id("<value of id>"));

// get x coordinates of source element

int x = sourceElement.getLocation().getX();

// get y coordinates of target element

int y = targetElement.getLocation().getY();

// get x coordinates of target element

int x1 = targetElement.getLocation().getX();

// get y coordinates of source element

int y1 = sourceElement.getLocation().getY();

// off set difference between target and source

int locX = x1 - x;
int locY = y1 - y;

// drag and drop operations with offset

Actions a = new Actions(driver);
a.dragAndDropBy(sourceElement, locX, locY).build().perform();

Example
Code Implementation on DragAndDrpBy.java class file.

package org.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;
import java.util.concurrent.TimeUnit;

public class DragAndDrpBy {

public static void main(String[] args) throws InterruptedException

// Initiate the Webdriver

WebDriver driver = new ChromeDriver();

// adding implicit wait of 15 secs

driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

// URL launch for accessing drag and drop elements

driver.get("https://www.tutorialspoint.com/selenium/practice/drop

// identify source and target elements for drag and drop

WebElement sourceElement= driver.findElement(By.id("draggable"))
WebElement targetElement= driver.findElement(By.id("droppable"))

// get x coordinates of source element

int x = sourceElement.getLocation().getX();

// get y coordinates of target element

int y = targetElement.getLocation().getY();

// get x coordinates of target element

int x1 = targetElement.getLocation().getX();

// get y coordinates of source element

int y1 = sourceElement.getLocation().getY();

// off set difference between target and source

int locX = x1 - x;
int locY = y1 - y;

// drag and drop operations with offset

Actions a = new Actions(driver);
a.dragAndDropBy(sourceElement, locX, locY).build().perform();
 // identify text after element is dropped
WebElement text = driver.findElement(By.xpath("//*[@id='droppable
System.out.println("Text is : " + text.getText());

// quitting browser after drag and drop operations completed

driver.quit();
}
}

Output

Text is : Dropped!

Process finished with exit code 0

In the above example, we had first performed a drag and drop operation from the source to the
destination locators, and x, y offset values, and also received the message in the console - Text is
: Dropped!

Finally, the message Process finished with exit code 0 was received, signifying successful
execution of the code.

Thus, in this tutorial, we had discussed how to handle drag and drop operations using the
Selenium Webdriver.