In this article, we will try to understand how to perform Drag and Drop ( dragAndDrop ) action in Selenium WebDriver.
Selenium WebDriver has become a very powerful automation tool for automating web applications. It can perform all sorts of operations on a web application that you can imagine. Having said that, it can’t automate windows applications. If you need to automate the Windows Authentication dialogbox or upload a file we can use AutoIt along with Selenium to automate scenarios wherein Selenium needs to interact the windows element along with the web element in Selenium WebDriver.
Some of the web applications provide a lot of customization without any coding. Such an example is moving some menu options from one location to another location by just drag and drop action. At first glance, it may seem a complex operation to you but fortunately, Selenium has made it very easier for you.
We can automate the Drag and Drop action in Selenium using the Actions class. The syntax for performing Drag and Drop action is as follows.
Actions action = new Actions(driver);
action.dragAndDrop(Sourcelocator, Destinationlocator).build().perform();
Example of Drag and Drop Action in Selenium WebDriver
Test Scenario
- Launch the browser
- Navigate to https://javascript.info/article/mouse-drag-and-drop/ball4/
- You will see a goal post and a football.
- Drag and drop the football into the goal post as shown in the below screenshot.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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 DragAndDropAction { public static void main(String[] args) throws InterruptedException { //Setting the path of Chrome Browser Driver String BrowserDriverPath= "C:\\SeleniumBrowserDrivers\\chromedriver.exe"; System.setProperty("webdriver.chrome.driver",BrowserDriverPath); WebDriver driver = new ChromeDriver(); driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); driver.get("https://javascript.info/article/mouse-drag-and-drop/ball4/"); driver.manage().window().maximize(); //driver.switchTo().frame("iframeResult"); //Opening a link in a new tab in Selenium using action class WebElement dgragFrom = driver.findElement(By.xpath("//*[@id=\"ball\"]")); WebElement dropTo = driver.findElement(By.xpath("//*[@id=\"gate\"]")); //Performing Drag and drop Action Actions actions = new Actions(driver); actions.dragAndDrop(dgragFrom, dropTo).build().perform(); //Uncomment following line to Close the browser //driver.quit(); } } |
Example of Drag and Drop Using clickAndHold Action in Selenium
The following shows how to perform drag and drop by click and holding the desired element and dropping it on the expected element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
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.Action; import org.openqa.selenium.interactions.Actions; public class DragAndDropByClickAndHoldAction { public static void main(String[] args) throws InterruptedException { //Setting the path of Chrome Browser Driver String BrowserDriverPath= "C:\\SeleniumBrowserDrivers\\chromedriver.exe"; System.setProperty("webdriver.chrome.driver",BrowserDriverPath); WebDriver driver = new ChromeDriver(); driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); driver.get("https://javascript.info/article/mouse-drag-and-drop/ball4/"); driver.manage().window().maximize(); //driver.switchTo().frame("iframeResult"); //Opening a link in a new tab in Selenium using action class WebElement dgragFrom = driver.findElement(By.xpath("//*[@id=\"ball\"]")); WebElement dropTo = driver.findElement(By.xpath("//*[@id=\"gate\"]")); Actions actions = new Actions(driver); //Click and Holding the dgragFrom element and moving it to dropTo element //and then release the element Action dragAndDropAction = actions.clickAndHold(dgragFrom) .moveToElement(dropTo) .release(dropTo) .build(); //Using perform method to perform above sequence of action dragAndDropAction.perform(); //Uncomment following line to Close the browser //driver.quit(); } } |
Example of Drag and Drop to an X and Y co-ordinate in Selenium
The following is the syntax to perform drag and drop to a specific coordinate location.
Actions action = new Actions(driver);
action.dragAndDropBy(Sourcelocator, int xOffset, int yOffset).build().perform();
Test Scenario
- Launch the browser
- Navigate to https://javascript.info/article/mouse-drag-and-drop/ball4/
- You will see a goal post and a football.
- Drag and drop the football to a coordinate (50,200)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
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 DragAndDropByAction { public static void main(String[] args) throws InterruptedException { //Setting the path of Chrome Browser Driver String BrowserDriverPath= "C:\\SeleniumBrowserDrivers\\chromedriver.exe"; System.setProperty("webdriver.chrome.driver",BrowserDriverPath); WebDriver driver = new ChromeDriver(); driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS); driver.get("https://javascript.info/article/mouse-drag-and-drop/ball4/"); driver.manage().window().maximize(); //driver.switchTo().frame("iframeResult"); //Opening a link in a new tab in Selenium using action class WebElement dgragFrom = driver.findElement(By.xpath("//*[@id=\"ball\"]")); WebElement dropTo = driver.findElement(By.xpath("//*[@id=\"gate\"]")); Actions actions = new Actions(driver); //Moving football to 50,200 offset position actions.dragAndDropBy(dgragFrom, 50,200).build().perform(); //Uncomment following line to Close the browser //driver.quit(); } } |
Conclusion
We learned three different ways of performing drag and drop operations using methods dragAndDrop() and dragAndDropBy() and clickAndHold() along with moveToElement() and release() method.I hope you will like this article.If you have you have any queries please comment it in the comment box and don’t forget to share this article.
Recommended Posts
- Handle Dynamic Web Tables In Selenium WebDriver
- How to Handle a New Tab in Selenium WebDriver and Switch Between Tabs
- How to Handle Multiple Windows In Selenium WebDriver
- Wait Commands in Selenium WebDriver | Implicit | Explicit | Fluent Wait
- Top #23 Most Useful Selenium WebDriver Commands That You Must know
- How to Use CSS Selector in Selenium WebDriver | 13 Examples
- Intuitive Way of MySQL Database Testing in Selenium | LeanFT
- Read and Write Excel File in Java Using Apache POI Lib
