74 lines
2.5 KiB
Markdown
74 lines
2.5 KiB
Markdown
# 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
|