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/droppable.php");

      // 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']/p"));
      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/selenium-java -->
   <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/droppable.php");

      // 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']/p"));
      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().perform();

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/droppable.php");

      // 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']/p"));
      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.