How to Drag and Drop Element using selenium? Bellow given "dragAndDrop" and "dragAndDropToObject" commands can perform that action in selenium. You can use anyone of them for dragging element from one position and dropping it at another position.
"dragAndDrop" Command
"dragAndDrop" command is useful to drag an element from one position and drop it on other position. Here
you need to provide source element locator in target column and x,y offset in pixel (Current location to destination location where you want to drop element) in value column with "dragAndDrop" command. Practical example is given bellow.
"dragAndDropToObject" command
"dragAndDropToObject" command is little different from "dragAndDrop" command. Here you need to provide element locator of object to be dragged in target column and element locator of drag destination object in value column. See bellow example.
"highlight" Command
"highlight" Command in selenium used for highlighting targeted element. It will highlight targeted element with yellow color. See in bellow given example, i have highlighted targeted elements before dragging and dropping them.
"highlight" Command
"highlight" Command in selenium used for highlighting targeted element. It will highlight targeted element with yellow color. See in bellow given example, i have highlighted targeted elements before dragging and dropping them.
| New Test | ||
| Command | Target | Value |
| open | http://jqueryui.com/droppable/ | |
| pause | 2000 | |
| highlight | id=draggable | |
| pause | 2000 | |
| highlight | id=droppable | |
| pause | 1000 | |
| dragAndDrop | id=draggable | 160,40 |
| pause | 5000 | |
| refreshAndWait | ||
| pause | 2000 | |
| highlight | id=draggable | |
| pause | 2000 | |
| highlight | id=droppable | |
| pause | 1000 | |
| dragAndDropToObject | id=draggable | id=droppable |
In above example, selenium IDE will drag small square object and will drop it in to big square object. Here "id=draggable" is element locator of object to be dragged. Here i have given "160,40" in value field with "dragAndDrop" command. It tells selenium to drag and drop element at 160 pixel in x direction(horizontal) and 40 pixel in y direction(Vertical).
"dragAndDropToObject" is using destination element locator at place of x,y pixel in value column. Here, "id=droppable" is element locator of destination element. So element "id=draggable"(small square) will be dragged from its position and dropped on "id=droppable"(big square) element. Run above example and see element movement carefully.
CLICK HERE to see how to drag and drop element using "mouseDown", "mouseMoveAt" and "mouseUp" commands with example.
CLICK HERE to see how to drag and drop element using "mouseDown", "mouseMoveAt" and "mouseUp" commands with example.
No comments:
Post a Comment