About this tool
A good locator matches exactly one element and keeps matching after the next UI change. This tester lets you check a locator against real page source before putting it into a Selenium, Playwright or Cypress test. Paste the HTML (from DevTools, “Copy outerHTML”), enter an XPath expression or a CSS selector, and see how many elements match, the markup of each one and where they are on a rendered preview. The preview is a sandboxed frame with scripts disabled. The cheatsheet shows common XPath axes and functions next to their CSS equivalents, where one exists.
How to use it
- Paste HTML, or click “Load sample” for a login form and an orders table.
- Type a locator. Expressions starting with / or ( are treated as XPath, others as CSS; use the switch to force one.
- Check the match count: one match is what you want for a click or assertion target.
- Click any selector in the cheatsheet to run it against the sample.
XPath & CSS Selector Tester FAQ
Should I use XPath or CSS selectors?
Prefer CSS or framework locators (such as Playwright’s getByRole and getByTestId) for speed and readability. Use XPath when you need something CSS cannot express: matching by text with normalize-space(), going up to an ancestor, or selecting a cell relative to a label with following-sibling::.
Why does my XPath work in the browser console but not here?
Browsers support XPath 1.0 only, which this tool uses as well. Check that the HTML you pasted is what the browser actually rendered: content added by JavaScript, or inside an iframe or shadow DOM, is not in the page source. Copy outerHTML from DevTools to get the live DOM.
Why does contains(@class, "btn") match too much?
contains() matches substrings, so it also matches "btn-primary" and "submit-btn". Use contains(concat(' ', normalize-space(@class), ' '), ' btn ') in XPath, or simply .btn in CSS, to match a whole class name.