Locator Lab

Test selectors against pasted HTML, grade how resilient they are, and generate framework-ready snippets.

Runs 100% client-side
Copy output
On this page4 sections

HOW TO USE

  1. 01Paste HTML into the textarea (or click Load sample to start from a login form).
  2. 02Enter a CSS selector or XPath expression — the type is auto-detected from the leading character.
  3. 03Click Analyze to see the match count, a resilience grade, better-locator ideas, and ready-to-paste framework snippets.
  4. 04Copy the Playwright, Cypress, or Selenium snippet — or one of the suggested locators — straight into your test.

Try it

CSS: [data-testid="login-submit"] XPath: //button[@type="submit"] Both target the Sign in button in the sample form.

WHEN TO USE

Use Locator Lab before locking in a selector in a Playwright, Cypress, or Selenium test. Paste the relevant HTML (copy it from DevTools), run your selector, and confirm it matches exactly one element. The resilience grade and better-locator suggestions steer you away from brittle choices — absolute XPath, style classes, and positional selectors — toward accessible-name and test-id locators that survive redesigns.

WHAT BUGS THIS FINDS

  • Brittle selector that breaks on redesign

    A .btn-primary or div > div > button selector passes today but breaks when the CSS framework or layout changes — the resilience grade flags it as Risky/Brittle before it lands in the suite.

  • Selector matches the wrong element

    A general selector matches multiple elements — the match count and per-node outerHTML make it clear the selector needs a more specific attribute or accessible name.

  • data-testid not on the right element

    A [data-testid='submit'] selector returns zero matches because the attribute is on a wrapper div — the matched-nodes output confirms which element actually carries it.

  • Ignoring accessible names

    Tests bypass getByRole/getByLabel and reach for fragile CSS — the suggestions surface the accessible-name locator the team should prefer.

QA USE CASES

01

Choose a resilient locator

Paste the component HTML, try your candidate selector, and let the grade plus suggestions pick the locator with the fewest structural dependencies.

02

Convert a selector across frameworks

Validate one selector and copy the equivalent Playwright, Cypress, and Selenium snippets without rewriting them by hand.

03

Teach locator strategy

Use it in onboarding or interview prep to show why an absolute XPath grades Risky and an accessible-name locator grades Strong.