Drag and drop using Selenium IDE

Question

How do I drag and drop an object from one grid to another in the same page using Selenium IDE. This is a web page, and it is designed in ExtJS. Please help me out doing this using the IDE.

Answer 1

http://www.software-testing-tutorials-automation.com/2013/06/selenium-draganddrop-and.html

In Selenium IDE there are 2 main drag and drop commands;

---

(1) dragAndDrop - Locates the target element and drags the element by x pixels horizontally and y pixels vertically.

In the IDE this should look like;

Command  -  dragAndDrop<br/>
Target   -  [ locator of the target element ]<br/>
Value    -  [ (x-pixels),(y-pixels) ]  <br/>

where x-pixels/y-pixels can be negative (left/up respectively) or positive (right/down respectively)

---

(2) dragAndDropToObject - Locates the target element and drags the element to the centre pixel location of the destination element

In the IDE this should look like;

Command  -  dragAndDropToObject<br/>
Target   -  [ locator of the target element ]<br/>
Value    -  [ locator of the destination element to drop it on top of ]<br/>

---

The other drag and drop commands impose the -AndWait suffix, so assume that in response to the drag and drop done a request is sent and selenium should wait for the page to reload.

Answer 2

The functions (APIs) available in selenium for drag and drop do not work properly. So my suggestion for the drag and drop, can be resolved by the below code:

selenium.mouseDown(fromLocator, "0,0");
selenium.mouseMove(toLocator, "0,0");
selenium.mouseUp(toLocator, "0,0");

Please try and let us post your observation.

Answer 3

Our pages are programmed with extJS too and I managed to drag and drop elements with the following steps:

• mouseOver
• mouseDownAt
• MouseMoveAt
• MouseUpAt

But for me it is just possible if the element is visible at loading of the element. When I have to scroll to the element to get it visible, I did not find a way to drag 'n drop it.

Answer 4

For "dragAndDropToObject":

If you want to drag "A" and drop to Location of "B"

Command: dragAndDropToObject Target: enter the Xpath or CSS path of A value: enter the Xpath or CSS path of B

Hope it helps.