25. Locate UI elements by XPath

XPath is a full programming language.

In Selenium Automation, we are going to use XPath to parse the HTML code of any web page and find out the XPath path for identifying or locating the elements on the web page.

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. 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 need to choose XPath or CSS locators. In this case though the CSS Selector has the high priority over XPath, for the explanation point of view I am choosing XPath. So 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 don't 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. Type 'verifyElementPresent' command into the Command text box on the Selenium IDE as shown below:

19. Click on 'Play the current test' button on the selenium IDE and ensure that the above inspected text  (i.e. 'Selenium: Beginners Guide' text in this example ) is verified whether it is present on the page or not and the test in the Selenium IDE is passed as shown in the below video:

Click here to watch the video

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 Selector locators. If you don't find any unique ID value to locate the UI elements, then we have to decide on using XPath or CSS Selector.

XPath Statements or CSS Selectors? Which is preferred ?

XPath statements slow down the tests where as CSS selectors run faster than the equivalent XPath. So CSS Selectors are preferred out of all the available locators if we are not able to locate the UI element using its unique ID property.

Please comment below to feedback or ask questions.

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