How to Use XPath Axes in Selenium with Examples (2026)

This Tutorial Explains XPath Axes for Dynamic XPath in Selenium WebDriver With the help of Various XPath Axes Used, Examples and Explanation of Structure:

The Following are the uses of XPath in finding the dynamic web components while automating using Selenium WebDriver.

In the previous section, we learned about XPath functions and their importance in identifying the element. In this section, I will unveil the use of XPath Axes to form dynamic XPath in Selenium WebDriver. A comprehensive understanding of this will help you create robust locators for web components.

Table of Contents:

What are XPath Axes in Selenium?
Understanding XPath Axes
- Problem Statement
Types of XPath Axes Used in Selenium in Selenium Testing
XPath Axes Cheat Sheet
Structure Of XPath Axes
Uses Of Preceding And Following Axes
Conclusion

What are XPath Axes in Selenium?

XPath Axes refers to pre-defined XML/HTML navigation techniques which help in finding complicated or dynamic web objects based on the context node, which is known and fixed. When common locator types like id and class cannot be used, then XPath axes come into action and help in navigating across the DOM tree by using hierarchical relations such as parent-child.

Check Out The Perfect Selenium Training Guide Here.

Xpath Axes for Dynamic Xpath in Selenium

Understanding XPath Axes

Let us understand the above-mentioned scenario with the help of an example.

Think about a scenario where two links with “Edit” text are used. In such cases, it becomes pertinent to understand the nodal structure of the HTML.

Please copy-paste the below code into notepad and save it as .htm file.

<!DOCTYPE html>
<html>
<body>
<div class="1" align="left">
<a href="">Edit</a>
<div class="2" align="left">
<a href="">Edit</a>
</div>
</body>
</html>

The UI will look like the below screen:

Problem Statement

Q #1) What to do when even XPath Functions fail to identify the element?

Answer: In such a case, we make use of the XPath Axes along with XPath Functions.

The second part of this article deals with how we can use the hierarchical HTML format to identify the element. We will start by getting a little information on the XPath Axes.

Q #2) What are XPath Axes?

Answer: An XPath axes define the node set relative to the current (context) node. It is used to locate the node that is relative to the node on that tree.

Q #3) What is a Context Node?

Answer: A context node can be defined as the node the XPath processor is currently looking at.

Types of XPath Axes Used in Selenium in Selenium Testing

There are thirteen different axes that are listed below. However, we’re not going to use all of them during Selenium testing.

ancestor: These axes indicate all the ancestors relative to the context node, also reaching up to the root node.
ancestor-or-self: This one indicates the context node and all the ancestors relative to the context node, and includes the root node.
attribute: This indicates the attributes of the context node. It can be represented with the “@” symbol.
child: This indicates the children of the context node.
descendent: This indicates the children, grandchildren, and their children (if any) of the context node. This does NOT indicate the Attribute and Namespace.
descendent-or-self: This indicates the context node and the children, and grandchildren and their children (if any) of the context node. This does NOT indicate the attribute and namespace.
following: This indicates all the nodes that appear after the context node in the HTML DOM structure. This does NOT indicate descendent, attribute, and namespace.
following-sibling: This one indicates all the sibling nodes (same parent as the context node) that appear after the context node in the HTML DOM structure. This does NOT indicate descendent, attribute, and namespace.
namespace: This indicates all the namespace nodes of the context node.
parent: This indicates the parent of the context node.
preceding: This indicates all the nodes that appear before the context node in the HTML DOM structure. This does NOT indicate descendent, attribute, and namespace.
preceding-sibling: This one indicates all the sibling nodes (same parent as the context node) that appear before the context node in the HTML DOM structure. This does NOT indicate descendent, attribute, and namespace.
self: This one indicates the context node.

XPath Axes Cheat Sheet

Axis	Purpose
ancestor	Selects all ancestors of the current node
ancestor-or-self	Selects the node and its ancestors
parent	Selects the immediate parent
child	Selects immediate children
descendant	Selects all descendants
descendant-or-self	Selects node and descendants
following	Selects nodes appearing after current node
following-sibling	Selects sibling nodes after current node
preceding	Selects nodes appearing before current node
preceding-sibling	Selects sibling nodes before current node
self	Selects the current node
attribute	Selects attributes of a node

Structure Of XPath Axes

Consider the below hierarchy for understanding how the XPath Axes work.

Refer below to a simple HTML code for the above example. Please copy-paste the below code into the Notepad editor and save it as a .html file.

