# 17. End-to-End Testing (Playwright)

meta:
  id: web-production-17
  feature: web-production
  priority: P1
  depends_on: []
  tags: [testing, e2e, quality]

objective:
- Implement comprehensive end-to-end tests covering critical user journeys using Playwright

deliverables:
- Playwright test suite for critical flows
- Test database seeding and cleanup
- Visual regression testing setup
- CI integration for E2E tests

steps:
1. Install and configure Playwright:
   - Install @playwright/test in web/package.json
   - Create playwright.config.ts with project settings
   - Configure test database (separate from dev)
2. Create test utilities:
   - Test user creation helper
   - Database reset between tests
   - Authentication state management
   - API mocking helpers
3. Write critical path tests:
   - Landing page → Signup → Onboarding → Dashboard
   - Login → Dashboard → DarkWatch → Add watchlist item
   - Login → Settings → Update profile
   - Login → Billing → View pricing → Checkout (test mode)
   - Admin login → Blog → Create post → Publish
   - Real-time alerts: WebSocket connection and alert display
4. Add visual regression tests:
   - Screenshot comparison for landing page
   - Screenshot comparison for dashboard
   - Screenshot comparison for mobile responsive layout
5. Configure test data:
   - Seed test database with known data
   - Use test Stripe keys for billing tests
   - Mock external APIs (Twilio, FCM) in tests
6. Add CI integration:
   - Run E2E tests on PR (not blocking initially)
   - Upload test artifacts (screenshots, videos)
   - Parallel test execution across browsers

tests:
- E2E: All critical paths pass in CI
- Visual: Screenshot diffs reviewed and approved
- Cross-browser: Tests pass on Chromium, Firefox, WebKit

acceptance_criteria:
- 10+ E2E tests covering critical user journeys
- Tests run in <5 minutes with parallel execution
- Tests pass on Chromium, Firefox, and WebKit
- Visual regression catching UI changes
- Test artifacts (screenshots, videos) uploaded on failure
- Tests use isolated test database
- Mobile viewport tests included

validation:
- `npx playwright test` → all tests pass
- CI pipeline runs E2E tests on PR
- Change button color → visual regression test fails
- Check test report → screenshots and traces available

notes:
- Playwright is faster and more reliable than Cypress
- Use test database to avoid polluting dev data
- Start with 5 critical paths, expand over time
- Consider using MSW for API mocking in tests