In the previous tutorial, we discussed what is Actions class in Selenium WebDriver. In this tutorial, we will discuss 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 the Actions class provides for Drag-Drop action:
1. dragAndDrop(WebElementsource, WebElement target)
2. dragAndDropBy(WebElementsource, int xOffset, int yOffset)
1. 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 a target web element. This source web element is any web element that needs to drag. Target web element is any web element on which a dragged object needs to be placed or dropped.
Now, when we have got the actions class object and the element as well, just invoke perform the ()method for the drag & drop:
actions.dragAndDrop(source,target).perform();
Let us see this with the help of an example.
import java.time.Duration;
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.chrome.ChromeOptions;
import org.openqa.selenium.interactions.Actions;
public class dragAndDrop_Demo {
protected static WebDriver driver;
public static void main(String[] args) {
// Create a new instance of the Chrome driver
ChromeOptions options = new ChromeOptions();
options.setImplicitWaitTimeout(Duration.ofSeconds(10));
options.addArguments("start-maximized");
driver = new ChromeDriver(options);
// Launch the URL
driver.get("https://www.selenium.dev/selenium/web/mouse_interaction.html");
WebElement draggable = driver.findElement(By.id("draggable"));
WebElement droppable = driver.findElement(By.id("droppable"));
new Actions(driver)
.dragAndDrop(draggable, droppable)
.perform();
System.out.println("Text appeared :" + driver.findElement(By.id("drop-status")).getText());
driver.close();
}
}
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 the pressed state).
• build() – Generates a composite action
Let us understand the use of these methods in a Selenium program
import java.time.Duration;
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.chrome.ChromeOptions;
import org.openqa.selenium.interactions.Actions;
public class clickAndHold_Demo {
protected static WebDriver driver;
public static void main(String[] args) {
// Create a new instance of the Chrome driver
ChromeOptions options = new ChromeOptions();
options.setImplicitWaitTimeout(Duration.ofSeconds(10));
options.addArguments("start-maximized");
driver = new ChromeDriver(options);
// Launch the URL
driver.get("https://www.selenium.dev/selenium/web/mouse_interaction.html");
WebElement clickable = driver.findElement(By.id("clickable"));
new Actions(driver)
.clickAndHold(clickable)
.perform();
System.out.println("Text appeared :" + driver.findElement(By.id("click-status")).getText());
}
}
The output of the above program is
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, and then releases the mouse.
• Using the dragAndDropBy Method, we drop WebElement on a particular WebPage offset location.
Below is a Selenium program that shows the use of the dragAndDropBy method.
import java.time.Duration;
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.chrome.ChromeOptions;
import org.openqa.selenium.interactions.Actions;
public class dragAndDropBy_Demo {
private static WebDriver driver;
public static void main(String[] args) {
// Create a new instance of the Chrome driver
ChromeOptions options = new ChromeOptions();
options.setImplicitWaitTimeout(Duration.ofSeconds(30));
options.addArguments("start-maximized");
driver = new ChromeDriver(options);
// Launch the URL
driver.get("https://www.selenium.dev/selenium/web/mouse_interaction.html");
WebElement draggable = driver.findElement(By.id("draggable"));
new Actions(driver)
.dragAndDropBy(draggable, 180,10)
.perform();
driver.close();
}
}
The output of the above program is
Congratulations on making it through this tutorial and hope you found it useful! Happy Learning!! Cheers!!
QA Automation Expert 