Selenium Webdriver Tutorials

How to perform Selenium Drag and Drop? Using Actions

In a recent interview, Selenium Drag and Drop was a part of the written test. Selenium Drag and Drop is one of the common scenarios in Automation testing. Let’s say we have a web application where we need to drag an item from one location to another location. These kinds of complex actions are not available in basic element properties. Thankfully Selenium WebDriver has Advanced User Interactions API (Actions class) to perform this kind of advanced user interactions for rich applications. For practicing, we will be using a dummy page having a draggable web element.

There are three ways to perform Selenium Drag and Drop using the Actions class. First – simply using the “dragAndDrop” method with appropriate parameters. Second is to use the “dragAndDropBy” method with appropriate element and x/y coordinates. Other option is to utilize the action chain generator that implements the Builder pattern to create a Composite Action containing a group of other actions. For Selenium Drag and Drop it would mean – Mouse Click and Hold >> Move mouse to destination >> Drop the element by releasing the mouse.

Selenium Drag and Drop | Using Actions class

For performing complex User gestures like Selenium Drag and Drop, we have Actions class in Selenium WebDriver. Using the Actions class, we first need to build a sequence of composite events and then perform it using Action (an interface which represents a single user-interaction). The different methods of Actions class we will be using here are –

dragAndDrop

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

  • Sourcelocator: The element which we need to drag.
  • Destinationlocator: The element on which we need to drop the first element.

The key here is the below 3 lines of code,

Which finds the source and target locations and then uses the dragAndDrop method to execute Selenium Drag and Drop.

dragAndDropBy

We can also perform drag and drop using x and y coordinate but this will be only applicable when destination is not given. The pixels values change with screen resolution and browser size. This method is hence not reliable and not widely used.

Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of Destinationlocator)

  • Sourcelocator: The element which we need to drag.
  • The second parameter is x-axis pixel value of the 2nd element on which we need to drop the first element.
  • The third parameter is y-axis pixel value of the 2nd element on which we need to drop the first element.

Again the key here is below 2 lines of code,

Which first finds the element to be dragged and dropped and then uses the dragAndDropBy method to execute Selenium Drag and Drop using X & Y coordinates of the destination location.

Selenium Drag and Drop Actions

Composite Actions

In few websites the draggable elements doesn’t work with either of the above cases. In that case, we can perform an automated Drag and Drop as we will do manually.

  • clickAndHold(WebElement element) – Click & Hold (without releasing) the source web element.
  • moveToElement(WebElement element) – Moves the mouse pointer (without clicking) to the middle of the destination web element.
  • release(WebElement element) – Releases the left click (which is in pressed state).
  • build() – Generates a composite action

The key here is below 3 lines of code,

Which first finds the source and destination elements and then uses the composite action just like a User will drag and drop on the UI, i.e. clickAndHold >> moveToElement >> release. This case is very interesting one which will work anyway for all the types of draggable UI elements in the webpage.

Hope this article was of help for Selenium beginners. If Yes, don’t forget to share…

Leave a Reply

Your email address will not be published. Required fields are marked *