flights_web/docs/superpowers/plans/2026-04-04-e2e-tests-implementation.md

E2E Test Suite Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Write 200-300 comprehensive e2e tests for Angular Aeroflot app, validate 100% pass rate, then adapt and validate identical tests on React app with mocked + real API.

Architecture: Feature-based test organization (online-board, schedule, flights-map, popular-requests, i18n, error-states, responsive). Full state reset per test. Page Object Model for selector abstraction. Phased execution: Angular tests first → full validation → React adaptation → React validation.

Tech Stack: Cypress 13+, TypeScript, Moment.js (date manipulation), custom Cypress commands, fixtures with mock data

---

Phase 1: Cypress Infrastructure Setup [SEE SPEC FOR DETAILS]

Task 1: Set Up Cypress Base Config & Support Files for Angular

• Create cypress.config.ts with baseUrl, timeouts, video recording
• Create cypress/tsconfig.json with TypeScript configuration
• Create cypress/support/index.ts with hook overrides
• Create cypress/support/fixtures.ts with CITIES, MOCK_FLIGHTS, POPULAR_REQUESTS, LANGUAGES
• Create cypress/support/commands.ts with custom Cypress commands for common actions
• Add npm scripts: cypress:open, cypress:run, cypress:run:all, cypress:run:feature, test:e2e
• Install Cypress and dependencies
• Commit all infrastructure files

---

Phase 2: Write Angular Feature Tests

Task 2: Online Board Feature Tests (~70 tests)

Files: ClientApp/cypress/integration/features/online-board.cy.ts

Contains:

• Arrival Tab (20 tests): City input validation, date picker, search with results, flight details modal
• Departure Tab (20 tests): Mirror of arrival tab tests
• Flight Number Filter (15 tests): Filter by flight number, special characters, no results
• State persistence tests (15 tests): Preserve filters on navigation

Key test categories:

• Happy path: Valid search, display results, open modal
• Edge cases: Special characters, future dates, max passengers
• Error handling: API failures (404, 500, timeout), empty results, validation errors
• State: Filter persistence, modal state, pagination
• Accessibility: Keyboard navigation, focus management
• Responsive: Mobile/tablet/desktop viewports

Run: npm run cypress:run:feature -- --spec "cypress/integration/features/online-board.cy.ts" Commit: git commit -m "feat: add online board e2e tests"

---

Task 3: Schedule Feature Tests (~60 tests)

Files: ClientApp/cypress/integration/features/schedule.cy.ts

Contains:

• Search Page (25 tests): Origin/destination autocomplete, date range, passenger count, validation
• Flight Details Page (20 tests): Display flight info, navigation (next/prev), back button
• Filters & Sorting (15 tests): Time range, airline filter, sort by departure/price/duration

Key patterns:

• Autocomplete with suggestions and filtering
• Date range picker with validation
• Spinner controls with min/max bounds
• Sorting (ascending/descending)
• Filter combinations and clear all

Run: npm run cypress:run:feature -- --spec "cypress/integration/features/schedule.cy.ts" Commit: git commit -m "feat: add schedule feature e2e tests"

---

Task 4: Flights Map Feature Tests (~40 tests)

Files: ClientApp/cypress/integration/features/flights-map.cy.ts

Contains:

• Map Rendering (15 tests): Map loads, markers display, clustering, pan/zoom, geolocation
• Destination List (15 tests): List items render, click selects, search/filter works
• Map Interactions (10 tests): Click marker shows popup, click list item highlights map, hover effects

Key patterns:

• DOM element queries for Leaflet map
• Marker element selection and validation
• Pan/zoom coordinate calculation
• Click event triggering on map elements
• Popup visibility validation

Run: npm run cypress:run:feature -- --spec "cypress/integration/features/flights-map.cy.ts" Commit: git commit -m "feat: add flights map e2e tests"

---

Task 5: Popular Requests Widget Tests (~30 tests)

Files: ClientApp/cypress/integration/features/popular-requests.cy.ts

Contains:

• Widget loads on page load (5 tests)
• Displays popular request items (10 tests)
• Click navigation (10 tests): Click item, verify URL and filters set correctly
• API fallback to mock data (5 tests)

Key patterns:

• Widget visibility on initial load
• Data binding from API or fixtures
• Navigation after item click
• Mock data fallback when API fails

Run: npm run cypress:run:feature -- --spec "cypress/integration/features/popular-requests.cy.ts" Commit: git commit -m "feat: add popular requests widget e2e tests"

---

Task 6: Internationalization (i18n) Tests (~20 tests)

Files: ClientApp/cypress/integration/features/i18n.cy.ts

Contains:

• Language switcher functionality (3 tests): All 9 languages selectable, persistence
• Date format changes (5 tests): DD.MM.YYYY for ru, MM/DD/YYYY for en, etc.
• Number formatting (5 tests): Decimal separator, thousands separator per locale
• Text translations (5 tests): No missing keys, correct translations loaded
• Locale-specific UI (2 tests): Text truncation, layout changes

