XPath Tools

Utilities to validate, improve, and convert XPath expressions, plus recommended browser extensions.

Online Tools

XPath Validator

Check your XPath syntax and get robustness feedback.

CSS to XPath Converter

Convert CSS selectors to XPath equivalents.

Note: This conversion is not always exact. Some CSS features don't have direct XPath equivalents. Always verify the result.

Quick Examples

Conversion Notes

  • • #id → [@id='id']
  • • .class → [contains(@class, 'class')]
  • • [attr=val] → [@attr='val']
  • • :first-child → [position()=1]
  • • :last-child → [position()=last()]
  • • parent > child → parent/child
  • • ancestor descendant → ancestor//descendant

Robustness Improver

Analyze your XPath and get suggestions to make it more resilient.

Common Improvement Patterns

Position index [n]

Before://div[3]/button
After://div[@data-testid="card-3"]//button

Position breaks when elements are added/removed

Absolute path

Before:/html/body/div/form/button
After://form[@id="login"]//button[@type="submit"]

Absolute paths break with any DOM change

Generated class

Before://div[@class="css-1a2b3c"]
After://div[@data-testid="container"]

Generated classes change between builds

Recommended Browser Extensions

ChroPath

Chrome / Firefox

Generate and verify XPath/CSS selectors directly in DevTools. Includes relative XPath generation.

Pros

  • + Free
  • + Integrated in DevTools
  • + Multiple selector types
  • + Copy to clipboard

Cons

  • - Can be slow on complex pages
  • - Suggestions not always optimal
Get extension

SelectorsHub

Chrome / Firefox / Edge

Advanced selector tool with XPath, CSS, and shadow DOM support. Includes selector playground.

Pros

  • + Shadow DOM support
  • + iFrame navigation
  • + Selector suggestions
  • + Active development

Cons

  • - Some features require premium
  • - Can be resource-heavy
Get extension

XPath Helper

Chrome

Simple tool to evaluate XPath expressions and highlight results on the page.

Pros

  • + Lightweight
  • + Easy to use
  • + Quick results

Cons

  • - Basic features only
  • - No selector generation
  • - Less maintained
Get extension

Built-in Browser Tools

Chrome DevTools

  1. 1 Open DevTools (F12 or Ctrl+Shift+I)
  2. 2 Go to Elements tab
  3. 3 Press Ctrl+F (Cmd+F on Mac)
  4. 4 Type your XPath and press Enter
  5. 5 Matching elements will be highlighted

Tip: You can also use $x("//xpath") in the Console tab to evaluate XPath and see results as an array.

Firefox DevTools

  1. 1 Open DevTools (F12 or Ctrl+Shift+I)
  2. 2 Go to Inspector tab
  3. 3 Press Ctrl+F (Cmd+F on Mac)
  4. 4 Type your XPath and press Enter

Tip: Firefox also supports $x() in the Console for XPath evaluation.

DevTools Console Commands

Use these commands in your browser's Developer Tools Console to test XPath expressions:

$x("//button[@type='submit']")

Returns array of matching elements

$x("//button[@type='submit']")[0]

Returns first matching element

$x("//button[@type='submit']").length

Returns count of matching elements

$x("//input[@name]/@name")

Returns attribute values