Drag and Drop Operation using Selenium WebDriver
“Drag and Drop” is another mouse operation which means grabbing a WebElement and dropping it at another location. Selenium WebDriver provides Actions class to perform all mouse operations, and the method id dragAndDrop();
This operation can also we performed in another way. Let us understand both ways with an example:
Scenario:
- Navigate to https://jqueryui.com/droppable/
- There are two WebElements “Drag me to my target” and “Drop here”
- Grab the first WebElement, move it other and drop there.
Refer below image:
Refer the code here:
package com.edureka.day8; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.interactions.Actions; public class DragAndDrop { public static void main(String[] args) { ChromeDriver Driver; System.setProperty("webdriver.chrome.driver", "C:\\workspace\\libs\\chromedriver.exe"); Driver = new ChromeDriver(); //Maximizing the browser Driver.manage().window().maximize(); //To delete(by-pass) all the cookies from browser Driver.manage().deleteAllCookies(); Driver.manage().timeouts().pageLoadTimeout(90, TimeUnit.SECONDS); Driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); String url = "http://jqueryui.com/droppable/"; Driver.get(url); WebElement frame = Driver.findElement(By.className("demo-frame")); Driver.switchTo().frame(frame); WebElement source = Driver.findElement(By.id("draggable")); WebElement target = Driver.findElement(By.id("droppable")); Actions action = new Actions(Driver); action.dragAndDrop(source, target).build().perform(); } }
Here, in the above code, the two Web Elements “Draggable” and “Dropable” are in a frame. So we have to first switch to a frame before performing the further operations.
WebElement frame = Driver.findElement(By.className("demo-frame")); Driver.switchTo().frame(frame);
Identify both Web Elements:
WebElement source = Driver.findElement(By.id("draggable")); WebElement target = Driver.findElement(By.id("droppable"));
Perform Drag and Drop Operation: Actions class provides a method called dragAndDrop(source, target);
Actions action = new Actions(Driver); action.dragAndDrop(source, target).build().perform();
Drag and Drop can also be performed in another way, see below code:
Actions action = new Actions(Driver); action.moveToElement(source).clickAndHold().moveToElement(target).release().build().perform();
First, we are moving to a particular WebElement, click and hold this web element, then move to other WebElement and then release it.
I hope you enjoyed this article, I tried to explain it with a simple example.
For any questions, queries, or feedback feel free to write us at support@qatechhub.com or saurabh@qatechhub.com. Happy Learning 🙂