playwright-selectors

# Playwright Selectors Skill

Strategies for selecting elements in Playwright tests.

## Recommended Selectors

### By Role (Preferred)

```typescript
// Buttons
await page.getByRole('button', { name: 'Submit' })
await page.getByRole('button', { name: /submit/i })

// Links
await page.getByRole('link', { name: 'Home' })
await page.getByRole('link', { name: 'Learn more' }).first()

// Form elements
await page.getByRole('textbox', { name: 'Email' })
await page.getByRole('checkbox', { name: 'Accept terms' })
await page.getByRole('combobox', { name: 'Country' })
await page.getByRole('radio', { name: 'Option A' })

// Headings
await page.getByRole('heading', { name: 'Welcome' })
await page.getByRole('heading', { level: 1 })

// Navigation
await page.getByRole('navigation')
await page.getByRole('main')
await page.getByRole('dialog')

// Lists
await page.getByRole('list')
await page.getByRole('listitem')

// Tables
await page.getByRole('table')
await page.getByRole('row')
await page.getByRole('cell', { name: 'Value' })
```

### By Test ID (Reliable)

```typescript
// Single element
await page.getByTestId('submit-button')
await page.getByTestId('user-profile')

// In HTML
<button data-testid="submit-button">Submit</button>

// Configure attribute name
// playwright.config.ts
export default defineConfig({
  use: {
    testIdAttribute: 'data-test-id',
  },
})
```

### By Label (Forms)

```typescript
// Text inputs
await page.getByLabel('Email')
await page.getByLabel('Password')

// With exact match
await page.getByLabel('Email', { exact: true })

// Associated label
<label for="email">Email</label>
<input id="email" type="email" />
```

### By Placeholder

```typescript
await page.getByPlaceholder('Enter your email')
await page.getByPlaceholder('Search...')
```

### By Text

```typescript
// Contains text
await page.getByText('Welcome')

// Exact match
await page.getByText('Welcome', { exact: true })

// Regex
await page.getByText(/welcome/i)

// In specific element
await pag