XPath Online · Free playground

XPath Online Tester & Evaluator

Test and validate XPath expressions for HTML and XML documents in real-time. Generate Selenium, Playwright, and Python code automatically while you iterate on locators.

Selenium Guide Cheat Sheet Examples

Selenium XPath XPath Cheat Sheet Web Scraping Chrome DevTools vs CSS Selector

XPath expression

Validation failedEngineDocumentDebounced 200ms

Unable to format document.

Input document

Paste HTML or XML. Validation happens locally.

HTML mode

<html>
  <body>
    <header>
      <nav class="navbar">
        <a id="logo" href="/">jsonpath.online</a>
        <ul class="menu">
          <li class="menu-item active"><a href="/login">Login</a></li>
          <li class="menu-item"><a href="/signup">Sign Up</a></li>
          <li class="menu-item"><a href="/docs">Docs</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="hero" class="container">
        <h1>XPath playground</h1>
        <p class="tagline">Test XPath expressions for Selenium and scraping.</p>
        <button type="button" class="btn primary" data-test-id="cta">Try XPath</button>
      </section>
      <section id="form">
        <form>
          <label for="email">Email</label>
          <input id="email" name="email" type="email" placeholder="Email" />
          <label for="password">Password</label>
          <input id="password" name="password" type="password" />
          <button type="submit" class="btn submit-btn">Login</button>
          <p class="error hidden">Invalid credentials</p>
        </form>
      </section>
      <section id="features">
        <ul class="cards">
          <li class="card" data-id="card-1"><span>Live validation</span></li>
          <li class="card" data-id="card-2"><span>Code generation</span></li>
          <li class="card" data-id="card-3"><span>Cheat sheet</span></li>
        </ul>
      </section>
      <section id="table">
        <table class="stats">
          <tr><th>Name</th><th>Role</th><th>Active</th></tr>
          <tr><td>Alice</td><td>QA</td><td>true</td></tr>
          <tr><td>Bob</td><td>QA</td><td>false</td></tr>
          <tr><td>Carol</td><td>Dev</td><td>true</td></tr>
        </table>
      </section>
    </main>
    <footer>
      <p>© 2025 XPath Online</p>
      <a class="link" href="/privacy">Privacy</a>
    </footer>
  </body>
</html>

Results

Hover a result to highlight it in the document preview.

Highlight in Document

No elements matched. Try adjusting your XPath.

Document preview

Lines matching results are shaded.

Read-only

001<html>
002  <body>
003    <header>
004      <nav class="navbar">
005        <a id="logo" href="/">jsonpath.online</a>
006        <ul class="menu">
007          <li class="menu-item active"><a href="/login">Login</a></li>
008          <li class="menu-item"><a href="/signup">Sign Up</a></li>
009          <li class="menu-item"><a href="/docs">Docs</a></li>
010        </ul>
011      </nav>
012    </header>
013    <main>
014      <section id="hero" class="container">
015        <h1>XPath playground</h1>
016        <p class="tagline">Test XPath expressions for Selenium and scraping.</p>
017        <button type="button" class="btn primary" data-test-id="cta">Try XPath</button>
018      </section>
019      <section id="form">
020        <form>
021          <label for="email">Email</label>
022          <input id="email" name="email" type="email" placeholder="Email" />
023          <label for="password">Password</label>
024          <input id="password" name="password" type="password" />
025          <button type="submit" class="btn submit-btn">Login</button>
026          <p class="error hidden">Invalid credentials</p>
027        </form>
028      </section>
029      <section id="features">
030        <ul class="cards">
031          <li class="card" data-id="card-1"><span>Live validation</span></li>
032          <li class="card" data-id="card-2"><span>Code generation</span></li>
033          <li class="card" data-id="card-3"><span>Cheat sheet</span></li>
034        </ul>
035      </section>
036      <section id="table">
037        <table class="stats">
038          <tr><th>Name</th><th>Role</th><th>Active</th></tr>
039          <tr><td>Alice</td><td>QA</td><td>true</td></tr>
040          <tr><td>Bob</td><td>QA</td><td>false</td></tr>
041          <tr><td>Carol</td><td>Dev</td><td>true</td></tr>
042        </table>
043      </section>
044    </main>
045    <footer>
046      <p>© 2025 XPath Online</p>
047      <a class="link" href="/privacy">Privacy</a>
048    </footer>
049  </body>
050</html>

Code Generator

Add error handling