Languages tested: ru, en, es, fr, it, ja, ko, zh, de

Run: npm run cypress:run:feature -- --spec "cypress/integration/features/i18n.cy.ts" Commit: git commit -m "feat: add i18n e2e tests for all 9 languages"

---

Task 7: Error States & Recovery Tests (~30 tests)

Files: ClientApp/cypress/integration/features/error-states.cy.ts

Contains:

• Network Errors (10 tests): 404 not found, 500 server error, 503 unavailable, timeout
• Validation Errors (8 tests): Required field missing, invalid format, past date, special chars
• Empty States (5 tests): No results, no matching cities, no flights
• Recovery & Retry (7 tests): Retry button works, clears error after success, reconnect on SignalR failure

Key patterns:

• Intercept with different statusCodes
• Error message visibility
• Retry button state and functionality
• SignalR connection loss and reconnection

Run: npm run cypress:run:feature -- --spec "cypress/integration/features/error-states.cy.ts" Commit: git commit -m "feat: add error states and recovery e2e tests"

---

Task 8: Responsive & Mobile Tests (~40 tests)

Files: ClientApp/cypress/integration/features/responsive.cy.ts

Contains:

• Mobile Viewport (15 tests, 375x667 iPhone SE):

  • Text readability, no overflow
  • Touch targets ≥44x44px
  • Hamburger menu opens/closes
  • Accordion sections collapse/expand on tap
  • Forms usable (not hidden behind keyboard)

• Tablet Viewport (12 tests, 768x1024 iPad):

  • Layout optimized (not stretched)
  • Multi-column layouts
  • Touch interactions work

• Desktop Viewport (13 tests, 1920x1080):

  • Layout scales correctly
  • No horizontal scrolling
  • All content accessible

Key patterns:

• cy.viewport() for responsive testing
• Touch events via Cypress touch commands
• Element size validation (44x44px minimum)
• Layout-specific assertions

Run: npm run cypress:run:feature -- --spec "cypress/integration/responsive.cy.ts" Commit: git commit -m "feat: add responsive design e2e tests"

---

Task 9: Validate Full Angular Test Suite

• Step 1: Run full Angular test suite

cd ClientApp
npm run cypress:run:all

Expected: 200-300 tests, all passing, total time <15 minutes

• Step 2: Generate HTML report

npm run cypress:report

Expected: HTML report showing all tests with pass/fail status

• Step 3: Identify and fix flaky tests

If any test fails intermittently:

1. Add explicit waits for async operations
2. Use Cypress retry logic
3. Check for race conditions
4. Rerun until 3 consecutive passes

• Step 4: Commit final Angular baseline

git add cypress/integration/features/
git commit -m "feat: complete angular e2e test suite (200-300 tests, 100% pass rate)"

---

Phase 3: Adapt Tests to React

Task 10: Set Up Cypress for React App

Files:

• Create: react-app/cypress.config.ts (copy from Angular, change baseUrl to :3000)

• Create: react-app/cypress/tsconfig.json (same as Angular)

• Create: react-app/cypress/support/ (copy all from Angular)

• Create: react-app/cypress/integration/features/ (will be adapted in next tasks)

• Modify: react-app/package.json (add cypress scripts)

• Step 1: Copy Cypress config

cd react-app
cp ../ClientApp/cypress.config.ts ./cypress.config.ts
# Edit baseUrl: 'http://localhost:3000'
cp -r ../ClientApp/cypress/support ./cypress/support
cp -r ../ClientApp/cypress/tsconfig.json ./cypress/tsconfig.json

• Step 2: Install Cypress in React app

npm install --save-dev cypress@13.x @types/node

• Step 3: Add npm scripts to react-app/package.json

{
  "cypress:open": "cypress open",
  "cypress:run": "cypress run",
  "cypress:run:all": "cypress run --spec 'cypress/integration/**/*.cy.ts'",
  "test:e2e": "cypress run -- --env API_MODE=mocked",
  "test:e2e:real": "cypress run -- --env API_MODE=real BASE_URL=https://test.aeroflot.ru"
}

• Step 4: Commit React Cypress setup

git add cypress/ package.json
git commit -m "feat: set up cypress for react app with inherited configuration"

---

Task 11-16: Adapt Each Feature Test to React

For each feature (online-board, schedule, flights-map, popular-requests, i18n, error-states, responsive):

• Step 1: Copy spec file

cp ../ClientApp/cypress/integration/features/{feature}.cy.ts ./cypress/integration/features/{feature}.cy.ts

• Step 2: Update selectors if DOM differs

If React uses different HTML structure, update data-testid selectors in the spec file. Most selectors should remain the same if both apps implement the same test IDs.

• Step 3: Run tests against React

npm run test:e2e -- --spec "cypress/integration/features/{feature}.cy.ts"

• Step 4: Fix failures

For each failure:

1. Check console for selector errors
2. Update selectors in page-objects or spec file
3. Check for timing issues (add explicit waits)
4. Verify API responses match expected structure

