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();
}
}
QA Automation Expert 