logo
← All Posts

How to Test XPath Expressions Online (With Examples)

Published on February 10, 2026

What Is XPath?

XPath (XML Path Language) is a query language for selecting nodes from an XML or HTML document. Think of it as a way to navigate through the tree structure of a document and pinpoint exactly the elements you need. Originally designed for XML, XPath is equally powerful when applied to HTML, making it one of the most important tools in a web scraper's toolkit.

Every modern browser supports XPath natively. You can open DevTools in Chrome or Firefox, press Ctrl+F in the Elements panel, and type an XPath expression to highlight matching nodes right on the page. But when you need to iterate quickly on expressions or test them against arbitrary HTML snippets, an online tester is far more convenient.

XPath is used heavily in tools like Selenium, Puppeteer (via third-party libraries), Scrapy, and lxml. Understanding XPath fundamentals will make you significantly more productive when writing scrapers, automated tests, or data pipelines that process HTML.

XPath Syntax Fundamentals

XPath expressions describe a path through the document tree. The two most basic operators are the single slash and double slash:

  • / — selects from the root node. Each slash moves one level down the tree. For example, /html/body/div selects only <div> elements that are direct children of <body>.
  • // — selects nodes anywhere in the document regardless of depth. //div matches every <div> on the page whether it is nested one level or ten levels deep.

Here is a quick reference of the most common XPath syntax elements:

// Expression          | What it selects
// --------------------|---------------------------------------
//h1                   | All <h1> elements
//a/@href              | The href attribute of every <a> tag
//div[@class='card']   | <div> elements with class="card"
//p/text()             | The text content of every <p> tag
//ul/li[1]             | The first <li> inside each <ul>
//ul/li[last()]        | The last <li> inside each <ul>
//img[@alt]            | All <img> tags that have an alt attribute
//*[@id='main']        | Any element with id="main"

Axes

XPath axes let you navigate relative to the current node. They are especially useful for selecting siblings, ancestors, or descendants that do not have convenient class names or IDs:

// Navigate to the parent element
//span[@class='price']/parent::div

// Select all following siblings
//h2[1]/following-sibling::p

// Select all preceding siblings
//h2[3]/preceding-sibling::h2

// Select all descendants (children, grandchildren, etc.)
//div[@id='content']/descendant::a

// Select the element itself and all descendants
//div[@id='content']/descendant-or-self::*

// Select ancestor elements going up the tree
//span[@class='error']/ancestor::form

Predicates

Predicates filter nodes using conditions inside square brackets. You can combine them with functions for powerful queries:

// Select by exact attribute value
//input[@type='email']

// Select by partial attribute value (contains)
//div[contains(@class, 'product')]

// Select by text content
//a[text()='Read more']

// Partial text match
//a[contains(text(), 'Read')]

// Combining conditions with "and"
//input[@type='text' and @name='username']

// Combining conditions with "or"
//input[@type='email' or @type='tel']

// Positional: select second item
//ul[@class='menu']/li[2]

// Negation: items without a class
//div[not(@class)]

Common XPath Expressions for Web Scraping

Let's walk through practical XPath expressions that you will use again and again when scraping websites. Consider this sample HTML:

<html>
<body>
  <div id="products">
    <div class="product-card">
      <h2 class="title">Wireless Mouse</h2>
      <span class="price">$29.99</span>
      <a href="/products/wireless-mouse">View Details</a>
    </div>
    <div class="product-card">
      <h2 class="title">Mechanical Keyboard</h2>
      <span class="price">$89.99</span>
      <a href="/products/mechanical-keyboard">View Details</a>
    </div>
    <div class="product-card sold-out">
      <h2 class="title">USB-C Hub</h2>
      <span class="price">$45.00</span>
      <a href="/products/usb-c-hub">View Details</a>
    </div>
  </div>
</body>
</html>

Here are useful expressions to extract data from this page:

// All product titles
//h2[@class='title']/text()
// Result: "Wireless Mouse", "Mechanical Keyboard", "USB-C Hub"

// All prices
//span[@class='price']/text()
// Result: "$29.99", "$89.99", "$45.00"