# pip install selenium
from selenium import webdriver
from selenium.webdriver.common.by import By

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

xpath = "//button[@type='submit']"
elements = driver.find_elements(By.XPATH, xpath)

for el in elements:
    print(el.text, el.get_attribute("outerHTML"))

driver.quit()

Quick Examples

Click to load XPath and HTML instantly.

Basic Selection

6 patterns

Attributes

8 patterns

Text Selection

6 patterns

Axes

10 patterns

Functions

12 patterns

Selenium Common Patterns

15 patterns

Example library preview

The XPath examples page contains 60+ scenarios. Here are a few highlights:

Basic Selection

//div

Selects every div element.

Preview: <div class="container">…</div>

Basic Selection

//div/p

Only paragraphs that are direct children of div.

Preview: <p>First paragraph</p>

Basic Selection

//div//p

Paragraphs under div at any depth.

Preview: <p>Second paragraph</p>

Basic Selection

/html/body/div[1]

The first div in the body.

Preview: <div id="one"></div>

Basic Selection

//div[@id='main']

Matches a div whose id is main.

Preview: <div id="main"></div>

Basic Selection

//div[@class='item']

Class equals item (not contains).

Preview: <div class="item"></div>

What is XPath?

XPath (XML Path Language) is a query language for selecting nodes from HTML and XML documents. Introduced in 1999 as part of the XSLT standard, it remains the fastest way to pinpoint elements for Selenium automation, browser testing, and web scraping. Unlike CSS selectors, XPath can navigate up and down the DOM tree (parent, ancestor, sibling), target text nodes, and use 100+ built-in functions to filter results.

Common use cases include Selenium WebDriver locators, Playwright selectors, extracting structured data from web pages, and parsing XML feeds or config files. Chrome DevTools exposes a lightweight evaluator via $x(), but it lacks validation, highlighting, and code generation. This playground fills those gaps: paste HTML, type an expression, see matches instantly, and copy ready-to-run code.

Real-time validation

Evaluate XPath 1.0/2.0 with debounced live feedback, match counts, and inline errors.

Code generation

Copy-ready snippets for Selenium, Playwright, lxml, and vanilla JavaScript with optional error handling.

Bidirectional navigation

Test parent, ancestor, sibling, and descendant axes that CSS selectors cannot express.

100+ functions

contains(), starts-with(), position(), normalize-space(), translate(), and more—all with examples.

🤖 Selenium Automation

Write reliable XPath locators for Selenium and Playwright

Validate selectors before adding them to your test suite. Copy snippets for Python, Java, C#, and JavaScript with a single click, and use the cheat sheet to avoid brittle locators.

Learn More →

Why testers love this

Debounced execution to see results without rerunning your test suite.
Hover to highlight matched nodes in your HTML source.
Pre-built Selenium patterns for buttons, dynamic IDs, forms, and tables.
Code generator with toggles for error handling and multi-element support.

Cross-linking hub

Interactive tutorial →Functions reference →Axes deep dive →XPath vs CSS selector →

Testing APIs? Try our JSONPath tool. Working with AWS? Explore the JMESPath suite.

XPath syntax at a glance

Predicates & operators

[condition] — filter nodes, e.g., //div[@id='hero']
[n] — pick an index, e.g., //ul/li[1]
| — union selectors, e.g., //h1 | //h2
and / or / not() — combine predicates for resilient locators.
=, !=, <, >, <=, >= — numeric and string comparisons.

Common functions

contains(@class, 'btn') — match partial class names.
starts-with(@id, 'user-') — dynamic IDs and data-test attributes.
text() + normalize-space() — target buttons by visible label.
position(), last() — select first/last items safely.
count() — assert node counts to strengthen selectors.

FAQ

▶Can I test Selenium XPath selectors here?

Yes. Paste any HTML snippet, enter your XPath, and the playground will highlight matches and generate Selenium-ready code for Python, Java, C#, and JavaScript.

▶Do you support XML as well as HTML?

The editor supports both HTML and XML modes. Use the dropdown to switch parsing mode and run XPath 1.0 or experimental 2.0 evaluation fully in the browser.

▶Is my HTML uploaded to a server?

No. Everything runs locally in your browser. We do not persist or send your HTML, XML, or XPath expressions anywhere.

▶How is this different from Chrome DevTools $x()?

You get formatted results, element paths, code generation, a cheatsheet, and an examples library—no need to open DevTools or run your test suite each time.