22. Locate UI elements by ID

1. Launch Selenium IDE from the Firefox Browser -> Tools Menu
2. Ensure that 'Record' option on the Selenium IDE is Turned On by default
3. Open in the Firefox Browser
4. Click on the 'Chapter2' link as shown below

5. Turn off the 'Record' option on the Selenium IDE as shown below:

6. Click on the FireBug option on the top right side of the page and ensure that the FireBug options are displayed as shown below:

7. Click on 'Inspect Element' option from the FireBug options, select the 'Button with ID' button and ensure that the selected Button is highlighted in the HTML code as shown below:

8. View the highlighted HTML code of the selected Button and find out whether the HTML code is showing the ID property value of the selected Button. Observe that id="but1" is displayed in the HTML code in this example as shown below:

9.  Copy the id value from the highlighted HTML code (i.e. but1 in this example)
10. Click on the blank space after the existing commands in the Selenium IDE as shown below:

11. Paste the id value of the highlighted HTML code (i.e. which is copied in the above step 9) into the Target text box of the Selenium IDE as shown below:

12. Click on the 'Find' button beside the Target text box and ensure that the inspected Button on the applications page is getting highlighted in yellow as shown below: (If the inspected Button is getting highlighted in yellow on clicking the 'Find' button on the Selenium IDE, it means that the Selenium is able to find the inspected Button using the 'ID' locator i.e, but1 in this example )

13. Type 'click' command into the 'Command' text box on the Selenium IDE as shown below:

14. Click on the 'Play the current test case' button on the selenium IDE and ensure that the above inspected Button is clicked and the test in the Selenium IDE is passed as shown in the below video:

Click Here to watch the video

Please comment below to feedback or ask questions.

How to Locate UI elements by Name will be explained in the Next Post


saba nazneen said...

Hi arun,
I am not able to copy the id value from highlighted HTML code on the blank space after the existing command in selenium IDE. Cud i knw y copy, paste options r deactive.DO I NEED TO INSTALL AGAIN SELENIUM IDE???? IS THAT AN INSTALLATION OROBLM

Mahalakshmi Anish said...


Im unable to see SELENIUM IDE under TOOLS menu. My FF version is 45. And I downloaded Selenium IDE 2.9.0. Is it compatibility issue?