XPath Axes in Selenium


XPath axes are methods to identify those dynamic elements which are not possible to find by normal XPath method such as ID, Classname, Name, etc. Axes are so named because they tell about the axis on which elements are lying relative to an element.

Dynamic web elements are those elements on the webpage whose attributes dynamically change on refresh or any other operations.

The commonly useful XPath axes methods used in Selenium WebDriver are child, parent, ancestor, sibling, preceding, self, namespace, attribute, etc. XPath axes help to find elements based on the element's relationship with another element in a XML document.

XML documents contain one or more element nodes. They are considered as trees of nodes. If an element contains content, whether it is other elements or text, then it must be declared a start tag and an end tag. The text defined between start tag and end tag is the element content. The topmost element of the tree is called root element. An example of a basic HTML page is shown in below screenshot.

XPath Axes in Selenium

Let's understand some basic XPath terminology before moving XPath axes.
1. Nodes: DOM represents as trees of nodes. The topmost element of the tree is called root node. The example of nodes in the XML document above:
"html" is the root of element node, "title" is a element node. XPath contains seven kinds of nodes: element, attribute, text, namespace, processing-instruction, comment, and document nodes. 

2. Atomic values: The node which has no parents or children is called atomic values. For example, Automation Testing, TestNG, POM.

3. Parents: Each element and attribute has one parent like father or mother. For example, "body" is the parent of div element. "div" is the parent of the table element.


4. Children: Element nodes that may contain zero, one or more children. For example, tr is children of table element, div is the children of body element, table is children of div element.

5. Siblings: The node that has the same parent is called siblings. In the above XML document, title and body elements both are siblings.

XPath Axes Methods


To navigate the hierarchical tree of nodes in an XML document, XPath uses the concept of axes. The XPath specification defines a total of 13 different axes that we will learn in this section. Each axis contains various nodes that depend on the current node. An XPath axis is a collection of nodes that satisfy the current navigation criteria.

1. Child Axis: The child axis is one of the 13 XPath axes that contains all the child nodes of the current context. It selects all children elements of the current node. The syntax of child axis is given below:
Syntax:
      //child::tagName
For example: Open webpage https://www.yandex.com, right-click on Yandex.in and go to inspect option as shown in below screenshot.

XPath child

Let's select all children elements of the current node as shown in the above screen. First, we will find XPath of the current node.
  XPath of current node: //span[@class = 'worldwide__list']

Now we will find out XPath of children elements of current node using child axis as shown in above figure.
    XPath of all children elements: //span[@class = 'worldwide__list']//child::a (1 of 6 matched).
This expression identified six children nodes using the child axis. We can get the XPath of different children elements according to the requirement by putting [1],[2]…………and so on. 
  XPath(Russia): //span[@class = 'worldwide__list']//child::a[1]  (1 of 1 matched).
  XPath(Ukraine): //span[@class = 'worldwide__list']//child::a[2] (1 of 1 matched).
  XPath(Belarus): //span[@class = 'worldwide__list']//child::a[3] and so on.

2. Parent Axis: The parent axis selects the parent of the current node. The parent node may be either root node or element node. The root node has no parent. Therefore, when the current node is root node, the parent axis is empty. For all other element nodes, the parent axis contains a maximum of one node. The syntax of parents axis is given below:
Syntax:
    //parent::tagName

Let's take an example. Open website yandex.com and right-click on the search box. Now we will find the parent of the current node. Let's choose a search input box as a current node. So, we will first find XPath of current node (Search box).
    XPath(Current node): //input[@id = 'text'] (1 of 1 matched).

Now we will find the XPath of the parent element node of current node using parent syntax as shown in below screenshot.
XPath parent
   XPath(Parent node): //input[@id = 'text']//parent::span (1 of 1 matched). It will select the parent node of the input tag of Id = 'text'.
   XPath(Parent node): //input[@id = 'text']//parent::* (1 of 1 matched).

3. Self Axis: It selects element of the current node. It always finds only one node that represents self-element.
Syntax:
     //self::tagName
For example, we can find XPath of the current element node using self axis in the above screenshot.
  XPath(Current node): //input[@id='text']//self::input (1 of 1 matched).
  or XPath(Current node): //input[@id='text']//self::*

4. Ancestor Axis: The ancestor axis selects all ancestors element (parent, grandparent, great-grandparents, etc.) of the current node. This axis always contains the root node (unless the current node is the root node).

Syntax:
       //ancestor::tagName


Let's take an example to understand the concept of ancestor axis. Open www.facebook.com, right-click on the login button and go to inspect option. Now you will see HTML code of login button as shown in below screenshot.


XPath ancestor
Let us consider the login button as current node. First, find the XPath of current node.
      XPath(Current node): //input[@id = 'u_0_a']
Now we will find of XPath of parent and grandparent of current node.
      XPath(Parent node): //input[@id = 'u_0_a']//ancestor::label
      XPath(Grandparent node): //input[@id = 'u_0_a']//ancestor::td
In both cases, 1 of 1 node is matched by using "ancestor" axis.

5. Ancestor-or-self Axis: This axis selects all ancestors element (parent, grandparent, great-grandparents, etc.) of the current node and the current node itself.
Let us find XPath of current node (login button) by using the ancestor-or-self axis.
     XPath(login button): //input[@id='u_0_3']//ancestor-or-self::input
The above expression identified the current element node.

6. Descendant Axis: The descendant axis selects all descendants (children, grandchildren, etc) of the current node. Let's take an example to understand the concept of descendant axis.

Open webpage https://pixabay.com/accounts/register/?source=signup_button_header, right-click on Username element and go to inspect option. As shown in the below screenshot, let's suppose "signup_form new" as a current node. You can bring the cursor to this node to see current node.


