XPath & CSS Selector Tester

XPath & CSS Selector Tester - Test Selectors and XPath Online

Selectors are the addressing system of the web: every browser inspector, every web scraper (BeautifulSoup, Scrapy, Cheerio, Playwright, Selenium), every end-to-end test framework, every CSS rule and every jQuery query ultimately resolves down to either an XPath expression or a CSS selector against a parsed DOM tree. Writing a selector that matches exactly the nodes you want — no more, no fewer — is harder than it looks: HTML in the wild is messy, classes and IDs change between builds, and the same logical 'element' can be reached by a dozen different paths of varying robustness. This tester closes the feedback loop: paste the actual HTML you're targeting (from your browser's 'View Source', a fetch response, or any document), type or refine your selector, and see instantly how many elements match plus the exact rendered HTML of every match. Switch between XPath 1.0 (the W3C standard supported by every browser via document.evaluate and every scraping library) and CSS Level 3 selectors (the syntax used by querySelectorAll, getElementsByClassName-style operations, and most modern scraping APIs) with one click. Use it to debug a broken Selenium locator, prototype a Scrapy field, validate a content-blocker rule, learn the difference between descendant and child combinators, or just answer 'why isn't my selector matching?' without firing up a full headless browser.

What is XPath?

XPath (XML Path Language) is a query language for selecting nodes from XML/HTML documents. It's commonly used for:

- Web scraping
- Automated testing (Selenium, Puppeteer)
- Data extraction from HTML
- XML processing

Example XPath expressions:
- //div[@class='title'] - All div elements with class 'title'
- //a[@href] - All links with href attribute
- //p[1] - First paragraph element
- //div[@id='main']//p - All p inside div with id 'main'

XPath is powerful for complex selections and navigating document structure.

What are CSS Selectors?

CSS Selectors are patterns used to select HTML elements based on their attributes, classes, IDs, and relationships. They're used for:

- Styling elements with CSS
- Selecting elements in JavaScript
- Web scraping
- Automated testing

Example CSS selectors:
- div.title - Div with class 'title'
- #header - Element with id 'header'
- a[href] - All links with href attribute
- div > p - Direct p children of div
- p:first-child - First p element

CSS selectors are simpler than XPath for most common selections.

How do I use this tester?

Using the tester is simple:

1. Choose selector type (XPath or CSS Selector)
2. Enter your HTML in the 'HTML Input' field
3. Enter your XPath expression or CSS selector
4. Click 'Test Selector' to see matches
5. View matched elements count and highlighted HTML

The tool will:
- Validate your selector syntax
- Show how many elements matched
- Highlight matched elements in the HTML
- Display the text content of matched elements

XPath vs CSS Selector - Which should I use?

Both have their strengths:

CSS Selectors:
- Simpler syntax
- Faster performance
- More familiar to web developers
- Better for styling-based selections
- Limited to descendant navigation

XPath:
- More powerful and flexible
- Can navigate up (parent selection)
- Better for complex conditions
- Can select by text content
- Can use logical operators (and, or)
- Better for XML documents

Recommendation:
- Use CSS selectors when possible (simpler, faster)
- Use XPath for complex selections or when you need parent navigation

Common XPath Expressions

Useful XPath patterns:

Basic:
- //tagname - All elements with tag
- //div - All div elements
- //div[@class='name'] - Div with specific class
- //div[@id='main'] - Div with specific ID

Attributes:
- //a[@href] - Elements with attribute
- //img[@alt='Logo'] - Exact attribute value
- //a[contains(@href, 'example')] - Partial match

Text:
- //p[text()='Hello'] - Exact text match
- //div[contains(text(), 'world')] - Partial text match

Navigation:
- //div[@id='main']//p - All p descendants
- //div[@id='main']/p - Direct p children
- //p[1] - First p element
- //p[last()] - Last p element

How do I write a selector that survives website redesigns?

Prefer stable signals over fragile ones. (1) Use semantic attributes the developer is unlikely to change: data-testid, data-cy, name, aria-label, role — these are typically added for tests and survive visual redesigns. (2) Use text content with XPath when the visible label is the contract: //button[normalize-space(.)='Add to cart'] survives even if every class name changes. (3) Avoid auto-generated framework classes like 'css-xn8q5e' from styled-components or 'jss123' from MUI — they regenerate on every build. (4) Avoid deep ancestor chains: 'div > div > div > div > p' will break the moment a layout div is added or removed. (5) Avoid positional indexes ('//tr[3]') unless the position is the meaning. (6) When forced to use a CSS class, choose the most semantically-meaningful one (.product-price), not the most specific one (.text-sm.font-bold.text-red-500). The rule of thumb: a good selector reads like English to another developer.

Why does my XPath work in the browser but fail in Scrapy or Selenium?

Three common reasons. (1) JavaScript-rendered content: browsers run the page's JS before you inspect it, so DOM elements like product prices or comments may exist in DevTools but be absent from the raw HTML that Scrapy/requests fetches. Solution: use a headless browser (Playwright, Selenium with Chrome) or look for a JSON API the page calls. (2) Default namespaces: XHTML and SVG documents have xmlns attributes that force you to register a namespace in XPath libraries like lxml. The browser is forgiving; lxml is strict. Solution: use local-name() — //*[local-name()='div'] — to bypass namespaces. (3) XPath version: browsers' document.evaluate supports XPath 1.0 only, but some libraries (lxml, Saxon) support XPath 2.0+ functions like ends-with(), matches(), tokenize(). If you wrote your XPath against lxml 2.0 and tested it in DevTools, the browser may report it invalid. This tester uses XPath 1.0 (same as browsers) so results match what Selenium/Puppeteer see.

Common CSS Selectors

Useful CSS selector patterns:

Basic:
- div - All div elements
- .classname - Elements with class
- #idname - Element with ID
- div.classname - Div with specific class

Attributes:
- [href] - Elements with attribute
- a[href='url'] - Exact attribute value
- a[href*='example'] - Partial match
- a[href^='https'] - Starts with
- a[href$='.pdf'] - Ends with

Combinators:
- div p - All p descendants of div
- div > p - Direct p children of div
- div + p - Next sibling p after div
- div ~ p - All sibling p after div

Pseudo-classes:
- p:first-child - First child element
- p:last-child - Last child element
- p:nth-child(2) - Second child
- a:not(.active) - Not matching class

Key Features

• Test XPath expressions
• Test CSS selectors
• Switch between XPath and CSS selector modes
• Validate selector syntax
• Show match count
• Highlight matched elements in HTML
• Display matched element content
• Support complex nested HTML
• Real-time selector testing
• Copy selectors and results
• Dark mode support
• 100% client-side processing - data never leaves your browser
• Works offline after initial load
• Mobile-friendly responsive design