Kordant/tasks/web-production/17-e2e-testing.md

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