Locator Playground

9Locator Playground (interactive)

How to use this tool

  • Paste any HTML (or use the sample) in the left box
  • Pick a locator strategy and enter the query
  • Click Run — matched elements get a red outline in the preview
  • Right panel shows match count, accessible name, role, and the Playwright code line
  • Try fail cases: too many matches (strict-mode violation), no matches, wrong role

Browser Sandbox Limitation: the playground works on HTML you paste, not on remote URLs (browser CORS rules block cross-origin DOM access). To target a live site, use npx playwright codegen https://site.com and copy locators from the recorder.

1 · Paste your HTML
2 · Pick strategy & enter query
3 · Live preview (matches outlined red)
Results
Click "Run query" to see matches.

9.1 Live-site locator workflow

  1. codegen — npx playwright codegen https://your-site.com. Browser opens; every click is converted to Playwright code with the recommended locator. Always clean up the output.
  2. Inspector locator picker — during --debug or --ui, click the "Pick locator" icon and hover an element.
  3. Chrome DevTools Accessibility pane — Elements → Accessibility. Shows the computed role + accessible name. Use to validate before writing a getByRole call.

Module 11 — Locator finding Q&A

Where do you start finding a locator on a complex page?
Open DevTools Accessibility pane on the element. Read the computed role and name. That gives getByRole(role, { name }) almost for free. Empty role/name = file a markup bug.
codegen suggested an xpath with positional indices. Good?
No — positional XPath breaks on any reorder. Replace with a role-based locator (DevTools Accessibility pane → role + name).
Element has no label, no aria. Now what?
File a bug to add aria-label (a11y also needs it). Stop-gap: use getByTestId with a stable data-testid the team agrees on.
How is the accessible name actually computed?
W3C "Accessible Name and Description Computation": aria-labelledby → aria-label → associated <label> → contained text → placeholder → title. DevTools Accessibility pane shows the result.
Three buttons with same text — how to target one?
Anchor on unique parent context: page.getByRole('row', { name: 'Alice' }).getByRole('button', { name: 'Delete' }). Don't use nth indexes unless position is the actual semantic.