get to prod tasks

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

@@ -0,0 +1,73 @@
+# 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