HomeSelenium

New Selenium IDE – ‘drag and drop to object’ command

New Selenium IDE – ‘drag and drop to object’ command

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.

dadto Selenium IDE - demo

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:

Selenium IDE - Open Extension

2) In the displayed Selenium IDE dialog, click on ‘Record a new test in a new project’ option as shown below:

Selenium IDE - Record a new test in a new project

3) In the displayed screen of Selenium IDE, enter the Project name say ‘DragDrop’ and click on ‘OK’ button as shown below:

drag and drop to object Selenium IDE - project name

 

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:

dadto Selenium IDE - recording

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:

dadto Selenium IDE - lauched

 

6) Switch to Selenium IDE and select to stop the recording by clicking on ‘Stop Recording’ button as shown below:

Selenium IDE - Stop Recording

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:

dadto Selenium IDE - testone

 

8) Now click on the first row in the Selenium IDE’s Test Script Editor Box as shown below:

dadto Selenium IDE - first row

 

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:

dadto Selenium IDE - openURL

10) Click on ‘Play current test’ option as shown below:

dadto Selenium IDE - pct

11) In the displayed dialog, enter the URL say https://jqueryui.com/droppable/ and click on ‘Start Playback’ as shown below:

dadto Selenium IDE - start Playback

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:

dadto Selenium IDE - openApp

13) Now click on the second row in the Selenium IDE’s Test Script Editor Box as shown below:

dadto Selenium IDE - second row

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).

dadto Selenium IDE - type

15) Click on ‘Run current test’ option as shown below:

dadto Selenium IDE - run two

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.

dadto Selenium IDE - failed

Inspect the required UI element and observe that it is inside an iframe tag as shown below:

dadto Selenium IDE - insideFrame

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:

dadto Selenium IDE - insert for frame

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:

dadto Selenium IDE - type thre

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 :

dadto Selenium IDE - executed successfully

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 🙂

About Me > Arun Motoori

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.

If you like this article, share it on LinkedIn using the below button:

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *