e2e-testing-generator_skill

Overview

This skill generates production-ready end-to-end test suites using Playwright, Cypress, or Selenium, including page objects, accessibility checks, visual regression, and cross-browser configuration. It produces framework-specific configs, reusable page models, and CI pipeline templates so teams can run deterministic tests locally and in CI. Output is scoped by tier (smoke, critical-path, full-regression) to match token and complexity budgets.

How this skill works

Provide the framework, application type, test scope, features, and desired WCAG level. The generator validates inputs and source freshness, selects the recommended framework, and emits a scaffold with config files, page object classes, sample tests, and optional visual/a11y integrations. For advanced tiers it also adds CI pipeline files, parallelization strategies, artifact storage, and flaky-test mitigation patterns.

When to use it

• You need a maintainable e2e suite for a web app or SPA with page object pattern.
• You require automated accessibility checks (WCAG A/AA/AAA) in test runs.
• You want visual regression baselines and pixel-diff comparisons for UI changes.
• You need cross-browser testing across Chromium, Firefox, and WebKit/Safari.
• You are preparing tests for CI with parallel execution and artifact retention.

Best practices

• Default to Playwright for modern SPAs; choose Cypress for component-heavy developer DX and Selenium for legacy browsers.
• Use data-testid locators and a BasePage with safe wait strategies instead of hard sleeps.
• Keep no secrets in tests; use environment variables and .env with .gitignore.
• Run accessibility checks on critical flows and fail builds on new critical violations.
• Store screenshots/videos and JUnit results as CI artifacts for at least 30 days.

Example use cases

• Quick smoke suite (Tier 1): Playwright config, base page object, and 3 smoke tests covering login → dashboard → logout.
• Critical-path suite (Tier 2): 10–20 tests with axe-core integration, visual regression baselines, and multi-browser matrix.
• Full-regression CI (Tier 3): GitHub Actions pipeline, Dockerized test runner, sharded workers, and flaky-test retry policy.
• Component visual testing: Cypress snapshots or Playwright screenshot comparisons for UI library regressions.
• Legacy browser validation: Selenium WebDriver suite for IE/older enterprise browsers with grid configuration.