### User-First Locator Philosophy
Traditional automation often relied on fragile selectors like:
```typescript
// ❌ Brittle: Breaks when CSS classes or DOM structure change
page.locator('div.header > ul > li:nth-child(2) > a.btn-primary');
```
Playwright recommends **user-facing role locators**:
```typescript
// ✅ Resilient: Reflects what users see and interact with
page.getByRole('button', { name: 'Sign in' });
page.getByRole('heading', { name: 'Welcome back' });
```
### Common Roles:
- `'button'`: Buttons and clickable submit elements
- `'link'`: Navigation links (`<a>` tags)
- `'textbox'`: Input fields and textareas
- `'heading'`: `<h1>` through `<h6>` headings
- `'checkbox'` / `'radio'`: Form selection inputs