24. Locate UI elements by Link

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 'Index' link and ensure that the selected link is highlighted in the HTML code as shown below:

8. View the highlighted HTML code of the selected link and find out whether the highlighted HTML code is showing the ID Property value of the selected/inspected link. Observe that 'ID' property value is not shown by the highlighted HTML code as shown below.

9. What should we do then ? Answer : As explained  in Post # 20 Different Types of Locators to identify the UI elements  , we know that ID locator has the highest priority. If we don't find the ID then we have to choose XPath or CSS Selector. But I am choosing Link 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 'Link' Locator. Observe that <a href="/">Index</a>  is displayed in the highlighted HTML code of the inspected button (i.e. Link is named as Index in HTML format using anchor tags, so Index is the link property value of the selected/inspected element in this example as shown below:

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

12. Paste the link=[Link Name] (i..e link=Index in this example) 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: (i.e If the inspected Link is getting highlighted in Yellow color on clicking the 'Find' button  on the Selenium IDE, it means that selenium is able to find the inspected link using the Link Locator [ i.e. Index in this example ] )

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 and ensure that the above inspected link (i.e. 'Index' link in this example ) 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 identify the elements using the 'XPath' locator will be explained in the next post.