3 Ways Of Drag and Drop Action in Selenium

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

  1. Launch the browser
  2. Navigate to https://javascript.info/article/mouse-drag-and-drop/ball4/
  3. You will see a goal post and a football.
  4. Drag and drop the football into the goal post as shown in the below screenshot.

draganddrop action in selenium webdriver

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.

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

  1. Launch the browser
  2. Navigate to https://javascript.info/article/mouse-drag-and-drop/ball4/
  3. You will see a goal post and a football.
  4. Drag and drop the football to a coordinate (50,200)

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

Leave a Reply