XPath axes (parent, child, sibling) in Selenium Python - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to find the parent element using XPath axes.

Selenium Python

parent_element = driver.find_element(By.XPATH, "//div[@id='child'][1]")

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

A/preceding-sibling::div

B/parent::div

C/following-sibling::div

D/child::div

Attempts:

3 left

💡 Hint

Common Mistakes

Using child axis instead of parent axis.

Using sibling axes when parent is needed.

The parent:: axis selects the parent of the current node. Here, /parent::div selects the parent div of the element with id 'child'.

2fill in blank

medium

Complete the code to find all child <li> elements of a <ul> using XPath axes.

Selenium Python

child_items = driver.find_elements(By.XPATH, "//ul[1]")

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

A/ancestor::li

B/parent::li

C/following-sibling::li

D/child::li

Attempts:

3 left

💡 Hint

Common Mistakes

Using parent axis instead of child axis.

Using sibling axes which select siblings, not children.

The child:: axis selects all child nodes of the current node. Here, /child::li selects all li children of the ul element.

3fill in blank

hard

Fix the error in the XPath to select the next sibling <div> element.

Selenium Python

next_sibling = driver.find_element(By.XPATH, "//div[@class='current'][1]")

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

A/following-sibling::div[1]

B/child::div

C/parent::div

D/preceding-sibling::div

Attempts:

3 left

💡 Hint

Common Mistakes

Using parent or child axes instead of sibling axes.

Not specifying the index to get the immediate sibling.

The following-sibling:: axis selects siblings after the current node. Adding [1] selects the immediate next sibling div.

4fill in blank

hard

Fill both blanks to select all sibling <span> elements before and after the current <div>.

Selenium Python

siblings = driver.find_elements(By.XPATH, "//div[@id='main'][1] | //div[@id='main'][2]")

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

A/preceding-sibling::span

B/child::span

C/following-sibling::span

D/parent::span

Attempts:

3 left

💡 Hint

Common Mistakes

Using child or parent axes instead of sibling axes.

Not combining the two XPath expressions correctly.

The preceding-sibling:: axis selects all siblings before the current node, and following-sibling:: selects all siblings after. Using both with | combines the results.

5fill in blank

hard

Fill all three blanks to create a dictionary mapping each <li> text to its parent's id and the next sibling's text.

Selenium Python

result = {item.text: {'parent_id': item.find_element(By.XPATH, '[1]').get_attribute('id'), 'next_sibling_text': item.find_element(By.XPATH, '[2]').text} for item in driver.find_elements(By.XPATH, '//li') if item.find_elements(By.XPATH, '[3]')}

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

A/parent::*

B/following-sibling::*[1]

C/child::*

D/preceding-sibling::*

Attempts:

3 left

💡 Hint

Common Mistakes

Using child axis instead of parent for getting parent id.

Not specifying the immediate next sibling with [1].

Using preceding-sibling instead of following-sibling for next sibling.

/parent::* selects the parent element to get its id attribute. /following-sibling::*[1] selects the immediate next sibling element to get its text. The last blank uses the same to check if the next sibling exists.

Practice

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

easy

A. child::

B. parent::

C. following-sibling::

D. preceding-sibling::

Solution

1. Step 1: Understand XPath axes

   XPath axes describe relationships between nodes, such as parent, child, or siblings.

2. Step 2: Identify the axis for parent node

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

3. Final Answer:

   parent:: -> Option B

4. Quick Check:

   Parent axis = parent:: [OK]

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

Common Mistakes:

• Confusing parent:: with child::
• Using sibling axes to find parent
• Forgetting axes syntax with double colons

2. Which of the following is the correct XPath syntax to select all child <li> elements of a <ul> element?

easy

A. //ul/parent::li

B. //ul/preceding-sibling::li

C. //ul/following-sibling::li

D. //ul/child::li

Solution

1. Step 1: Understand child axis usage

   The child:: axis selects direct children of the current node.

2. Step 2: Apply correct syntax for child li elements

   Using //ul/child::li selects all li children of ul.

3. Final Answer:

   //ul/child::li -> Option D

4. Quick Check:

   Child axis syntax = child:: [OK]

Hint: Use 'child::' to select direct children nodes [OK]

Common Mistakes:

• Using parent:: instead of child::
• Using sibling axes for children
• Omitting the axis and expecting child selection

3. Given the following HTML snippet:

<div>
  <h2>Title</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</div>

What does the XPath //h2/following-sibling::p[1] select?

medium

A. No element, XPath is invalid

B. The second p element inside the div

C. The first p element inside the div

D. The h2 element itself

Solution

1. Step 1: Understand following-sibling axis

   The following-sibling::p[1] selects the first p sibling after the h2 node.

2. Step 2: Apply to given HTML

   After h2, the first p is "Paragraph 1", so it selects that element.

3. Final Answer:

   The first <p> element inside the <div> -> Option C

4. Quick Check:

   following-sibling::p[1] = first p after h2 [OK]

Hint: following-sibling::p[1] picks first p after current node [OK]

Common Mistakes:

• Selecting the second p instead of the first
• Confusing preceding-sibling with following-sibling
• Thinking it selects children instead of siblings

4. You wrote this XPath to select the previous sibling of a div element:
//div/preceding-sibling::div[1]
But it returns no elements. What is the most likely reason?

medium

A. The div has no preceding sibling div elements

B. The syntax is incorrect; axes cannot be used with //

C. You should use parent::div instead

D. preceding-sibling axis selects children, not siblings

Solution

1. Step 1: Understand preceding-sibling axis

   The preceding-sibling::div[1] selects the immediate previous sibling div element.

2. Step 2: Reason why no elements returned

   If no elements are returned, it means the current div has no preceding sibling div.

3. Final Answer:

   The <div> has no preceding sibling <div> elements -> Option A

4. Quick Check:

   preceding-sibling returns nothing if no previous siblings [OK]

Hint: No preceding sibling means empty result, not syntax error [OK]

Common Mistakes:

• Thinking axes can't be used with //
• Confusing parent:: with preceding-sibling::
• Assuming preceding-sibling selects children

5. You want to select all span elements that are children of a div whose immediate parent is a section. Which XPath expression correctly uses axes to achieve this?

hard

A. //section/child::div/child::span

B. //div/parent::section/child::span

C. //section/parent::div/child::span

D. //span/parent::div/parent::section

Solution

1. Step 1: Understand the hierarchy

   The span elements are children of div, and that div is a child of section.

2. Step 2: Build XPath with axes

   //section/child::div/child::span selects span children of div children of section.

3. Step 3: Check other options

   //div/parent::section/child::span selects span children of section, which is incorrect. //section/parent::div/child::span and D misuse axes or order.

4. Final Answer:

   //section/child::div/child::span -> Option A

5. Quick Check:

   Use child axes from section to div to span [OK]

Hint: Chain child:: axes from parent to target child [OK]

Common Mistakes:

• Using parent:: in wrong direction
• Selecting wrong node levels
• Mixing sibling axes instead of child axes