Skip to content
gohacks.dev
Testing

CSS Selector Tester

Test a CSS selector against your own HTML and see exactly which elements match, using the browser's querySelectorAll.

Free · No sign-up · Your inputs stay in your browser

Input

Test a CSS selector against HTML

Output

0 matches

Matched with this browser's own querySelectorAll, so the result is exactly what document.querySelectorAll, Playwright's CSS locators and jQuery (for standard selectors) would return here. Support for newer selectors such as :has() depends on the browser.

Runs in this browser. Nothing you paste is sent to a server.

Same engine, same answer

Because matching is done by the browser itself, the result is what document.querySelectorAll, Playwright's CSS locators, Cypress' cy.get and jQuery (for standard selectors) would return for the same markup. That makes it a quick way to fix a flaky test locator or a scraping rule before running the whole suite.

Newer selectors

:has(), :is(), :where() and the forgiving selector lists are supported in current Chrome, Firefox and Safari. A selector that works here but not in an older test browser is usually one of these. MDN's selector reference lists support per selector.

Share

Frequently asked questions

How do I select an element by its text with CSS?
CSS cannot match on text content. Use XPath (//button[contains(., 'Save')]) or your test tool's text locator, such as Playwright's getByText.
Why does a selector match in DevTools but not in my test?
The element is usually rendered after the test queries, or inside a shadow root or iframe. Wait for it, or use the tool's shadow-piercing or frame-aware locator.
Is what I paste sent anywhere?
No. The tool runs entirely in your browser with JavaScript. Nothing you type or paste is sent to our server or stored.

Keep planning

Similar tools

Testing

Regex String Generator

Testing

Dummy File Generator

Testing

Image Diff