voidmatcha

e2e-skills — E2E Test Generation, Review, and Debugging

E2E tests that always pass are worse than no tests — they give false confidence while real bugs slip through. A Claude Code plugin that catches what CI misses: tests that pass but prove nothing, and failures that are hard to trace.

Four complementary skills that cover the full E2E lifecycle:

1. playwright-test-generator — generates Playwright E2E tests from scratch, from coverage gap analysis to passing, reviewed tests
2. e2e-reviewer — static analysis of existing Playwright, Cypress, and Puppeteer specs; finds 13 anti-patterns that make tests pass CI while missing real regressions
3. playwright-debugger — diagnoses failures from playwright-report/ and classifies root causes (flaky timing, selector drift, auth, environment mismatch, and more)
4. cypress-debugger — same for Cypress report files

Workflow

1. Run playwright-test-generator → generate with approval → auto-reviewed by e2e-reviewer
2. Generated tests fail → playwright-debugger invoked automatically after 3 fix attempts
3. Existing tests: e2e-reviewer → fix → re-run
4. Tests fail → playwright-debugger or cypress-debugger → fix → re-run

Installation

# npx skills (recommended)
npx skills install dididy/e2e-skills

# Claude Code plugin marketplace
/plugin marketplace add dididy/e2e-skills
/plugin install e2e-skills@dididy

# Clone directly
mkdir -p ~/.claude/skills
git clone https://github.com/dididy/e2e-skills.git ~/.claude/skills/e2e-skills

---

Skill 1: playwright-test-generator — Test Generation

Generates Playwright E2E tests from scratch for any project. Starts from coverage gap analysis, explores the live app via agent-browser tools, designs scenarios with your approval, and auto-reviews generated tests with e2e-reviewer.

When to Use

• You have a page or feature with no E2E coverage
• You want to bootstrap a test suite for an existing app
• You need to quickly add tests before a release

Usage

Generate playwright tests
Generate playwright tests for the login page
Write e2e tests for the settings page
Add playwright coverage for checkout flow

Pipeline

Step 1: Detect environment (config, baseURL, test dir, POM structure)
Step 2: Coverage gap analysis → user picks target
Step 3: Live browser exploration via agent-browser tools
Step 4: Scenario design → Plan Mode → user approves
Step 5: Code generation (POM + spec or flat spec, auto-detected)
Step 6: YAGNI audit + e2e-reviewer quality gate
Step 7: TS compile + test run → playwright-debugger on failure

Key Behaviors

• Structure-aware: detects POM pattern and matches project conventions
• No hallucinated selectors: explores real DOM before writing any code
• Approval gate: shows scenario plan and locator table before generating code
• Quality loop: YAGNI audit removes unused locators; e2e-reviewer catches P0 issues before you ever run the tests
• Self-healing: 3 auto-fix attempts on failure, then hands off to playwright-debugger

---

Skill 2: e2e-reviewer — Quality Review

Catches issues in E2E tests that pass CI but fail to catch real regressions.

When to Use

• Your tests always pass but bugs still slip through to production
• Tests pass CI but you suspect they miss real regressions
• Your test suite is fragile — tests break on every UI change
• You want to audit test quality before a release or code review
• You're reviewing Playwright, Cypress, or Puppeteer specs

Usage

Review my E2E tests
Audit the spec files in tests/
Find weak tests in my test suite
My tests always pass but miss bugs
Tests pass CI but miss regressions
My tests are fragile and break on every UI change
We have coverage but bugs still slip through

13 Patterns Detected

Tier 1 — P0/P1 (always check)