End-to-End Testing Framework Generator

Purpose & When-To-Use

Trigger conditions:

• You need a complete e2e test suite for a web application or SPA
• You want page object pattern implementation for maintainability
• You require accessibility validation (WCAG A/AA/AAA) in automated tests
• You need cross-browser testing configuration (Chrome, Firefox, Safari, Edge)
• You're setting up visual regression testing for UI components
• You want parallel test execution in CI/CD pipelines

Scope: Generates production-ready test suites with framework-specific best practices, reusable page models, accessibility checks, and CI integration. Supports Playwright (recommended), Cypress, and Selenium WebDriver.

Not for: Unit tests, API tests (use dedicated skills), performance testing, or load testing.

Pre-Checks

Required before execution:

1. Time normalization: Compute NOW_ET using NIST/time.gov semantics (America/New_York, ISO-8601)
2. Input validation:
   • framework must be one of: playwright, cypress, selenium
   • application_type must be one of: web, spa, mobile-web
   • test_scope must be one of: smoke, critical-path, full-regression
   • features array must not be empty (if provided)
   • accessibility_level valid for WCAG standards
3. Source freshness checks:
   • Playwright docs version ≥1.40 (accessed NOW_ET)
   • Cypress docs version ≥13.x (accessed NOW_ET)
   • Selenium WebDriver version ≥4.x (accessed NOW_ET)
   • axe-core version ≥4.8 (accessed NOW_ET)
4. Framework availability: Verify target framework installation instructions are current

Abort if: Framework choice conflicts with application_type (e.g., Selenium for component testing), or accessibility_level requirements exceed framework capabilities.

Procedure

Tier 1: Basic E2E Test Suite (≤2k tokens)

Fast path for 80% of common cases:

1. Framework selection:

   • Playwright: Default for modern web/SPA with built-in cross-browser support
   • Cypress: For component testing and developer-friendly debugging
   • Selenium: For legacy browser support or existing infrastructure

2. Generate base configuration:

   • Framework config file (playwright.config.ts, cypress.config.js, or wdio.conf.js)
   • Base URL, timeouts, retry logic
   • Browser launch options

3. Create page object foundation:

   • Base Page class with common methods (click, type, waitFor, navigate)
   • Locator strategies (data-testid preferred, CSS fallback)
   • Example page object for login/authentication

4. Generate smoke test:

   • Single critical path test (e.g., login → dashboard → logout)
   • Uses page objects
   • Basic assertions (visible, text content, navigation)

Output: Working test suite with 1-3 smoke tests, reusable page object pattern, runnable locally.

Tier 2: Advanced Patterns (≤6k tokens)

Extended validation with accessibility and visual regression:

1. Expand page object library:

   • Create page objects for all major application sections
   • Add custom commands/helpers (e.g., loginAsAdmin(), createEntity())
   • Implement waiting strategies (network idle, specific elements)

2. Accessibility integration:

   • Install and configure axe-core or @axe-core/playwright
   • Add accessibility checks to critical user flows
   • Configure WCAG level (A, AA, AAA) and violation reporting
   • Example: await expect(page).toPassA11yChecks({ wcagLevel: 'AA' })

3. Visual regression setup:

   • Configure screenshot comparison (Percy, Playwright screenshots, Cypress snapshots)
   • Define baseline images for key UI states
   • Set pixel diff thresholds and ignore regions

4. Cross-browser testing:

   • Configure browser matrix (Chromium, Firefox, WebKit/Safari)
   • Mobile viewport emulation for responsive testing
   • Device-specific test scenarios

5. Test data management:

   • Fixture files or API-based test data setup
   • Cleanup strategies (database resets, API teardown)
   • Isolated test execution (no shared state)

Output: Comprehensive test suite with 10-20 tests covering critical paths, accessibility validation, visual regression, and multi-browser support.

Tier 3: CI Integration & Parallel Execution (≤12k tokens)

Deep dive for production deployment:

1. CI/CD pipeline configuration:

   • GitHub Actions, GitLab CI, CircleCI, or Jenkins pipeline
   • Docker container setup for consistent test environments
   • Artifact storage (screenshots, videos, traces)
   • Test result reporting (JUnit XML, HTML reports)

2. Parallelization strategy:

   • Playwright: Shard tests across workers (--shard=1/4)
   • Cypress: Parallel execution with Cypress Dashboard or split by spec
   • Selenium: Grid configuration for distributed execution

3. Flaky test mitigation:

   • Retry logic configuration (max 2-3 retries)
   • Wait strategy refinement (avoid hard sleeps)
   • Network stubbing/mocking for deterministic tests
   • Screenshot/video on failure for debugging

4. Advanced accessibility testing:

   • Full page scans + component-level checks
   • Custom axe rules for organization-specific requirements
   • Accessibility regression tracking (fail on new violations)

5. Monitoring and alerting:

   • Test duration trending
   • Failure rate dashboards
   • Slack/email notifications for critical test failures

Output: Production-ready test suite with CI integration, parallel execution, comprehensive reporting, and flaky test handling. Ready for continuous deployment pipelines.

Decision Rules

Framework selection matrix:

Test scope thresholds:

• Smoke: 3-5 tests covering authentication and primary user flow (T1 sufficient)
• Critical-path: 10-20 tests covering all major features and user journeys (T2 required)
• Full-regression: 50+ tests with edge cases, error states, and accessibility (T3 required)

Accessibility validation thresholds:

