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

Practice - 5 Tasks

1fill in blank

easy

Complete the code to locate the parent element of a given child element using XPath.

Selenium Java

WebElement parent = driver.findElement(By.xpath("//div[@id='child'][1]"));

Drag options to blanks, or click blank then click option'

A/parent::*

B/parent::div

C/ancestor::div

D/child::div

Attempts:

3 left

💡 Hint

Common Mistakes

Using child axis instead of parent axis

Using ancestor axis which selects all ancestors, not just the parent

The parent::* axis selects the parent node of the current node, regardless of its tag name.

2fill in blank

medium

Complete the code to find the following sibling element of a specific element using XPath.

Selenium Java

WebElement sibling = driver.findElement(By.xpath("//li[@class='item'][1]"));

Drag options to blanks, or click blank then click option'

A/preceding-sibling::li[1]

B/following-sibling::li[1]

C/child::li[1]

D/parent::li

Attempts:

3 left

💡 Hint

Common Mistakes

Using preceding-sibling instead of following-sibling

Using child axis which selects children, not siblings

The following-sibling::li[1] axis selects the immediate next sibling <li> element after the current node.

3fill in blank

hard

Fix the error in the XPath to select the preceding sibling div element.

Selenium Java

WebElement prevSibling = driver.findElement(By.xpath("//span[@id='current'][1]"));

Drag options to blanks, or click blank then click option'

A/ancestor::div

B/following-sibling::div[1]

C/preceding-sibling::div[1]

D/parent::div

Attempts:

3 left

💡 Hint

Common Mistakes

Using following-sibling instead of preceding-sibling

Using parent or ancestor axis which select ancestors, not siblings

The preceding-sibling::div[1] axis selects the immediate previous sibling <div> element before the current node.

4fill in blank

hard

Fill both blanks to select the parent div and then its following sibling span element.

Selenium Java

WebElement element = driver.findElement(By.xpath("//p[1][2]"));

Drag options to blanks, or click blank then click option'

A/parent::div

B/following-sibling::span

C/preceding-sibling::span

D/child::span

Attempts:

3 left

💡 Hint

Common Mistakes

Using preceding-sibling instead of following-sibling

Using child axis which selects children, not siblings

First, parent::div selects the parent <div> of the <p> element, then following-sibling::span selects the next sibling <span> of that parent.

5fill in blank

hard

Fill all three blanks to select a div element that is the parent of a span, and then select its preceding sibling li element.

Selenium Java

WebElement element = driver.findElement(By.xpath("//span[1][2][3]"));

Drag options to blanks, or click blank then click option'

A/parent::div

B/preceding-sibling::li

C/following-sibling::li

D/child::li

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up following-sibling and preceding-sibling

Using child axis too early

First, parent::div selects the parent <div> of the <span>. Then preceding-sibling::li selects the previous sibling <li> of that div.

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