26. Locate UI elements by Name

1. Launch Selenium IDE from the Firefox Browser -> Tools Menu
2. Ensure that the 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 the 'Inspect Element' option from the FireBug options, select the 'Button with Name' 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 highlighted HTML code is showing the ID Property value of the selected/inspected button. Observe that 'ID' property value is not shown by the highlighted HTML code as shown below.

9. we know that ID locator has the highest priority. If we don't find the ID locator we've to look out  for XPath or CSS Selector. But I am choosing Name Locator for explanation purpose. Now lets go forward and once again view the highlighted HTML code of the selected/inspected Button to find out whether it has 'Name' Locator. Observe that name="but2" is displayed in the highlighted HTML code of the inspected button in this example as shown below:

10. Copy the name value of the highlighted HTML code (i.e. but2 in this example)
11. Click on the blank space after the existing commands in the Selenium IDE as shown below:

12. Paste the name value of the highlighted HTML code (i.e. which is copied in the above Step 10 ) into Target Text box as shown below:

13. Click on the 'Find' button beside the Target text box to find out whether the inspected element is getting highlighted in yellow color as shown below:

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

15. Click on 'Play the current test' button on the selenium IDE