Skip to main content

E2E Testing with Playwright

Overview​

E2E tests catch React errors, broken pages, and broken flows before they reach production. This prevents the frustration of refreshing the page only to see a React error.

Quick Start​

# Run all E2E tests
pnpm test:e2e

# Run with UI (interactive)
pnpm test:e2e:ui

# Run in headed mode (see browser)
pnpm test:e2e:headed

# Debug mode
pnpm test:e2e:debug

Test Coverage​

All Pages Tested​

  • ✅ LoginPage - Authentication flows
  • ✅ TodayPage - Main dashboard, checklist, recovery, tasks
  • ✅ WeekPage - Week view, stress week toggle
  • ✅ DayPage - Individual day view
  • ✅ SettingsPage - Settings form, bedtime targets, stress week overrides
  • ✅ SubscriptionPage - Subscription management, upgrade, cancellation, feature comparison
  • ✅ GroceryPage - Grocery list management
  • ✅ DinnerPage - Dinner planning
  • ✅ UserProfilePage - User profile
  • ✅ ExerciseCatalogPage - Exercise catalog
  • ✅ WorkoutPage - Workout creation
  • ✅ MobilityPage - Mobility sessions
  • ✅ CardioPage - Cardio sessions
  • ✅ WorkoutHistoryPage - Workout history

Critical Flows Tested​

  • ✅ Authentication (login, logout, protected routes)
  • ✅ Navigation between all pages
  • ✅ Checklist item toggling
  • ✅ Recovery data editing
  • ✅ Settings updates
  • ✅ Stress week toggle
  • ✅ Complete day workflow
  • ✅ Onboarding flow (all 7 steps, data verification, redirects)

What E2E Tests Catch​

  1. React Errors - ReferenceError: X is not defined, TypeError, etc.
  2. Missing Imports - Components not imported but used
  3. Broken Components - Components that fail to render
  4. Navigation Issues - Routes that don't work
  5. Form Errors - Forms that don't submit or validate
  6. API Integration - API calls that fail silently

Test Structure​

e2e/
  ├── auth.spec.ts          # Authentication flows
  ├── pages.spec.ts          # All pages render without errors
  ├── today-page.spec.ts     # TodayPage interactions
  ├── settings-page.spec.ts  # SettingsPage interactions
  ├── week-page.spec.ts      # WeekPage interactions
  ├── grocery-page.spec.ts   # GroceryPage tests
  ├── dinner-page.spec.ts    # DinnerPage tests
  ├── exercise-pages.spec.ts # Exercise-related pages
  ├── onboarding.spec.ts    # Onboarding flow (all 7 steps, data verification)
  ├── all-flows.spec.ts      # Complete user journeys
  ├── test-helper.ts         # Common utilities
  └── README.md              # E2E test documentation

CI Integration​

E2E tests run in CI and must pass before merge. They are part of the build pipeline and catch errors that unit/integration tests might miss.

Adding New Tests​

When adding a new page:

  1. Add test in pages.spec.ts to verify it renders without errors
  2. Add specific test file if page has complex interactions
  3. Update this document
  4. Run tests locally: pnpm test:e2e

Requirements​

  • Every page must have E2E tests - No exceptions
  • All critical flows must be tested - Login, navigation, data entry
  • Tests must catch React errors - ReferenceError, TypeError, etc.
  • Tests must verify UI renders - No blank pages, no broken components

Why E2E Tests Matter​

Before E2E tests:

  • Developer pushes code
  • Code has missing import: Input is not defined
  • User refreshes page → React error
  • User frustrated, developer has to hotfix

With E2E tests:

  • Developer pushes code
  • E2E test catches: ReferenceError: Input is not defined
  • Test fails in CI
  • Developer fixes before merge
  • User never sees the error

E2E tests are your safety net. They catch what other tests miss.