XPath & CSS Selector Tester

The XPath & CSS Selector Tester is a free online tool that lets you test element selectors against HTML source code. Paste your HTML, enter a selector (CSS, XPath, ID, Name, Class Name, Tag Name or data-testid), and instantly see which elements match. The tool also generates ready-to-use code snippets for Selenium, Cypress, Playwright and WebdriverIO.

This is essential for QA engineers and test automation developers who need to verify that their element locators work correctly before writing test scripts.

• CSS Selector: Standard CSS selectors like .class, #id, [attribute="value"], div > p. The most common approach for modern test frameworks.
• XPath: XML Path Language expressions like //div[@class="login"], //button[text()="Submit"]. Powerful for complex traversals and text-based matching.
• ID: Find elements by their id attribute. Enter just the ID value (e.g., loginForm).
• Name: Find elements by their name attribute. Common for form inputs (e.g., email).
• Class Name: Find elements by CSS class. Enter a single class name (e.g., btn-primary).
• Tag Name: Find all elements of a given tag type (e.g., button, input, a).
• data-testid: Find elements by their data-testid attribute, the recommended approach for test-specific selectors.

Both have their strengths:

CSS Selectors are generally recommended because they are faster, more readable, and supported natively by all modern browsers and test frameworks. Use CSS selectors when you can identify elements by class, ID, attributes, or structural relationships.

XPath is more powerful for specific scenarios: traversing up the DOM tree (parent/ancestor), matching by text content, or navigating complex sibling relationships. Use XPath when CSS selectors cannot express the relationship you need.

Best practice: Prefer data-testid attributes for test automation, as they are stable, decoupled from styling, and clearly signal intent.

1. Paste Your HTML

Copy the HTML source of the page section you want to test. You can use your browser's DevTools (Inspect Element) to copy the relevant HTML.

2. Enter a Selector

Type your CSS selector, XPath expression, or attribute value in the Selector field.

3. Choose the Type

Select the selector type from the dropdown: CSS, XPath, ID, Name, Class Name, Tag Name, or data-testid.

4. Click Test Selector

The tool parses your HTML, evaluates the selector, and shows all matched elements with their outer HTML highlighted.

5. Copy Framework Snippets

Use the generated code snippets for Selenium, Cypress, Playwright, or WebdriverIO. Click the copy icon to copy any snippet to your clipboard.

• Use data-testid attributes: Add dedicated test attributes like data-testid="submit-btn" that won't change with styling or refactoring.
• Avoid brittle selectors: Don't rely on element position, nth-child indices, or deeply nested paths that break with minor DOM changes.
• Keep selectors short: Shorter selectors are more readable and less likely to break. Prefer #loginForm over div.page > div.content > form#loginForm.
• Avoid XPath by index: Selectors like //div[3]/button[2] are fragile. Use attributes or text content instead.
• Test selectors before coding: Use this tool to verify your selectors match the expected elements before writing test scripts.
• Use unique selectors: Ensure your selector matches exactly one element (or the expected number) to avoid flaky tests.

The tool generates ready-to-use code snippets for four popular test automation frameworks:

• Selenium: Using driver.find_element() with the appropriate By strategy.
• Cypress: Using cy.get() for CSS selectors or cy.xpath() for XPath (with plugin).
• Playwright: Using page.locator() with CSS or XPath syntax, or page.getByTestId() for data-testid.
• WebdriverIO: Using $() with the appropriate selector prefix.

Each snippet uses the correct API syntax for the selected selector type, so you can copy and paste directly into your test code.

This tool works with HTML source code that you paste in. To test selectors from a live website:

• Open the website in your browser
• Right-click the area you want to test and select "Inspect" or "Inspect Element"
• In DevTools, right-click the relevant HTML element and choose "Copy > Copy outerHTML"
• Paste the copied HTML into this tool's HTML Source field