Quick XPath Locators Cheat Sheet
By Gurudatt S A, Community Contributor - June 23, 2023
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.
Table of Contents
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
- Absolute
- 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:
- Open the application in the Chrome browser and click on the F12 key on the keyboard to open Dev Tool
- Inspect the Element
- 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.
| Axis | Description | Example |
|---|---|---|
| ancestor | ancestor is used when we want to check all the parent nodes from the context node up to root. | //select/ancestor::div |
| ancestor-or-self | ancestor-or-self is used when we want to select all the parent nodes upto root including the context node | //select/ancestor-or-self::div |
| attribute | attribute is used when we want to query for an element using its attributes like id, class, value etc.. | //div[@class='sort']/select |
| child | child is used when we want to query for child element with parent reference | //div[@class='sort']/child::select |
| descendant | descendant is used when we want to query for all the child element and its children of a context node | //div[@class='sort']/descendant::* |
| descendant-or-self | descendant-or-self is used when we to query for all the child elements and its children including context node | //div[@class='sort']/descendant-or-self::* |
| following | following is used when we want to query for all the elements after the current context node(except the context node’s descendant) | //div[@class='sort']/following::* |
| following-sibling | following-sibling is used when we want to query for the sibling element which belongs to same parent as context node | //div[@class='sort']/following-sibling::* |
| parent | parent is used when we want to query for the immediate parent of the current context node. This uses two dots “..” | //div[@class='sort']/.. |
| preceding | preceding is used when we want to query for elements that are preceding to the current context node | //div[@class='sort']/preceding::* |
| preceding-sibling | preceding-sibling is used when we want to query for the sibling element preceding to the current context node | //div[@class='sort']/preceding-sibling::* |
| self | self is used when we first query for a set of elements and then refine further for the current context node. This axis uses a single dot “.” | //div[@class='sort']/. |
2. Functions
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:
| Function | Description | Example |
| boolean() | This function accepts locator as parameter and it return true if the passed locator is found else returns false | boolean(//div[@class='sort']/select) |
| count() | This function accepts locator as parameter and returns the count of elements found | count(//div[@class='sort']/select/*) |
| id() | This function accepts id attribute of the element and returns the element if found | id('__next') |
| position() | This function is used when we need to identify an element based on its position | //select/option[position()=2] |
Note: There are a total of 37 functions and a detailed list can be found here
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.
Follow-Up Read: Selenium Locators Cheat Sheet
Was this post useful?
We're sorry to hear that. Please share your feedback so we can do better
Thanks a lot for your feedback!