<!DOCTYPE html>
<html>
<body>
<div class="Animal" align="center">
<h2>Animal</h2>
	<div class="Vertebrate" align="left" >
		<h3 align="left">Vertebrate</h3>
		<div class="Fish" white-space=:pre>
		<h4 >Fish</h4>
		</div>
		<div class="Mammal">
		<h4>Mammal</h4>
			<div class="Herbivore">
				<h5>Herbivore</h5>
			</div>
			<div class="Carnivore">
				<h5>Carnivore</h5>
					<div class="Lion">
						<h6>Lion</h6>
					</div>
					<div class="Tiger">
						<h6>Tiger</h6>
					</div>
			</div>
		</div>
		<div class="Other">
		<h4>Other</h4>
		</div>
	</div>
	<div class="Invertebrate">
		<h3>Invertebrate</h3>
		<div class="Insect">
		<h4>Insect</h4>
		</div>
		<div class="Crustacean">
		<h4>Crustacean</h4>
		</div>
	</div>
	
</div>
</body>
</html>

The page will look like the one below. Our mission is to make use of the XPath Axes to find the elements uniquely. Let’s try to identify the elements that are marked in the chart above. The context node is “Mammal”

#1) Ancestor

Agenda: To identify the ancestor element from the context node.

XPath#1: //div[@class=’Mammal’]/ancestor::div

The XPath “//div[@class=’Mammal’]/ancestor::div” throws two matching nodes:

Vertebrates, as it is the parent of “Mammal”, hence it is considered the ancestor too.
Animal as it the parent of the parent of “Mammal”, hence it is considered an ancestor.

Now, we only need to identify one element which is the “Animal” class. We can use the XPath as mentioned below.

XPath#2: //div[@class='Mammal']/ancestor::div[@class='Animal']

If you want to reach the text “Animal”, below XPath can be used.

#2) Ancestor-or-self

Agenda: To identify the context node and the ancestor element from the context node.

XPath#1: //div[@class=’Mammal’]/ancestor-or-self::div

The above XPath#1 throws three matching nodes:

Animal(Ancestor)
Vertebrate
Mammal(Self)

#3) Child

Agenda: To identify the child of context node “Mammal”.

XPath#1: //div[@class=’Mammal’]/child::div

XPath#1 helps to identify all the children of context node “Mammal”. If you want to get the specific child element, please use XPath#2.

XPath#2: //div[@class=’Mammal’]/child::div[@class=’Herbivore’]/h5

#4) Descendent

Agenda: To identify the children and grandchildren of the context node (for instance: ‘Animal’).

XPath#1: //div[@class=’Animal’]/descendant::div

As the Animal is the top member of the hierarchy, all the child and descendant elements are highlighted. We can also change the context node for our reference and use any element we want as the node.

#5) Descendant-or-self

Agenda: To find the element itself, and its descendants.

XPath1: //div[@class=’Animal’]/descendant-or-self::div

The only difference between descendent and descendent-or-self is that it highlights itself in addition to highlighting the descendants.

#6) Following

Agenda: To find all the nodes that follow the context node. Here, the context node is the div that contains the Mammal element.

XPath: //div[@class=’Mammal’]/following::div

In the following axes, all the nodes that follow the context node, be it the child or descendant, are getting highlighted.

#7) Following-sibling

Agenda: To find all the nodes after the context node that share the same parent, and are a sibling to the context node.

XPath: //div[@class=’Mammal’]/following-sibling::div

The major difference between the following and following siblings is that the following sibling takes all the sibling nodes after the context but will also share the same parent.

#8) Preceding

Agenda: It takes all the nodes that come before the context node. It may be the parent or the grandparent node.

Here the context node is Invertebrate and highlighted lines in the above image are all the nodes that come before the Invertebrate node.

#9) Preceding-sibling

Agenda: To find the sibling that shares the same parent as the context node, and that comes before the context node.

As the context node is the Invertebrate, the only element that is being highlighted is the Vertebrate as these two are siblings and share the same parent ‘Animal’.

#10) Parent

Agenda: To find the parent element of the context node. If the context node itself is an ancestor, it won’t have a parent node and will fetch no matching nodes.

Context Node#1: Mammal

XPath: //div[@class=’Mammal’]/parent::div

As the context node is Mammal, the element with Vertebrate is getting highlighted as that is the parent of the Mammal.

Context Node#2: Animal

XPath: //div[@class=’Animal’]/parent::div

As the animal node itself is the ancestor, it won’t highlight any nodes, and hence No Matching nodes were found.

#11) Self

Agenda: To find the context node, the self is used.

Context Node: Mammal

XPath: //div[@class=’Mammal’]/self::div

As we can see above, the Mammal object has been identified uniquely. We can also select the text “Mammal by using the below XPath.

XPath: //div[@class=’Mammal’]/self::div/h4

Uses Of Preceding And Following Axes

Suppose you know that your target element is how many tags are ahead or back from the context node, you can directly highlight that element and not all the elements.

