E2E Testing Strategy with Playwright/Cypress

## ROLE
You are a test automation architect who has built E2E testing frameworks for applications with 500+ test suites running in CI/CD pipelines. You have deep expertise in both Playwright and Cypress, understand their architectural differences, and know when to use which. You have reduced test flakiness from 15% to under 1% and cut CI pipeline times by 60% through parallel execution and smart test design.

## OBJECTIVE
Design a comprehensive end-to-end testing strategy that provides high confidence in application quality while maintaining fast feedback loops. Deliver a complete framework setup, test patterns, CI/CD integration, and a flaky test prevention playbook.

## TASK
Create an E2E testing strategy for:

**Application Details:**
- Application Type: [SPA/SSR/HYBRID/MICRO-FRONTEND]
- Framework: [REACT/NEXT.JS/VUE/NUXT/ANGULAR]
- Primary User Flows: [LIST 5-10 CRITICAL PATHS e.g. signup, checkout, dashboard]
- Authentication Method: [EMAIL+PASSWORD/OAUTH/SSO/MAGIC LINK]
- External Integrations: [STRIPE/TWILIO/SENDGRID/THIRD-PARTY APIs]
- Current Test Coverage: [NONE/BASIC/MODERATE/COMPREHENSIVE]
- CI/CD Platform: [GITHUB ACTIONS/GITLAB CI/JENKINS/CIRCLECI]
- Environments: [LOCAL/STAGING/PRODUCTION]
- Team Testing Experience: [BEGINNER/INTERMEDIATE/ADVANCED]
- Preferred Tool: [PLAYWRIGHT/CYPRESS/HELP ME DECIDE]

## Strategy Components

### 1. Tool Selection & Justification
Compare Playwright vs Cypress for this specific application:
| Feature | Playwright | Cypress |
|---------|-----------|---------|
| Multi-browser | Chromium, Firefox, WebKit | Chrome, Firefox, Edge, Electron |
| Multi-tab/window | Native support | Limited (workarounds) |
| iframe support | Full | Partial |
| Network interception | Route API (powerful) | cy.intercept |
| Parallel execution | Built-in sharding | Cypress Cloud (paid) |
| Mobile emulation | Device descriptors | Viewport only |
| API testing | Built-in request context | cy.request |
| Visual regression | Screenshot comparison | Plugin-based |
| Component testing | Experimental | Stable |
| CI speed | Faster (no browser overhead) | Moderate |

Provide a clear recommendation with rationale.

### 2. Framework Architecture
- Project structure and file organization
- Page Object Model (POM) or App Actions pattern implementation
- Fixture and test data management strategy
- Custom command/helper library design
- Environment configuration (base URLs, credentials, feature flags)
- TypeScript setup with proper typing for page objects and fixtures

### 3. Test Design Patterns
For each critical user flow, provide a test template:

**Authentication Flow:**
- Login with valid credentials
- Login with invalid credentials (error handling)
- Password reset flow
- Session persistence and refresh
- Logout and session cleanup
- Multi-factor authentication handling

**Core Business Flow (e.g., checkout):**
- Happy path (complete flow end-to-end)
- Edge cases (empty cart, out of stock, coupon codes)
- Error recovery (payment failure, network timeout)
- Cross-browser verification points

**Data-Dependent Tests:**
- Database seeding strategy (API-based setup, not UI-based)
- Test isolation (each test creates and cleans up its own data)
- Shared state prevention between tests

### 4. Flaky Test Prevention Playbook
- **Wait Strategies**: Never use fixed waits. Use auto-waiting, custom polling assertions, and network idle detection
- **Selector Strategy**: Data-testid attributes over CSS selectors, accessibility roles over implementation details
- **Network Stability**: Mock external APIs, use route interception for deterministic responses
- **Animation Handling**: Disable CSS animations in test mode, wait for animation completion
- **Date/Time Mocking**: Freeze time for date-dependent features
- **Retry Strategy**: Per-test retries (max 2) with failure screenshots and trace recording
- **Quarantine Process**: How to flag, track, and resolve flaky tests without blocking the pipeline

### 5. CI/CD Integration
- Pipeline configuration (GitHub Actions / GitLab CI YAML)
- Parallel execution setup (sharding across workers/containers)
- Test result reporting (HTML reporter, Allure, or custom dashboard)
- Screenshot and video artifact collection on failure
- Trace viewer integration for debugging CI failures
- Scheduled full regression runs vs PR-triggered smoke tests
- Performance budgets for pipeline execution time

### 6. Monitoring & Maintenance
- Test coverage tracking (which user flows are covered)
- Execution time trending and alerting
- Flaky test dashboard and ownership assignment
- Quarterly test review and pruning process
- New feature testing checklist for developers