How to use the selector playground
Paste the HTML of the page you're automating into the left panel. Choose CSS or XPath, type your locator, and matching elements are outlined in the preview with a running match count. A good locator matches exactly one element for a click or type action; if you see more than one match, tighten it.
CSS selector cheat sheet
| Goal | CSS selector |
|---|---|
| By id | #login |
| By class | .btn-primary |
| By attribute | input[type="email"] |
| By test attribute | [data-test="email-field"] |
| Descendant | #login input |
| Direct child | ul.nav > li |
| Nth item | li:nth-child(2) |
XPath cheat sheet
| Goal | XPath |
|---|---|
| By id | //*[@id="login"] |
| By attribute | //input[@type="email"] |
| By visible text | //button[text()="Sign in"] |
| Contains text | //a[contains(text(),"Forgot")] |
| Contains class | //*[contains(@class,"active")] |
| Following sibling | //label/following-sibling::input |
Using your locator in each framework
Selenium (Java)
Use By.cssSelector(...) or By.xpath(...) with driver.findElement. Prefer CSS for speed and readability; reach for XPath only when you need to match by visible text or traverse to a sibling.
Playwright
Playwright's page.locator(...) accepts CSS directly, and XPath via the xpath= prefix. Playwright also has text and role locators that are often more robust than either — but CSS/XPath remain essential for legacy markup.
Cypress
Cypress uses cy.get(cssSelector) natively. XPath needs the cypress-xpath plugin and cy.xpath(...). For flaky UIs, favour data-* test attributes over brittle class chains.
CSS vs XPath: which should you use?
Reach for CSS by default: it's faster, shorter, and supported everywhere. Use XPath when you need to select by an element's visible text, walk up to a parent, or hit a sibling relative to a known node — things CSS can't express. Whatever you choose, a stable data-test or id attribute beats a deep class chain that breaks on the next redesign.
Frequently asked questions
Is my HTML uploaded anywhere?
No. Everything runs in your browser — the HTML you paste never leaves your machine.
Why does my selector match zero elements?
Check for typos in class or attribute names, and remember CSS is case-sensitive for attribute values. For XPath, confirm you're using // for a descendant search rather than / for a direct child of the document.