playwright-best-practiceslisted

# Playwright Best Practices ## CLI Context: Prevent Context Overflow When running Playwright tests from Claude Code or any CLI agent, always use minimal reporters to prevent verbose output from consuming the context window. **Use `--reporter=line` or `--reporter=dot` for CLI test runs:** ```bash # REQUIRED: Use minimal reporter to prevent context overflow npx playwright test --reporter=line npx playwright test --reporter=dot # BAD: Default reporter generates thousands of lines, floods context npx playwright test ``` Configure `playwright.config.ts` to use minimal reporters by default when `CI` or `CLAUDE` env vars are set: ```ts reporter: process.env.CI || process.env.CLAUDE ? [['line'], ['html', { open: 'never' }]] : 'list', ``` ## Locator Priority (Most to Least Resilient) Always prefer user-facing attributes: 1. `page.getByRole('button', { name: 'Submit' })` - accessibility roles 2. `page.getByLabel('Email')` - form control labels 3. `page.getByPlaceholder('Search...')` - input placeholders 4. `page.getByText('Welcome')` - visible text (non-interactive) 5. `page.getByAltText('Logo')` - image alt text 6. `page.getByTitle('Settings')` - title attributes 7. `page.getByTestId('submit-btn')` - explicit test contracts 8. CSS/XPath - last resort, avoid ```ts // BAD: Brittle selectors tied to implementation page.locator('button.btn-primary.submit-form') page.locator('//div[@class="container"]/form/button') page.locator('#app > div:nth-child(2) > button') // GOOD: U