25. Locate UI elements by XPath

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 'Selenium: Beginners Guide' text  and ensure that the selected text is highlighted in the HTML code as shown below:

8. View the highlighted HTML code of the selected text and find out whether the highlighted HTML code is showing the ID Property value of the selected/inspected text. 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, Name and Link locators we've to look out for the next priority locator i.e. XPath Locator. How to find out the XPath locator of the inspected element will be explained in the next step.

10. Ensure that you have already installed FirePath Addon for FireFire Browser, if not go through the my  earlier Post#  5 Install FirePath Addon for FireFox to install it

11. And also go through my earlier Post# 6 How to use Firepath if you dont know how to use Firepath

12. Click on 'Firepath' tab on the FireBug options Pane as shown below:

13. Repeat Steps 6,7 and Observe that Xpath locator of the inspected text element is displayed as shown below:

14. Copy the displayed XPath value in the above step

15. Click on the blank space after the existing commands in the Selenium IDE as shown below:

16. Paste the copied XPath locator (i.e. Copied in the step 14)  into the Target Text box on the Selenium IDE as shown below: (i.e. paste xpath=[CopiedXpath] )

17. Click on the 'Find' button beside the Target text box to find out whether the inspected text element is getting highlighted in yellow color as shown below: (i.e If the inspected text 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 XPath Locator [ i.e. html/body/div[1] in this example ] )

18. Hence xpath=html/body/div[1] is the locator we've to use in the Selenium WebDriver Automation Test Script for locating the 'Selenium: Beginners Guide' heading text in the above screenshots.

Example of Selenium WebDriver Automation Test Using xpath=html/body/div[1] locator: 

_driver.findElement(By.xpath("html/body/div[1]"));

Before concluding this post, I would like to let you know that:

In my experience, I've found that most of the UI elements are identified by using the XPath or CSS locators. As in most of the cases developers have not put ID or Name properties for the UI elements, in this case XPath will be the solution. As Xpath locators can identify the static and dynamic UI elements and also XPath flexibility allows us to identify the elements that cant be identified by other locators.

Please comment below to feedback or ask questions.

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