Quick XPath Locators Cheat Sheet

Browser Automation requires navigation through the elements of HTML / XML pages to automate its functions for website test automation. Frameworks like Selenium use XPath to locate the elements and perform the required functions for testing. This guide discusses various aspects of XPath and how to use it through this Selenium XPath cheat sheet.

What is XPath?

XPath stands for XML Path Language. XPath is mainly used in XSLT but is also popularly used for navigating through the DOM of any XML-like language document using XPathExpression. It is a type of Locator.

In test automation, XPathExpression in HTML Pages is used for navigating elements in an HTML page.

Types of XPath

An XPath expression can be written in two ways 

1. Absolute
2. Relative

To understand this better, let’s use the browserstack demo application as seen below.

As an exercise, let’s create an XPath expression to identify the Select dropdown.

1. Absolute XPath

Absolute XPath is the way of identifying an element starting from the root of the DOM. The XPath expression starts with “/” symbol. 

The drawback of writing Absolute XPath is length and maintainability. If there is a removal or inclusion of new element in the DOM within the absolute XPath already written, then the XPath expression will break and has to be rewritten again

Below is the example of Absolute XPath for identifying Select dropdown.

To obtain the Absolute XPath:

1. Open the application in the Chrome browser and click on the F12 key on the keyboard to open Dev Tool
2. Inspect the Element
3. Right-click on the inspected element in the Elements tab and select Copy > Copy Full XPath

The Absolute XPath of an element looks like this:

/html/body/div/div/div/main/div/div/div/select

2. Relative XPath

Relative XPath is the way of identifying an element by using its attributes for querying and can also be used for its nearest elements. Relative XPath doesn’t start with a root node; hence, this way of writing XPath is always reliable. The Path expression starts with “//”

Below would be the example of Relative XPath for identifying Select dropdown

The Relative XPath of an element looks like this

//div[@class='sort']/select

Different ways to Query an Element for XPath Locator

An element can be queried by using

• Axes
• Functions

1. Axes

There are 13 different axes for querying an element. Axis is used when we want to query for an element using its self attributes/ nearby elements, and hierarchical building relationships.

//select/ancestor::div

//select/ancestor-or-self::div

//div[@class='sort']/select

//div[@class='sort']/child::select

//div[@class='sort']/descendant::*

//div[@class='sort']/descendant-or-self::*

//div[@class='sort']/following::*

//div[@class='sort']/following-sibling::*

//div[@class='sort']/..

//div[@class='sort']/preceding::*

//div[@class='sort']/preceding-sibling::*

//div[@class='sort']/.

XPath functions come in handy when we need to check the existence of elements or return elements based on their attributes, position, etc.

Below are the most useful functions which can be used on day to day basis:

boolean(//div[@class='sort']/select)

count(//div[@class='sort']/select/*)

id('__next')

//select/option[position()=2]

Conclusion

We have seen the differences between Absolute and Relative XPath. As a tester or developer, it is best practice to avoid using Absolute XPath expression as it requires more maintenance and is relatively less reliable. And with the combination of Relative XPath and along with Axes and Functions, can be used to write powerful XPath expressions which are reliable and optimized.

By using XPathExpression with Selenium, you can automate various elements on the HTML pages for testing web applications.