Refer the article New Selenium IDE – Commands (Selenese), for the complete list of Selenium IDE commands and their practical demonstrations.
drag and drop to object is one of the commands in Selenium IDE.
The purpose of drag and drop to object command in Selenium IDE, is to drag an UI element and drop it at another UI element.
In this article, I am going to practically demonstrate drag and drop to object command in Selenium IDE.
Let’s get started.
New Selenium IDE – ‘drag and drop to object’ command
Follow the below steps for practicing drag and drop to object command in Selenium IDE along with me:
1) Open Chrome Browser having Selenium IDE Extension installed and click on the ‘Selenium IDE’ extension as shown below:
2) In the displayed Selenium IDE dialog, click on ‘Record a new test in a new project’ option as shown below:
3) In the displayed screen of Selenium IDE, enter the Project name say ‘DragDrop’ and click on ‘OK’ button as shown below:
4) In the displayed screen of Selenium IDE, enter Project base URL as https://jqueryui.com/droppable/ and click on ‘Start Recording’ button as shown below:
5) The Base URL given in the above screen will be opened automatically in a new & fresh instance of chrome browser and ‘Selenium IDE is Recording’ message will be displayed as shown below:
6) Switch to Selenium IDE and select to stop the recording by clicking on ‘Stop Recording’ button as shown below:
7) It will ask for the Test Name on stopping the recording, enter any Test Name say ‘TestOne’ and click on ‘OK’ button as shown below:
8) Now click on the first row in the Selenium IDE’s Test Script Editor Box as shown below:
9) While the first row is selected in step 2, type the Selenium IDE command ‘open’ to the Command box field and https://jqueryui.com/droppable/ into the ‘Target’ box field as shown below:
10) Click on ‘Play current test’ option as shown below:
11) In the displayed dialog, enter the URL say https://jqueryui.com/droppable/ and click on ‘Start Playback’ as shown below:
12) Observe that the open command in the Selenium IDE will be executed and the given URL https://jqueryui.com/droppable/ will be automatically opened in the Chrome browser by Selenium IDE using the open command as shown below:
13) Now click on the second row in the Selenium IDE’s Test Script Editor Box as shown below:
14) While the second row is selected in step 2, enter the Selenium IDE command ‘drag and drop to object’ to the Command box field and enter the id locating strategy id=draggable into the Target box field and id=droppable into the Value field as shown below:
Note: The locating strategy id=draggable is for locating the ‘Drag me to my target’ option and id=droppable is for locating the ‘Drop here’ option on the https://jqueryui.com/droppable/ URL page (Shown at the beginning of the article).
15) Click on ‘Run current test’ option as shown below:
16) Observe the test in Selenium IDE will fail as shown below as the UI elements we are dragging and dropping into are inside a frame.
Inspect the required UI element and observe that it is inside an iframe tag as shown below:
17) In order to perform operations on the given UI elements, we need to first switch to the iframe using ‘select frame’ command.
Right-click on Step 2 and select ‘Insert new command’ as shown below:
Enter ‘select frame’ command in the Command field and the index=0 (Which locates the first frame on the page and we have only one frame in this page) into the Target field as shown below:
Click on ‘Run current test’ option and observe that this time the test will be passed (i.e. Dragging and Dropping of the element gets successful) as shown below :
Hence we have successfully dragged and dropped the UI element to another element using the Selenium IDE command ‘drag and drop to object‘.
Here concludes the practical demonstration of drag and drop to object command in Selenium IDE.
In the next article, I will practically demonstrate another Selenium IDE command.
Next Steps:
- > To learn more about Selenium, continue to the next post (Click on Next Post link below)
- > Check complete Selenium Tutorial Contents here (Click here)
Please leave your questions/comments/feedback below.
Happy Learning ?
On a mission to contribute to the Software Testing Community in all possible ways.
Refer the article New Selenium IDE – Commands (Selenese), for the complete list of Selenium IDE commands and their practical demonstrations.