XPath and CSS selector tester
Paste HTML, type an XPath or CSS selector and see exactly which elements match, with the matches outlined in a live preview and safer alternatives suggested.
Loading the tester…
How to use it
- Copy the HTML of the part of the page you care about. In Chrome, right-click the element, choose Inspect, then right-click the node in the Elements panel and use Copy, Copy outerHTML.
- Paste it in the HTML box and type your selector. The type switches by itself when you start with
//. - Check the match count. A locator you can rely on matches exactly one element.
- If it matches several, look at the suggestions under the result, which list stable alternatives such as an
id, adata-testidor the visible text.
XPath or CSS?
CSS selectors are shorter and faster to read. XPath can match by text, walk up to a parent and select by position among siblings, which CSS cannot do. A practical rule: start with CSS on an id or data-testid, and use XPath when you need text or the parent. The XPath cheat sheet has the equivalents side by side.
Questions
Does this tool send my HTML anywhere?
No. The HTML and the selector are evaluated in your browser. Nothing is uploaded.
Which XPath version does it use?
XPath 1.0, because that is what browsers (and therefore Selenium and Playwright) support. Functions from XPath 2.0, such as matches() and lower-case(), will give an error.
Why does my selector work here but not in Selenium?
Usually because the real page differs from the HTML you pasted: the element loads later, sits inside an iframe or a shadow root, or the page is in a different state. Copy the HTML from the browser's Elements panel after the page has finished loading.