XPath & CSS Selector Tester

XPath & CSS Selector Tester - Test Selectors and XPath Online

A powerful tool for testing XPath expressions and CSS selectors on HTML content. Instantly see which elements match your selectors with highlighting and detailed results. Perfect for web scraping, automation testing, and learning selectors.

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

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