Testing

Playwright Locator Playground

Paste a small DOM, compare Playwright-style locators, inspect accessible names and see when strict mode will pass, fail or become ambiguous.

  • DOM stays in the browser
  • Strictness diagnostics
  • Accessible-name preview

Locator review before a flaky test lands

Playwright recommends user-facing locators, but code reviews still need a quick way to see what getByRole, getByLabel, getByText, data-testid and CSS would match in a small HTML snapshot. This playground gives that review a stable surface without running a full browser test.

The evaluator uses a detached DOMParser document, removes risky elements and attributes, and does not send pasted markup to a backend.

Build a strict locator

Choose a DOM preset or paste markup, then compare a locator type, accessible role, name/text query, filter hasText and nth tie breaker.

Run locator

Review a normal sign-in form with labels, placeholder text, a submit button and a reset link. Best default when the element has a meaningful role and accessible name.

DOM and locator inputs

Locator result

Run a locator to see strictness, matched elements, diagnostics and a copyable Playwright snippet.

What to verify in Playwright locator reviews

Start from roles and names

Role locators mirror how assistive technology sees the page. When a button, link or dialog has a clear accessible name, the test is easier to read and harder to break accidentally.

Treat ambiguity as a design signal

If a locator resolves to more than one element, Playwright strict mode protects the test from choosing the wrong target. Refine the name, scope or filter before adding an action.

Keep CSS as a last resort

CSS locators are sometimes necessary for legacy markup, but they couple tests to structure. Prefer label, role, text or test id when that describes the user contract.

Locator choices usually sit next to assertion semantics, rule testing and configuration review. Use neighboring tools when the test contract is broader than one selector.

FAQ

Does this run real Playwright?

No. The MVP is a learning and review simulator for locator semantics. It does not import Playwright at runtime or launch a browser.

Why can strictness be ambiguous?

Playwright actions expect one target. If a locator matches repeated buttons, rows or labels, the test should be refined before it clicks or fills.

What accessible-name rules are included?

The playground covers the common review subset: aria-labelledby, aria-label, labels, alt, title, visible text and placeholder fallback.

Does pasted HTML leave the browser?

No. The DOM snapshot is parsed and sanitized locally in the browser and is not sent to a backend.