Playwright Locator Playground
Practice Playwright's user-facing locators — getByRole,
getByLabel, getByText, getByTestId and more.
Type a locator and every matching element lights up instantly. Solve the
challenges, then keep the examples below as a reference.
Playwright locator examples
Playwright recommends locating elements the way a user would find them: by role and accessible name first, then label, placeholder or text, and only then by test id or CSS/XPath. Every example below works in the playground above.
| Locator | What it finds |
|---|---|
getByRole('button', { name: 'Subscribe' }) | A button by its accessible name (its text, aria-label, etc.). |
getByRole('heading', { level: 2 }) | Every h2 — roles come with their own options. |
getByRole('row', { name: /Marcus Lee/ }) | Regex names match part of the text. |
getByLabel('Email address') | A form field by its <label> text. |
getByPlaceholder('Search products') | An input by its placeholder. |
getByText('Shipped') | Elements containing that text (case-insensitive, partial). |
getByText('Shipped', { exact: true }) | Exact, case-sensitive text only. |
getByAltText('Wireless mouse') | An image by its alt text. |
getByTestId('add-B200') | The element with data-testid="add-B200". |
getByRole('listitem').filter({ hasText: 'USB-C Hub' }) | Narrow a set down to the ones containing some text. |
getByRole('listitem').getByRole('button') | Chain locators to search inside earlier matches. |
getByRole('button', { name: 'Add to cart' }).nth(1) | Pick one match by index (also .first(), .last()). |
locator('.product .price') | Plain CSS when nothing user-facing fits. |
locator('xpath=//td[2]') | XPath via the xpath= prefix. |
What this playground covers
The playground runs a faithful emulation of Playwright's matching rules in your browser, so you can practice without installing anything. It supports the locators and options above. For real tests, see the Playwright setup guide, and compare with the CSS and XPath playgrounds.