• WCAG A: Basic compliance (keyboard nav, alt text) - 15 rules
• WCAG AA: Standard compliance (color contrast, labels) - 38 rules
• WCAG AAA: Enhanced compliance (extended contrast, minimal flashing) - 61 rules

Abort conditions:

• Framework does not support required features (e.g., Cypress for multi-tab flows)
• Application requires authentication flows that cannot be automated safely
• Visual regression baseline images cannot be generated (missing UI states)

Output Contract

Required fields:

{
  test_suite: {
    files: string[],              // Array of generated test file paths
    framework_config: object,     // Framework-specific config object
    test_count: number,           // Total number of test scenarios
    coverage_areas: string[]      // List of tested features
  },
  page_objects: {
    models: Array<{               // Page object classes
      name: string,
      path: string,
      methods: string[]
    }>,
    helpers: Array<{              // Utility functions
      name: string,
      description: string
    }>
  },
  ci_config: {
    pipeline_file: string,        // Path to CI config (e.g., .github/workflows/e2e.yml)
    parallelization_strategy: string,  // "sharding" | "splitting" | "grid"
    browser_matrix: string[],     // ["chromium", "firefox", "webkit"]
    estimated_duration_minutes: number
  },
  a11y_checks: {
    rules: Array<{                // axe-core rules configuration
      id: string,
      impact: "critical" | "serious" | "moderate" | "minor"
    }>,
    compliance_level: "wcag-a" | "wcag-aa" | "wcag-aaa",
    reporter: string,             // HTML, JSON, or custom
    violation_handling: "fail" | "warn" | "log"
  }
}

Optional fields:

• visual_regression: Screenshot comparison configuration
• test_data: Fixture file paths and seeding strategies
• environment_config: Environment-specific variables (staging, production)

Examples

Example 1: Playwright Admin Dashboard Test (≤30 lines)

import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/login-page';
import { DashboardPage } from '../pages/dashboard-page';
import { injectAxe, checkA11y } from 'axe-playwright';
test.describe('Admin Dashboard E2E', () => {
  test('authenticated user can view and create entities with WCAG AA compliance', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.navigate();
    await loginPage.login('admin@example.com', process.env.ADMIN_PASSWORD);
    const dashboard = new DashboardPage(page);
    await expect(dashboard.welcomeMessage).toContainText('Welcome, Admin');
    await injectAxe(page);
    await checkA11y(page, null, { detailedReport: true, wcagLevel: 'AA' });
    await dashboard.clickCreateButton();
    await dashboard.fillEntityForm({ name: 'Test Entity', type: 'Standard' });
    await dashboard.submitForm();
    await expect(dashboard.successToast).toBeVisible();
    await expect(dashboard.entityList).toContainText('Test Entity');
    await expect(page).toHaveScreenshot('dashboard-with-entity.png');
  });
});

See /skills/e2e-testing-generator/examples/ for additional patterns and page object implementations.

Quality Gates

Token budgets (enforced):

• T1: ≤2k tokens — Basic test suite with page objects (smoke tests)
• T2: ≤6k tokens — Accessibility, visual regression, cross-browser (critical-path)
• T3: ≤12k tokens — CI integration, parallelization, monitoring (full-regression)

Safety checks:

• No hardcoded credentials in test files (use environment variables)
• No secrets in version control (use .env files with .gitignore)
• Page objects must not expose internal DOM structure to tests
• Accessibility violations must be surfaced in test reports

Auditability requirements:

• All generated tests must have descriptive names
• Test failures must include screenshots and/or videos
• CI pipeline must store artifacts for 30+ days
• Test execution traces must be available for debugging

Determinism checks:

• No cy.wait(5000) or page.waitForTimeout(5000) without justification
• Prefer explicit waits (element visibility, network idle) over arbitrary timeouts
• Flaky test retry limit: max 3 attempts before failing the build
• Visual regression thresholds: ≤0.1% pixel difference for exact matches

Performance criteria:

• Smoke suite must complete in ≤5 minutes
• Critical-path suite must complete in ≤20 minutes
• Full regression suite must complete in ≤60 minutes with parallelization

Resources

Official Documentation:

• Playwright API Reference (accessed 2025-10-26T02:31:27-0400)
• Cypress API Commands (accessed 2025-10-26T02:31:27-0400)
• Selenium WebDriver W3C Standard (accessed 2025-10-26T02:31:27-0400)
• axe-core Rules and Impact Levels (accessed 2025-10-26T02:31:27-0400)

Best Practices and Patterns:

• Page Object Model Pattern (Martin Fowler) (accessed 2025-10-26T02:31:27-0400)
• Playwright Best Practices - Locators (accessed 2025-10-26T02:31:27-0400)
• Cypress Network Stubbing Guide (accessed 2025-10-26T02:31:27-0400)
• WCAG 2.1 Quick Reference (accessed 2025-10-26T02:31:27-0400)

CI/CD Integration Examples:

• Playwright GitHub Actions Setup (accessed 2025-10-26T02:31:27-0400)
• Cypress Parallelization Guide (accessed 2025-10-26T02:31:27-0400)
• Selenium Grid 4 Configuration (accessed 2025-10-26T02:31:27-0400)

Visual Regression Tools:

• Percy Visual Testing (accessed 2025-10-26T02:31:27-0400)
• Playwright Screenshots and Visual Comparisons (accessed 2025-10-26T02:31:27-0400)