Sunday, June 12, 2016

Drag & Drop - Selenium WebDriver

Drag & Drop - Selenium WebDriver


For drag & drop, we will use the below example. You can see the screenshot of a web page below before running the drag & drop code.


This is our drag & drop code which we will run in order to drag element "A" into the grey rectangle.

As far as the code is concerned, create a new driver for Firefox (You can try it on Chrome also. I tried and it worked fine.). Navigate to the desired URL. The URL which we are using in this example is http://mikeplate.github.io/jquery-drag-drop-plugin/example/simple.html. Maximize the browser window (its always a good idea). Find an element to the dragged / dropped and also the element on which it needs to be dropped, like source and target in the above code.
Next we are creating an instance of an Actions class. Then a little pause is there with Thread.Sleep, otherwise the code will run too fast and you will not the able to see the actual drag and drop. Usually Thread.Sleep is not a good idea. At last we are holding the source, moving it to the target and releasing it.

Below is the screenshot after our code run.


Another way to write the above code:


Drag & Drop for HTML5 is not supported at present. And there is a workaround to this.