Mastering XPath preceding-sibling: A Beginner’s Guide

XPath is a powerful tool for locating web and XML elements. It relies on different XPath axes to define how nodes relate to each other in a structured document.

Here, you’ll learn the basics of the preceding-sibling, compare them with their counterparts, and learn how to use them in real code with Selenium.

By the end of this article, you’ll know how to avoid common mistakes and find XPath axes with confidence.

Understanding the preceding-sibling Axis in XPath

When you use the preceding-sibling axis, you’re telling XPath to look at nodes that come before the current one in the same hierarchy. Simply put, it finds a sibling element in code that you’ve already passed through.

To make it even clearer, here’s a practical example that shows how this entire process works:

• Let’s say you need to find the preceding-sibling in this HTML list:

<ul>
  <li>Item 1</li>
  <li id="current">Item 2</li>
  <li>Item 3</li>
</ul>

2. Currently, you’re at the 'Item 2'. To select 'Item 1' and locate the previous element, you need to use the preceding-sibling syntax (preceding‑sibling::tagname) and put it like this:

//li[@id='current']/preceding‑sibling::li

This example demonstrates a basic XPath expression using the preceding-sibling axis to locate a particular element.

preceding-sibling vs following-sibling

• Use preceding-sibling when you need nodes before the current one.
• Use following-sibling when you need nodes after the current one.
• Useful when traversing elements in lists, tables, or forms.

Both axes are part of XPath, which define the relationship between nodes. The preceding axis and following-sibling both belong to the same family.

XPath Examples with Selenium

Here’s how you use it in Selenium to interact with input elements and labels in a form:

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://example.com/form")

label_elem = driver.find_element(By.XPATH, "//input[@name='email']/preceding-sibling::label")
print(label_elem.text)

Step-by-Step Breakdown

Here’s what’s happening in the code snippet above:

• Launching WebDriver. You create a Chrome browser instance using Selenium.
• Opening the target page. The get() method loads the form page.
• Finding the label. The XPath expression starts at the input with name='email'. It uses the preceding-sibling axis to move one step back to the <label> element.

This works well when preceding-sibling elements follow a consistent structure in your XML document or HTML page.

Relative XPath Example

//input[@name='email']/preceding-sibling::label

This is specific and looks directly before the email input for a <label>. It’s useful when the label is a preceding element.

Dynamic XPath Example

//input[contains(@id, 'user')]/preceding-sibling::label

This XPath expression handles dynamic nodes whose IDs change or vary slightly. contains(@id, 'user') matches anything with 'user' in its ID. The preceding-sibling axis works the same way, but now adapts to changing content.

When XPath uses these approaches, you’re locating web elements more reliably, especially when working with large or shifting pages.

Both approaches are great examples of how XPath axes help in traversing elements to find a particular element, no matter how deep it may be buried.

Common Errors With preceding-sibling

• Not understanding DOM order. Preceding in code means earlier in HTML, not necessarily above on the page.
• Confusing tag names or node types. Be sure your elements match the correct names.
• Using incorrect axes for the desired node. Utilizing preceding-sibling when you should be using following-sibling.

Mistakes happen when navigating XML documents or HTML. If you try to use the preceding axis on the first child, it won’t work. Similarly, XPath axes like the preceding axis (preceding::) will return any prior nodes, not just siblings.

Conclusion

Now you know how to define preceding-sibling axis and write an XPath expression to locate an element’s siblings in an XML document or HTML. You also understand how preceding-sibling and following-sibling differ, and how different XPath axes are used depending on the direction and relationship you're navigating.

While you may not be able to build complex XPath expressions with these tips, you will surely be able to write a code that traverses your XML document or HTML more effectively.

For more advanced examples and web scraping tools like Puppeteer, check out our article on Puppeteer Sharp and XPath .

FAQ