// All product links
//div[@class='product-card']/a/@href
// Result: "/products/wireless-mouse", "/products/mechanical-keyboard", "/products/usb-c-hub"

// Only products that are NOT sold out
//div[@class='product-card' and not(contains(@class, 'sold-out'))]/h2/text()
// Result: "Wireless Mouse", "Mechanical Keyboard"

// The second product's price
//div[@class='product-card'][2]/span[@class='price']/text()
// Result: "$89.99"

XPath vs CSS Selectors

Both XPath and CSS selectors can target HTML elements, but they have different strengths. Here is a side-by-side comparison:

// Task                    | CSS Selector           | XPath
// -----------------------|------------------------|--------------------------------
// By ID                  | #main                  | //*[@id='main']
// By class               | .card                  | //*[contains(@class,'card')]
// Direct child           | div > p                | //div/p
// Any descendant         | div p                  | //div//p
// First child            | li:first-child         | //li[1]
// Attribute exists       | [data-id]              | //*[@data-id]
// Attribute value        | [type="email"]         | //*[@type='email']
// Text content           | (not possible)         | //*[text()='Hello']
// Parent selection       | (not possible)         | //span/parent::div
// Preceding sibling      | (not possible)         | //h2/preceding-sibling::p

CSS selectors are often more concise for simple queries and are the default in most JavaScript-based scraping tools. However, XPath excels in three areas where CSS falls short:

  1. Text-based selection — XPath can select elements by their text content. CSS selectors cannot.
  2. Navigating upward — XPath supports parent, ancestor, and preceding-sibling axes. CSS selectors can only traverse downward and to subsequent siblings.
  3. Complex conditions — XPath predicates support boolean logic, positional indexing, string functions, and mathematical comparisons all within a single expression.

For web scraping, the general advice is to use CSS selectors when they are sufficient and switch to XPath when you need text matching, parent traversal, or complex filtering.

Testing XPath in the Browser

You can test XPath directly in your browser's DevTools console using the $x() function:

// In Chrome/Firefox DevTools Console:
$x("//h1")
// Returns an array of all <h1> elements on the page

$x("//a/@href")
// Returns an array of href attribute nodes

$x("//div[contains(@class, 'product')]//span[@class='price']/text()")
// Returns text nodes with the price values

// You can also use document.evaluate() in JavaScript:
const result = document.evaluate(
  "//h2[@class='title']",
  document,
  null,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
  null
);

for (let i = 0; i < result.snapshotLength; i++) {
  console.log(result.snapshotItem(i).textContent);
}

The browser console works well for quick checks, but when you are building XPath expressions for a scraper, you often want to test against custom HTML snippets. That is where a dedicated XPath Tester tool becomes invaluable — paste any HTML, type your expression, and see matched nodes instantly.

XPath Tips for Web Scraping

After years of building scrapers, here are the practical tips that save the most time:

  • Avoid absolute paths. Expressions like /html/body/div[3]/div[2]/ul/li[1]/a are brittle. If the site adds a banner or rearranges divs, your selector breaks. Use attributes and relative paths instead.
  • Prefer data attributes over classes. CSS class names change frequently during redesigns. Data attributes like data-product-id are more stable because they are often tied to application logic.
  • Use contains() for dynamic classes. Many modern frameworks generate class names like card_a1b2c3. Use contains(@class, 'card') to match the stable prefix.
  • Normalize whitespace. The normalize-space() function trims leading and trailing whitespace and collapses internal spaces, which is useful when matching text content.
  • Test incrementally. Start with a broad expression like //div and refine step by step. Add predicates one at a time until you match exactly what you need.
// Using normalize-space to handle inconsistent whitespace
//p[normalize-space(text())='Hello World']

// Using starts-with for dynamic IDs
//div[starts-with(@id, 'product-')]

// Using string-length to find non-empty elements
//p[string-length(normalize-space(text())) > 0]

// Combining multiple functions
//a[contains(@href, '/products/') and string-length(text()) > 0]
Try the XPath Tester

Need to extract data from websites?

PulpMiner turns any webpage into structured JSON data. No scraping code needed — just point, click, and get clean data.

Try PulpMiner Free

No credit card required