/e2e-setup

End-to-End Testing Setup Command

Configure end-to-end testing suite

Instructions

Follow this systematic approach to implement E2E testing: **$ARGUMENTS**

1. **Technology Stack Assessment**

• Identify the application type (web app, mobile app, API service)
• Review existing testing infrastructure
• Determine target browsers and devices
• Assess current deployment and staging environments

2. **E2E Framework Selection**

• Choose appropriate E2E testing framework based on stack:
• **Playwright**: Modern, fast, supports multiple browsers
• **Cypress**: Developer-friendly, great debugging tools
• **Selenium WebDriver**: Cross-browser, mature ecosystem
• **Puppeteer**: Chrome-focused, good for performance testing
• **TestCafe**: No WebDriver needed, easy setup
• Consider team expertise and project requirements

3. **Test Environment Setup**

• Set up dedicated testing environments (staging, QA)
• Configure test databases with sample data
• Set up environment variables and configuration
• Ensure environment isolation and reproducibility

4. **Framework Installation and Configuration**

**For Playwright:**

   npm install -D @playwright/test
   npx playwright install
   npx playwright codegen # Record tests

**For Cypress:**

   npm install -D cypress
   npx cypress open

**For Selenium:**

   npm install -D selenium-webdriver
   # Install browser drivers

5. **Test Structure Organization**

• Create logical test folder structure:

     e2e/
     ├── tests/
     │   ├── auth/
     │   ├── user-flows/
     │   └── api/
     ├── fixtures/
     ├── support/
     │   ├── commands/
     │   └── page-objects/
     └── config/

• Organize tests by feature or user journey
• Separate API tests from UI tests

6. **Page Object Model Implementation**

• Create page object classes for better maintainability
• Encapsulate element selectors and interactions
• Implement reusable methods for common actions
• Follow single responsibility principle for page objects

**Example Page Object:**

   class LoginPage {
     constructor(page) {
       this.page = page;
       this.emailInput = page.locator('#email');
       this.passwordInput = page.locator('#password');
       this.loginButton = page.locator('#login-btn');
     }

     async login(email, password) {
       await this.emailInput.fill(email);
       await this.passwordInput.fill(password);
       await this.loginButton.click();
     }
   }

7. **Test Data Management**

• Create test fixtures and sample data
• Implement data factories for dynamic test data
• Set up database seeding for consistent test states
• Use environment-specific test data
• Implement test data cleanup strategies

8. **Core User Journey Testing**

• Implement critical user flows:
• User registration and authentication
• Main application workflows
• Payment and transaction flows
• Search and filtering functionality
• Form submissions and validations

9. **Cross-Browser Testing Setup**

• Configure testing across multiple browsers
• Set up browser-specific configurations
• Implement responsive design testing
• Test on different viewport sizes

**Playwright Browser Configuration:**

   module.exports = {
     projects: [
       { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
       { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
       { name: 'webkit', use: { ...devices['Desktop Safari'] } },
       { name: 'mobile', use: { ...devices['iPhone 12'] } },
     ],
   };

10. **API Testing Integration**

• Test API endpoints alongside UI tests
• Implement API request/response validation
• Test authentication and authorization
• Verify data consistency between API and UI

11. **Visual Testing Setup**

• Implement screenshot comparison testing
• Set up visual regression testing
• Configure tolerance levels for visual changes
• Organize visual baselines and updates

12. **Test Utilities and Helpers**

• Create custom commands and utilities
• Implement common assertion helpers
• Set up authentication helpers
• Create database and state management utilities

13. **Error Handling and Debugging**

• Configure proper error reporting and screenshots
• Set up video recording for failed tests
• Implement retry mechanisms for flaky tests
• Create debugging tools and helpers

14. **CI/CD Integration**

• Configure E2E tests in CI/CD pipeline
• Set up parallel test execution
• Implement proper test reporting
• Configure test environment provisioning

**GitHub Actions Example:**

   - name: Run Playwright tests
     run: npx playwright test
   - uses: actions/upload-artifact@v3
     if: always()
     with:
       name: playwright-report
       path: playwright-report/

15. **Performance Testing Integration**

• Add performance assertions to E2E tests
• Monitor page load times and metrics
• Test under different network conditions
• Implement lighthouse audits integration

16. **Accessibility Testing**

• Integrate accessibility testing tools (axe-core)
• Test keyboard navigation flows
• Verify screen reader compatibility
• Check color contrast and WCAG compliance

17. **Mobile Testing Setup**

• Configure mobile device emulation
• Test responsive design breakpoints
• Implement touch gesture testing
• Test mobile-specific features

18. **Reporting and Monitoring**

• Set up comprehensive test reporting
• Configure test result notifications
• Implement test metrics and analytics
• Create dashboards for test health monitoring

19. **Test Maintenance Strategy**

• Implement test stability monitoring
• Set up automatic test updates for UI changes
• Create test revi