How to Drag and Drop Action in Selenium WebDriver

Drag and drop in Selenium | Drag, and drop is an action that is performed with a mouse when a user drags (moves) a web element and then drops (places) on the defined area of a web page.

In other words, It is an action when a user grabs an object with a mouse button, drags it to a different location, and then drops it.

When an object is dragged, it is placed into the Clipboard.

For example, To move any file from one folder to another folder, we generally perform drag and drop action in Windows. We select a file in a folder, drags it to the desired folder, and then drops it.

A sample of drag and drop action has been shown in the below screenshot.

Drag and Drop Action Methods

Selenium WebDriver has given two convenient methods to perform drag and drop operations. They are as follows:

1. dragAndDropBy():

The API syntax for dragAndDropBy() method is as follows:

public Actions dragAndDropBy(WebElement source, int xOffset, int yOffset)

This method accepts three input parameters: target WebElement that has to be dragged.

xOffset is an input parameter that represents the amount of offset to be moved along the x-axis.

yOffset is an input parameter that represents the amount of offset to be moved along the y-axis.

2. dragAndDrop():

The dragAndDrop() method is similar to dragAndDropBy() method.

The only difference between them is that we move the cursor to WebElement by an offset in dragAndDropBy() method, whereas, in dragAndDrop() method, we directly move the cursor on target WebElement.

The API syntax for dragAndDrop() method is as follows:

public Actions dragAndDrop(WebElement source, WebElement target)

This method takes two input parameters WebElement source and WebElement target. The return type of both methods is Actions class.

Let’s automate a test scenario where we will use the dragAndDropBy() method of actions class to perform drag and drop action.

Scenario to Automate:

1. Launch the Firefox web browser.
2. Open URL “https://selenium08.blogspot.com/2020/01/drag-me.html”.
3. Locate web element by By.id.
4. Drag WebElement “rectangle” to any location of web page.

Look at the following source code to automate the above scenario.

Program source code 1:

package dragAndDropAction; 
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 DragAndDropByDemo 
{ 
public static void main(String[] args) 
{ 
  WebDriver driver = new FirefoxDriver(); 
  driver.manage().window().maximize(); 
 
   String URL = "https://selenium08.blogspot.com/2020/01/drag-me.html"; 
   driver.get(URL); 

// Locate WebElements by By.id. 
   WebElement src = driver.findElement(By.id("draggable")); 

// Create an object of Actions class and pass the driver object reference to its constructor. 
   Actions actions = new Actions(driver); 

// Call dragAndDropBy() method of actions class. 
     actions.dragAndDropBy(src, 200, 150); 
     actions.build().perform(); 
  } 
}

In the preceding code, “drag me anywhere” is a WebElement that has been identified by its id, and it is dragged 200px horizontally and 150px vertically.

Let’s automate another test scenario where we will use the dragAndDrop() method of actions class to perform drag and drop action.

Scenario to Automate:

1. Launch the Firefox web browser.
2. Open URL “https://selenium08.blogspot.com/2020/01/drag-drop.html”.
3. Locate web elements by By.id.
4. Drag the WebElement “Scientech Easy” rectangle to the “Drop here” rectangle.

Let’s see the following source code to automate the above scenario.

Program source code 2:

package dragAndDropAction; 
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 DragAndDropAction 
{ 
 public static void main(String[] args) 
 { 
   WebDriver driver = new FirefoxDriver(); 
  driver.manage().window().maximize(); 
  
  String URL = "https://selenium08.blogspot.com/2020/01/drag-drop.html"; 
  driver.get(URL); 

// Locate WebElements by By.id. 
   WebElement src = driver.findElement(By.id("draggable")); 
   WebElement trgt = driver.findElement(By.id("droppable")); 

// Create an object of Actions class and pass driver object reference to its constructor. 
     Actions actions = new Actions(driver); 

// Call dragAndDrop() method of actions class. 
     actions.dragAndDrop(src, trgt); 
     actions.build().perform(); 
  
     System.out.println("Drag and drop action has been performed successfully"); 
  } 
}

In the preceding code, source and target WebElements have been identified by their IDs and the dragAndDrop() method has been used to drag one WebElement to another.

After running the above code, the first square box dropped on the second square box as shown in the below screenshot.

Now, run your code and see that the first square box dropped on the second box or not.

Hope that this tutorial has covered all important points related to drag and drop action in Selenium WebDriver with example scenario. I hope that you will have understood this easy topic and successfully have run the code.

This topic is important for interview purposes, especially for fresher and 2 years of experience.
Thanks for reading!!!
Next ⇒ JavascriptExecutor in Selenium WebDriver⇐ Prev Next ⇒

Please share your love