playwright-e2e-patternslisted

# Playwright E2E Testing Patterns E2E testing patterns for the Kookr dashboard. ## Quick Commands ```bash npx playwright test # All tests (config at repo root, testDir ./e2e) npx playwright test e2e/canary.spec.ts # Specific file npx playwright test --headed # See browser npx playwright test --debug # Inspector ``` ## Quick Reference | Problem | Cause | Fix | |---------|-------|-----| | Clicks wrong modal | Generic `.modal` selector | Use `[data-modal="name"]` or `data-testid` | | Mock doesn't work | Set up after navigation | Mock BEFORE `page.goto()` | | Broad mock catches specific routes | Pattern too wide | Register specific routes first | | Assertion fails on async content | Content loads after render | Use `toBeVisible({ timeout })` or `waitForResponse()` | | Welcome modal blocks clicks | First-visit modal | Set localStorage via `addInitScript()` | | Firefox-only failures | Timing differences | Use specific selectors + explicit waits | | Serial tests conflict | Browser projects run parallel | Use `workers: 1` | | Count is 0 but elements exist | Feature changed DOM structure | Inspect actual DOM with `innerHTML()` | | WS message silently dropped | WS not connected when sent | Wait for connection indicator before sending | | State leaks between tests | Reset endpoint incomplete | Clear ALL stateful subsystems in reset | ## Selector Strategy Prefer `data-testid`, role-based (`getByRole('button', { name: