26. 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. Find out whether the Name property value of the selected/inspected element is available in the highlighted HTML code. Observe that 'Name' property value is also not shown in the highlighted HTML code. What should we do then ? Answer : As we know that we are going to identify and choose the locators according to the priority from the list of locators explained  in Post # 20 Different Types of Locators to identify the UI elements  , we know that ID locator has the highest priority and 'Name' locator is the next in priority. If we don't find the ID and Name locators we've to look out for the next priority locator i.e. Link Locator. 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. Hence link=Index is the locator we've to use in the Selenium RC Automation Test Script for locating the Index link in the above screenshot.

Example of Selenium RC Automation Test Using link=Index locator: 

object1.click("link=Index");   

Please comment below to feedback or ask questions.

How to identify the elements using the 'XPath' locator will be explained in the next post.