XPath axes (parent, following-sibling, preceding) in Selenium Java

Introduction

XPath axes help you find elements related to a known element in a web page. They make locating elements easier when you know their position relative to others.

When you want to find the parent element of a known child element.

When you need to locate a sibling element that comes after the current element.

When you want to find a sibling element that comes before the current element.

Syntax

Selenium Java

xpath_expression/axis_name::node_test

Replace axis_name with parent, following-sibling, or preceding-sibling.

node_test usually specifies the tag name or * for any node.

Examples

Selects the parent div of the element with id 'child'.

Selenium Java

//div[@id='child']/parent::div

Selects all li elements that come after the current li with class 'item' on the same level.

Selenium Java

//li[@class='item']/following-sibling::li

Selects all input elements that come before the span with class 'label' on the same level.

Selenium Java

//span[@class='label']/preceding-sibling::input

Sample Program

This Java Selenium code opens a test page, finds a child element by ID, then uses XPath axes to find its parent, following sibling, and preceding sibling elements. It prints their tag names or IDs.

Selenium Java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class XPathAxesExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        try {
            driver.get("https://example.com/testpage");

            // Find child element
            WebElement child = driver.findElement(By.id("childElement"));

            // Find parent of the child element
            WebElement parent = child.findElement(By.xpath("parent::div"));
            System.out.println("Parent tag name: " + parent.getTagName());

            // Find following sibling of the child element
            WebElement followingSibling = child.findElement(By.xpath("following-sibling::div"));
            System.out.println("Following sibling id: " + followingSibling.getAttribute("id"));

            // Find preceding sibling of the child element
            WebElement precedingSibling = child.findElement(By.xpath("preceding-sibling::div"));
            System.out.println("Preceding sibling id: " + precedingSibling.getAttribute("id"));

        } finally {
            driver.quit();
        }
    }
}

Important Notes

Always ensure the XPath axes match the actual HTML structure to avoid errors.

Using axes can make your locators more flexible and robust when element positions change.

Summary

XPath axes help navigate between related elements in the page.

Common axes are parent, following-sibling, and preceding-sibling.

They improve locating elements when direct attributes are missing.

Practice

1. Which XPath axis selects the immediate parent of the current node?

easy

A. following-sibling::

B. child::

C. preceding::

D. parent::

Solution

1. Step 1: Understand XPath axes purpose

   XPath axes define relationships between nodes, like parent or siblings.

2. Step 2: Identify axis for immediate parent

   The parent:: axis selects the direct parent node of the current element.

3. Final Answer:

   parent:: -> Option D

4. Quick Check:

   Parent axis = parent:: [OK]

Hint: Parent axis always uses 'parent::' prefix [OK]

Common Mistakes:

• Confusing parent:: with child:: axis
• Using following-sibling:: to select parent
• Using preceding:: which selects previous nodes, not parent

2. Which of the following is the correct XPath syntax to select all following siblings of a node?

easy

A. //div/preceding-sibling::*

B. //div/following::sibling

C. //div/following-sibling::*

D. //div/following-sibling

Solution

1. Step 1: Recall correct axis syntax for following siblings

   The axis for following siblings is following-sibling:: and it requires a node test like * for all siblings.

2. Step 2: Check each option syntax

   //div/following-sibling::* uses following-sibling::* which correctly selects all following siblings. Others are incorrect syntax or wrong axis.

3. Final Answer:

   //div/following-sibling::* -> Option C

4. Quick Check:

   Following siblings = following-sibling::* [OK]

Hint: Use 'following-sibling::*' to select all following siblings [OK]

Common Mistakes:

• Omitting '::' after axis name
• Using 'following::sibling' which is invalid
• Confusing preceding-sibling with following-sibling

3. Given the HTML snippet:

<ul>
  <li id='item1'>First</li>
  <li id='item2'>Second</li>
  <li id='item3'>Third</li>
</ul>

What text will this XPath select?
//li[@id='item1']/following-sibling::li[1]/text()

medium

A. Second

B. No text selected

C. Third

D. First

Solution

1. Step 1: Understand the XPath expression

   The XPath selects the first li element with id 'item1', then selects its first following sibling li element, and gets its text.

2. Step 2: Identify the first following sibling of 'item1'

   The first following sibling li after 'item1' is the li with id 'item2' which contains text 'Second'.

3. Final Answer:

   Second -> Option A

4. Quick Check:

   Following sibling of item1 is item2 = Second [OK]

Hint: following-sibling::li[1] selects immediate next sibling [OK]

Common Mistakes:

• Selecting the current node text instead of sibling
• Confusing preceding siblings with following siblings
• Assuming index [1] means first child, not sibling

4. Identify the error in this XPath expression:
//div[@class='menu']/preceding-sibling::div[2]
What is wrong?

medium

A. preceding-sibling axis cannot use index

B. The index should be inside parentheses like (preceding-sibling::div)[2]

C. XPath axes cannot be used after predicates

D. No error, expression is correct

Solution

1. Step 1: Understand XPath indexing with axes

   When using an index with axes like preceding-sibling::div, the index applies to the node set returned by the axis, so parentheses are needed.

2. Step 2: Correct the XPath syntax

   The correct syntax to select the second preceding sibling div is (preceding-sibling::div)[2], not preceding-sibling::div[2].

3. Final Answer:

   The index should be inside parentheses like (preceding-sibling::div)[2] -> Option B

4. Quick Check:

   Index with axes needs parentheses [OK]

Hint: Use parentheses around axis before indexing [OK]

Common Mistakes:

• Placing index directly after node test without parentheses
• Assuming axes do not support indexing
• Confusing predicate indexing with axis indexing

5. You want to select the parent div of a span element that has a class 'highlight', but only if the parent div has a following sibling div with class 'footer'. Which XPath expression correctly achieves this?

hard

A. //span[@class='highlight']/parent::div[following-sibling::div[@class='footer']]

B. //span[@class='highlight']/parent::div/following-sibling::div[@class='footer']

C. //span[@class='highlight']/preceding::div[@class='footer']/parent::div

D. //span[@class='highlight']/parent::div[preceding-sibling::div[@class='footer']]

Solution

1. Step 1: Understand the requirement

   Select the parent div of a span with class 'highlight', but only if that parent div has a following sibling div with class 'footer'.

2. Step 2: Analyze each XPath option

   //span[@class='highlight']/parent::div[following-sibling::div[@class='footer']] selects the parent div of the span and filters it by checking if it has a following sibling div with class 'footer', which matches the requirement exactly.

3. Final Answer:

   //span[@class='highlight']/parent::div[following-sibling::div[@class='footer']] -> Option A

4. Quick Check:

   Parent with following sibling filter = //span[@class='highlight']/parent::div[following-sibling::div[@class='footer']] [OK]

Hint: Filter parent with predicate checking following sibling [OK]

Common Mistakes:

• Selecting following sibling instead of filtering parent
• Using preceding-sibling instead of following-sibling
• Misplacing axes order causing wrong node selection