297. 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 http://book.theautomatedtester.co.uk 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. Hence id=but1 is the locator we've to use in the Selenium WebDriver Automation Test Script for locating the Button with ID Button in the above screenshot.

Example of Selenium 'WebDriver' Automation Test Using id=but1 locator: 

_driver.findElement(By.id("but1")).click();

Please comment below to feedback or ask questions.

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