• Selenium Video Tutorials

Selenium WebDriver - Drag and Drop

Previous
Next

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.

Element Identification

Open the Chrome browser, and launch an application. Right click on the web page, then click on the Inspect button. Then, the actual HTML code for the whole page would be visible. For investigation of the source and destination elements on that web page, click on the left upward arrow, available at the top of the visible HTML code as highlighted below.

Selenium Drag And Drop 1

Example 1

Let us take an example of the above page, drag source element with text - Drag me to my target to the destination element with the text - Drop here. Once done, we would obtain the text - Dropped! on the web page.

Selenium Drag And Drop 2

Code Implementation

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 20 secs
      driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);

      // URL launch 
      driver.get("https://www.tutorialspoint.com/selenium/practice/droppable.php");

      // identify source and target elements 
      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();
   }
}

Output

Text is : Dropped!

Process finished with exit code 0

In the above example, we had performed a drag and drop operation from the source to the destination locator, and also obtained 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.

Example 2

We can also take the help of the clickAndHold(), moveToElement(), and release() methods all part of Actions Class implement the example as discussed above. Finally, we would use the perform() and build() methods to execute and complete all the actions respectively.

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
      driver.quit();
   }
}

Output

Text is after dragging: Dropped!

Here, we had performed a drag and drop operation from the source to the destination locator, and also received the message in the console - Text is : Dropped!

Example 3

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

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();

Code Implementation

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 with offset
      Actions act = new Actions(driver);
      act.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!

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!

Conclusion

This concludes our comprehensive take on the tutorial on Selenium Webdriver Drag and Drop. We’ve started with describing identification of source and destination elements for dragging and dropping operations on a web page, and walked through examples on how to handle drag and drop operations with Selenium Webdriver. This equips you with in-depth knowledge of the Selenium Webdriver Drag and Drop. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.

Print Page
Previous
Next
Advertisements