XPath descendant
The XPath of current node will be as follow:
       XPath(Current node): //div[@class = 'signup_form new']

Now using the descendant axis with above XPath, we can find easily all children, grandchildren elements, etc of current node. 
      XPath: //div[@class = 'signup_form new']//descendant::input (1 of 3)

The above XPath expression identified three elements like username, password, and email address. So, we can write XPath by putting 1, 2, and 3 in the above expression.
      XPath(Username): //div[@class='signup_form new']//descendant::input[1] (1 of 1 matched).
      XPath(Email address): //div[@class = 'signup_form new']//descendant::input[2]
      XPath(Password): //div[@class = 'signup_form new']//descendant::input[3]

7. Descendant-or-self AxisIt selects all descendants (children, grandchildren, etc) of the current node and current node itself. In the above screenshot, div is the current node. We can select this current node using the descendant-or-self axis.
The XPath of current node is 
      XPath(Current node): //div[@class = 'signup_form new']//descendant-or-self::div

The above expression identified 1 node. If we change tagname in the above XPath expression from div to input then we can get node of username, email address, and password. Let's find XPath of these nodes.
     XPath(Username): //div[@class = 'signup_form new']//descendant-or-self::input[1]
     XPath(Email address): //div[@class = 'signup_form new']//descendant-or-self::input[2].

8. Following Axis: The following axis selects all elements (nodes) in the document after closing tag of the current node. Let's consider "First name" input box as current node in the facebook webpage. The XPath of the current node is 
     XPath(Current node): //input[@id = 'u_0_r']

Now we will find all elements like Surname, Mobile number, etc by using the following axis of the current node. The below syntax will select the immediate node following the current node.
       XPath: //input[@id = 'u_0_r']//following::input (1 of 23)
The above expression has identified 23 nodes matching by using "following" axis-surname, mobile number, new password, etc. If you want to focus on any particular element then you can change the XPath according to the requirement by putting [1],[2]…………and so on like this.
       XPath(Surname): //input[@id = 'u_0_r']//following::input[1] (1 of 1 matched)
With putting "1" as input, the above expression finds the particular node that is 'Surname' input box element.
Similarly, on putting "2" as input,
      XPath(Mobile number): //input[@id = 'u_0_r']//following::input[2] (1 of 1 matched).

9. Following-sibling Axis: The following-sibling selects all sibling nodes after the current node at the same level. i.e. It will find the element after the current node. For example, the radio button of female and female text both are siblings in the Facebook home page as shown in the below screenshot.


XPath following-sibling

So, we will find XPath of current node i.e. XPath of the female radio button.
      XPath(Radio button): //input[@id = 'u_0_5']

Using the following-sibling axis, we can easily find XPath of text "Female" at the same level.
  XPath(Female): //input[@id='u_0_5']//following-sibling::label (1 of 1 matched).
The above expression identified one input nodes by using "following-sibling" axis.

10. Preceding Axis: The preceding axis selects all nodes that come before the current node in the document, except ancestor, attribute nodes, and namespace nodes. Let us consider the login button as current node on the facebook web page as shown in below screenshot.
XPath preceding
Let's first, find the XPath of current node i.e XPath of login button.
        XPath(Current node): //input[@id = 'u_0_2']
Now we will select all nodes by using the preceding axis in the document that comes before the current node.
        XPath: //input[@id = 'u_0_2']//preceding::input (1 of 4 matched).

The above expression identified all the input elements before "login" button using the preceding axis. 2 of 4 matches nodes are matched with Email and Password input element. 
If you want to focus on any particular element like "Email" or "Password" then you can change the XPath according to the requirement by putting [1],[2]…………and so on. For example:
         XPath(Email): //input[@id = 'u_0_2']//preceding::input[2] (1 of 1)
        XPath(Password): //input[@id = 'u_0_2']//preceding::input[1]

11. Preceding-sibling Axis: The preceding-sibling axis selects all siblings before the current node. Let's take an example to understand the concept of the preceding-sibling axis.
Open web page www.pixabay.com, right-click on videos link and go to inspect option. Let's consider videos link as current node as shown in below screenshot and find the XPath of current node by using text() method.
XPath preceding-sibling
      XPath(Current node): //a[text() = 'Videos']
Now we will find all nodes using preceding-sibling axis of the current node in the document.
     XPath: //a[text() = 'Videos']//preceding-sibling::a (1 of 3)

The above expression identified three nodes before the current node (videos link) as shown in above screenshot. Using this expression, we can easily find XPath of preceding-sibling elements like Photos, Illustrations, and Vectors like this:
   XPath(Photos): //a[text() = 'Videos']//preceding-sibling::a[3]
   XPath(Illustrations): //a[text() = 'Videos']//preceding-sibling::a[2]
   XPath(Vectors): //a[text() = 'Videos']//preceding-sibling::a[1]

12. Attribute Axis: 
This axis selects the element node on the basis of the attribute identifier (@) of the current node. If the current node is not an element node, this axis is empty. The expressions attribute::type and @type both are equivalent.
For example:
Open the webpage www.pixabay.com, right-click on the search input box, and go to inspect. We can write XPath of search input box (current node) using the attribute axis.
         XPath(Search box): //input[attribute::name = 'q']

13. Namespace Axis: The namespace axis is one of 13 XPath axes that selects all namespace nodes associated with current node. If the current node is not an element node then this axis will be empty.

Final words 
Hope that this tutorial has covered almost all important points related to 13 XPath axes methods with suitable practical examples. I hope that you will have understood and enjoyed this topic and performed in chrome browser. The XPath axes like child, parent, ancestor, following, and preceding are important for the practical test in any company.
Thanks for reading!
Next ➤ Selenium isDisplayed, isEnabled, isSelected Methods ⏪ Prev Next ⏩