Example: Preceding (with index)

Let’s assume our context node is “Other” and we want to reach the element “Mammal”, we would use the below approach to do so.

First Step: Simply use the preceding without giving any index value.

XPath: //div[@class=’Other’]/preceding::div

use preceding without giving any index value

This gives us 6 matching nodes, and we want only one targeted node “Mammal”.

Second Step: Give the index value[5] to the div element(by counting upwards from the context node).

XPath: //div[@class=’Other’]/preceding::div[5]

In this way, the “Mammal” element has been identified successfully.

Example: following (with index)

Let’s assume our context node is “Mammal” and we want to reach the element “Crustacean”, we will use the below approach to do so.

First Step: Simply use the following without giving any index value.

XPath: //div[@class=’Mammal’]/following::div

This gives us 4 matching nodes, and we want only one targeted node “Crustacean”

Second Step: Give the index value[4] to the div element(count ahead from the context node).

XPath: //div[@class=’Other’]/following::div[4]

This way the “Crustacean” element has been identified successfully.

The above scenario can also be re-created with preceding-sibling and following-sibling by applying the above approach.

Which XPath Axis is Most Commonly Used?

Some of the frequently used XPath Axes with Selenium are as follows:
• child – To select direct child nodes.
• parent – To select immediate parent nodes.
• ancestor – To select parent, grandparent nodes, and so forth.
• following-sibling – To select nodes appearing after the current node at the same level of hierarchy.
• preceding-sibling – To select nodes preceding the current node.
From these, following-sibling axis is commonly used to locate form controls and dynamically generated elements.

What is the Difference Between following and following-sibling in XPath?

This particular axis will pick up all those elements which occur after the present element in any position within the entire document.
Example:
//label[text()=’Username’]/following::input
The following-sibling axis picks up sibling elements that come after the present element and are also in the same parent element.
Example:
//label[text()=’Username’]/following-sibling::input
If the element you wish to locate is found on the same level as the current element, then use following-sibling; otherwise, use following.

What is ancestor in XPath?

The ancestor axis returns all the parent nodes of the selected node that include the grandparents, great-grandparents, and even further up ancestors till reaching the root node.
Example:
//input[@id=”email”]/ancestor::form
In this XPath, we have located the parent form tag of the email input tag. The ancestor axis can come in handy when you want to locate containers or parents for any given tag/node.

Are XPath Axes Better Than CSS Selectors?

Parent & Ancestor Navigation: XPath Axes allow you to travel backward up the DOM tree to select parent or ancestor elements (Yes), whereas CSS Selectors cannot navigate upward (No).
Sibling & Complex Navigation: XPath Axes offer Excellent, Advanced flexibility for traversing complex, multi-directional element relationships, while CSS Selectors are Much More Limited to straightforward, downward matching.
Speed: XPath Axes are generally Slower due to the complexity of the engine search, whereas CSS Selectors are natively optimized by browsers and are Generally Faster.
In short, XPath Axes are better for complicated DOM navigation, while CSS Selectors are better for simplicity and speed.

Which XPath Axes Are Useful for Dynamic Elements?

Dynamic web applications constantly produce IDs and attributes, making XPath Axes valuable for creating stable locators.

Some of the most important XPath Axes in dealing with dynamic elements are:
•  ancestor – Search for a stable parent container.
•  descendant – Search for nested elements inside an area.
•  following-sibling – Determine input elements associated with label elements.
•  preceding-sibling – Locate elements that come before another one.
•  parent – Access parent element directly from its child element.
•  child – Get all the direct children of the specified element.
XPath Axis example:
//label[text()=’Password’]/following-sibling::input
Using XPath axes is very efficient for locating dynamic elements despite their ID being modified every time.

Conclusion

Object Identification is the most crucial step in the automation of any website. If you can acquire the skill to learn the object accurately, 50% of your automation is done. While there are locators available to identify the element, there are some instances where even the locators fail to identify the object. In such cases, we must apply different approaches.

Here we have used XPath Functions and XPath Axes to uniquely identify the element.

We conclude this article by jotting down a few points to remember:

You shouldn’t apply “ancestor” axes on the context node if the context node itself is the ancestor.
You shouldn’t apply “parent” axes on the context node of the context node itself as the ancestor.
You shouldn’t apply “child” axes on the context node of the context node itself as the descendant.
You shouldn’t apply “descendant” axes on the context node of the context node itself as the ancestor.
You shouldn’t apply “following” axes on the context node it’s the last node in the HTML document structure.
You shouldn’t apply “preceding” axes on the context node it’s the first node in the HTML document structure.

Happy Learning!!!

=> Visit Here For The Exclusive Selenium Training Tutorial Series.

Was this helpful?

Thanks for your feedback!