E2E Testing with Claude Code: Playwright Test Design and Page Object Model

Unit and integration tests pass, but the UI breaks in production. End-to-end tests with Playwright catch what other tests miss. Claude Code generates complete test scenarios when you define the right patterns. CLAUDE.md for E2E Testing Standards ## E2E Testing Rules ### Tools - Playwright (cross-browser, headless and headed) - Test directory: e2e/ (separate from src/) - Config: playwright.config.ts ### Test design principles - Describe what the user does ("click the submit button") - Don't depend on implementation details (no class names, no internal IDs) - Selector priority: data-testid > role > text > CSS ### Test data management - Reset test DB before each test run (beforeAll) - Use fixtures/factories for test data (no hardcoding) - Never use production data ### CI configuration - Run E2E on every PR - On failure: save screenshots and videos - Run on Chromium, Firefox, and WebKit - Target: under 5 minutes (use parallel workers) ### Prohibited - sleep/waitForTimeout (use waitForSelec