Selenium how to drag and drop element using "mouseDown", "mouseMoveAt" and "mouseUp" commands with example

Selenium can drag and drop element using "dragAndDrop" and "dragAndDropToObject" commands. Click here to read both command's description with example. I have read many posts about "DragDrop doesn't work with selenium for me..", "Unable to drag and drop element using Selenium..", "selenium dragAndDrop not dragging and dropping..", etc.. Here is alternative way of dragging and dropping an element using
selenium "mouseDown", "mouseMoveAt" and "mouseUp" commands which functions same as "dragAndDrop" and "dragAndDropToObject" commands. Let me describe all of them with example.

"mouseDown" Command
"mouseDown" command works like user is pressing left mouse button on targeted element. It will just press left mouse button but will not release it.

"mouseMoveAt" Command
"mouseMoveAt" command simulates a user is moving mouse at targeted element. Here you can also provide x y coordinates of targeted element to move mouse at specified coordinates of element.

"mouseUp" Command
"mouseUp" command behaves as user is releasing pressed left mouse button on targeted element.

Generally we need to use "mouseDown" and "mouseUp" commands with each other. Now let we try to drag and drop element using "mouseDown", "mouseMoveAt" and "mouseUp" commands.

New Test

In above example, "mouseDown" command will press left mouse button on targeted element "id=draggable"(Small Square box) to pick it. Next command "mouseMoveAt" will move mouse cursor on element "id=droppable"(Big Square box) to drag small square box on to the big square box. Last command "mouseUp" will release pressed left mouse button to drop "id=draggable"(Small Square box) on targeted element "id=droppable" (Big Square box). Try it yourself to get it clearly.

In this way, group of "mouseDown", "mouseMoveAt" and "mouseUp" commands are the alternatives of "dragAndDrop" and "dragAndDropToObject" commands.

1 comment: