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

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
Target - [ locator of the target element ]
Value - [ (x-pixels),(y-pixels) ]
    - 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
Target - [ locator of the target element ]
Value - [ locator of the destination element you want to drop it on top of ]

---

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

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.