Drag and Drop action in Selenium WebDriver

 
 

In the previous tutorial, we have discussed about what is Actions class in Selenium WebDriver. In this tutorial, we will discuss about the Drag and Drop method of Selenium WebDriver.

What is Drag and Drop Action?
This is an action performed with a mouse when a user moves (drags) a web element and then places (drops) it into an alternate area.

Below are the methods Actions class provides for Drag-Drop action:
1. dragAndDrop(WebElementsource, WebElement target)
2. dragAndDropBy(WebElementsource, int xOffset, int yOffset)

dragAndDrop(WebElementsource, WebElement target)

A convenience method performs click-and-hold at the location of the source element, moves to the location of the target element, and then releases the mouse.

As you can see, the dragAndDrop(WebElement source, WebElement target) method has two arguments to pass. One is a source web element and another is target web element.  This source web element is any web element that needs to drag. Target web element is any web element on which dragged object needs to placed or dropped.
Now, when we have got the actions class object and the element as well, just invoke perform() method for the drag & drop:

   actions.dragAndDrop(source,target).perform(); 

Let us see this with the help of an example

import java.util.concurrent.TimeUnit;
 
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;
 
public class DragandDropDemo {
     public static void main(String[] args) {
          System.setProperty("webdriver.chrome.driver",
                                              "C:\\Users\\Vibha\\Desktop\\Drivers\\chromedriver_win32\\chromedriver.exe");
 
           // Create a new instance of the Chrome driver
           WebDriver driver = new ChromeDriver();
 
           // Launch the URL
           driver.get("https://crossbrowsertesting.github.io/drag-and-drop.html");
 
           // It is always advisable to Maximize the window before performing DragNDrop action
            driver.manage().window().maximize();
 
            driver.manage().timeouts().implicitlyWait(10000, TimeUnit.MILLISECONDS);
 
            // Find element xpath which we need to drag
            WebElement from = driver.findElement(By.id("draggable"));
 
            // Find element xpath where we need to drop
            WebElement to = driver.findElement(By.id("droppable"));
 
            // Create object of actions class
            Actions builder = new Actions(driver);
                        
            // Perform drag and drop operation
            builder.dragAndDrop(from, to).build().perform();
        }
}
 

Image before performing Drag and Drop operation

Image after performing Drag and Drop operation

Drag and Drop using clickAndHold, moveToElement and release Method


1. Hold the source
2. Move the element
3. Release the element

The different methods of Action class we will be using here for Drag and Drop in Selenium:
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 pressed state).
build() – Generates a composite action

Let us understand the use of these methods in a Selenium program

import java.util.concurrent.TimeUnit;
 
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;
 
public class DragandDropDemo {
      public static void main(String[] args) {
           System.setProperty("webdriver.chrome.driver",
                                              "C:\\Users\\Vibha\\Desktop\\Drivers\\chromedriver_win32\\chromedriver.exe");
 
            // Create a new instance of the Chrome driver
            WebDriver driver = new ChromeDriver();
 
            // Launch the URL
            driver.get("https://crossbrowsertesting.github.io/drag-and-drop.html");
 
            // It is always advisable to Maximize the window before performing DragNDrop action
            driver.manage().window().maximize();
 
            driver.manage().timeouts().implicitlyWait(10000, TimeUnit.MILLISECONDS);
 
             // Find element xpath which we need to drag
             WebElement source = driver.findElement(By.id("draggable"));
 
             // Find element xpath where we need to drop
             WebElement destination = driver.findElement(By.id("droppable"));
 
             // Create object of actions class
             Actions builder = new Actions(driver);
 
             // Click & Hold drag Webelement
             builder.clickAndHold(source).build().perform();
 
             // Move to drop Webelement
             builder.moveToElement(destination).build().perform();
 
             // Release drag webelement into drop webelement
             builder.release(source).build().perform();
       }
}

Drag and Drop using dragAndDropBy and offset method 

A convenience method that performs click-and-hold at the location of the source element, moves by a given offset, then releases the mouse.
• Using dragAndDropBy Method we drop WebElement on particular WebPage offset location.

Below is a Selenium program which shows the use of dragAndDropBy method

import java.util.concurrent.TimeUnit;
 
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;
 
public class DragandDropDemo {
      public static void main(String[] args) {
           System.setProperty("webdriver.chrome.driver",
                                              "C:\\Users\\Vibha\\Desktop\\Drivers\\chromedriver_win32\\chromedriver.exe");
 
            // Create a new instance of the Chrome driver
            WebDriver driver = new ChromeDriver();
 
            // Launch the URL
            driver.get("https://crossbrowsertesting.github.io/drag-and-drop.html");
 
            // It is always advisable to Maximize the window before performing DragNDrop action
            driver.manage().window().maximize();
 
            driver.manage().timeouts().implicitlyWait(10000, TimeUnit.MILLISECONDS);
 
            // Find element xpath which we need to drag
            WebElement source = driver.findElement(By.id("draggable"));
 
            // Using DragAndDrop method release draggable webelement into offset.
            new Actions(driver).dragAndDropBy(source, 150, 10).build().perform();
        }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s