App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Get Started free
Home Guide Quick XPath Locators Cheat Sheet

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.

SelectDropDown in Xpath

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.

Absolute Xpath

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

Relative Xpath

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.

AxisDescriptionExample
ancestorancestor is used when we want to check all the parent nodes from the context node up to root.
//select/ancestor::div
ancestor-or-selfancestor-or-self is used when we want to select all the parent nodes upto root including the context node
//select/ancestor-or-self::div
attributeattribute is used when we want to query for an element using its attributes like id, class, value etc..
//div[@class='sort']/select
childchild is used when we want to query for child element with parent reference
//div[@class='sort']/child::select
descendantdescendant 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-selfdescendant-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::*
followingfollowing 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-siblingfollowing-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::*
parentparent is used when we want to query for the immediate parent of the current context node. This uses two dots “..”
//div[@class='sort']/..
precedingpreceding is used when we want to query for elements that are preceding to the current context node
//div[@class='sort']/preceding::*
preceding-siblingpreceding-sibling is used when we want to query for the sibling element preceding to the current context node
//div[@class='sort']/preceding-sibling::*
selfself 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:

FunctionDescriptionExample
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.

Tags
Automated UI Testing Automation Testing Website Testing

Featured Articles

How to use XPath in Selenium? (using Text, Attributes, Logical Operators)

How to find element by XPath in Selenium with Example

App & Browser Testing Made Easy

Seamlessly test across 20,000+ real devices with BrowserStack