E2E Selector Playground

The single biggest lever on E2E reliability is how you locate elements. Build a locator, watch which elements it matches in the sample app, and learn why role- and label-based locators survive redesigns that break CSS selectors.

Pair this with the Designing Reliable E2E Tests guide and the Playwright entry in the Tool Explorer.

Sample app — matched elements are highlighted

Challenge

Build your locator

MethodRole

Name (optional)Exact match (whole string, case-sensitive)

page.getByRole('button', { name: 'Sign in' })

Matched 2 elements

Matches: Sign in, Sign in with Google

recommendedMirrors how users and assistive tech find elements — resilient to markup changes.