playwright-opslisted
Install: claude install-skill 0xDarkMatter/claude-mods
# Playwright Operations
End-to-end testing with Playwright Test (`@playwright/test`, TS/JS). A Python flavor
(`pytest-playwright`) exists with the same browser API but pytest-style fixtures — patterns here
translate directly; runner config does not.
## Quick Start
```bash
npm init playwright@latest # scaffold config + example test + GH Actions workflow
npx playwright test # run all tests, all projects
npx playwright test --project=chromium --grep "@smoke"
npx playwright test --ui # interactive UI mode (watch, time-travel)
npx playwright codegen https://app.local # record actions -> generated locators
npx playwright show-report # open last HTML report
npx playwright show-trace trace.zip # inspect a trace
```
## Selector Strategy
**Hierarchy — always prefer the highest tier that uniquely matches:**
| Tier | Locator | When |
|------|---------|------|
| 1 | `page.getByRole('button', { name: 'Submit' })` | Anything with an ARIA role — buttons, links, headings, textboxes. Tests a11y for free |
| 2 | `page.getByLabel('Password')` | Form fields with labels |
| 3 | `page.getByPlaceholder('name@example.com')` | Inputs without labels (fix the label instead, when you can) |
| 4 | `page.getByText('Welcome back')` | Non-interactive text content |
| 5 | `page.getByTestId('cart-total')` | Stable hook when semantics don't disambiguate. Configure attribute via `testIdAttribute` |
| 6 | `page.locator('css=...')` / `xpath=` | **Last resort.**