• Step 5: Commit adapted tests

git add cypress/integration/features/{feature}.cy.ts
git commit -m "feat: adapt {feature} tests to react app"

Repeat Steps 1-5 for each feature:

• online-board
• schedule
• flights-map
• popular-requests
• i18n
• error-states
• responsive

---

Task 17: Validate React Suite with Mocked API

• Step 1: Run full React test suite with mocked API

cd react-app
npm run test:e2e

Expected: All 200-300 tests pass, <15 minutes

• Step 2: Identify selector/timing issues

For any failures:

• Check if selectors exist in React DOM (may differ from Angular)

• Add explicit cy.wait() if async operations need more time

• Update fixtures if mock data format differs

• Step 3: Fix and rerun

After fixes, rerun until 100% pass rate

• Step 4: Commit React baseline

git add cypress/integration/features/
git commit -m "feat: complete react e2e test suite with mocked api (100% pass rate)"

---

Task 18: Validate React Suite with Real API

• Step 1: Run React test suite against staging backend

cd react-app
npm run test:e2e:real

Expected: All tests pass, ~10-20 minutes (slower due to network)

• Step 2: Handle network-related test flakiness

Some tests may fail due to:

• Actual backend returning different data than mocks
• Network delays exceeding Cypress timeout
• Actual backend validation rules

Fix by:

1. Adjusting timeouts in cypress.config.ts
2. Updating assertions to match real data
3. Adding retry logic for flaky tests

• Step 3: Validate feature parity

Verify React and Angular behave identically:

• Same success paths work

• Same error messages shown

• Same validation rules applied

• Step 4: Final commit

git add cypress/
git commit -m "feat: react e2e test validation complete (mocked + real api, 100% pass rate)"

---

Phase 4: Documentation & CI/CD

Task 19: Add CI/CD Pipeline

Files:

• Create: .github/workflows/e2e-tests.yml

This task ensures tests run automatically on every push/PR.

---

Success Criteria Checklist

• Angular Tests: 200-300 tests, 100% pass rate, <15 min execution
• React Tests (Mocked API): 200-300 tests, 100% pass rate, <15 min execution
• React Tests (Real API): All tests pass against staging backend
• Feature Parity: Angular and React behave identically for all tested features
• No Flaky Tests: Tests pass consistently when rerun 3x
• Performance: No test takes >10 seconds
• Code Coverage: 80%+ for tested components

---

Timeline Summary

Phase	Tasks	Est. Time
1. Setup	Task 1	30 mins
2. Angular Tests	Tasks 2-8	4 hours
2. Angular Validation	Task 9	1 hour
3. React Setup	Task 10	30 mins
3. React Adaptation	Tasks 11-16	3 hours
3. React Validation (Mocked)	Task 17	1 hour
3. React Validation (Real)	Task 18	1 hour
4. CI/CD	Task 19	30 mins
Total		11-12 hours

Work continues until all success criteria are met.

---

Implementation Notes

Selector Strategy

If React app has different HTML structure, selectors will differ. Use data-testid attributes consistently across both apps:

// Both Angular and React must implement these selectors:
[data-testid="arrival-city-input"]
[data-testid="search-button"]
[data-testid="flight-result"]
// etc.

Fixture Updates

If real API returns different data structure, update fixtures in cypress/support/fixtures.ts to match.

Timing Adjustments

If React has slower load times:

1. Increase pageLoadTimeout in cypress.config.ts
2. Add explicit cy.wait() for specific API calls
3. Use cy.intercept(...).as('name') and cy.wait('@name')

Parallel Execution (Optional)

If <15 min time is not acceptable, enable parallel execution:

npm run cypress:run -- --parallel

Requires Cypress Dashboard account.

---

Key Files Reference

Angular Tests:

• ClientApp/cypress.config.ts - Configuration
• ClientApp/cypress/support/commands.ts - Custom commands (reused by React)
• ClientApp/cypress/support/fixtures.ts - Mock data (shared with React)
• ClientApp/cypress/integration/features/*.cy.ts - Feature test specs

React Tests:

• react-app/cypress.config.ts - Same as Angular, different baseUrl
• react-app/cypress/support/ - Copy of Angular support folder
• react-app/cypress/integration/features/*.cy.ts - Adapted feature tests

---

Execution Workflow (Recommended: Subagent-Driven Development)

Task 1 (Setup) → Validate
  ↓
Tasks 2-8 (Write Angular Tests) → Run in parallel via subagents
  ↓
Task 9 (Validate Angular) → All tests pass?
  ↓
Tasks 10-16 (React Setup + Adaptation) → Run in parallel
  ↓
Task 17 (Validate React/Mocked) → All tests pass?
  ↓
Task 18 (Validate React/Real API) → All tests pass?
  ↓
Task 19 (CI/CD) → Pipeline working?
  ↓
DONE: 200-300 tests passing on both Angular and React

Use superpowers:subagent-driven-development to parallelize tasks 2-8, 11-16.