E2E Testing

Overview

This skill automates the complete Playwright e2e testing lifecycle with LLM-powered visual debugging. It detects your app type, installs Playwright, generates tests, captures screenshots, analyzes for UI bugs, and produces fix recommendations with file paths and line numbers.

Key Capabilities:

• •Zero-setup automation with multi-framework support
• •Visual debugging with screenshot capture and LLM analysis
• •Regression testing with baseline comparison
• •Actionable fix recommendations with file:line references
• •CI/CD ready test suite export

When to Use This Skill

Trigger Phrases:

• •"set up playwright testing for my app"
• •"help me debug UI issues with screenshots"
• •"create e2e tests with visual regression"
• •"analyze my app's UI with screenshots"
• •"generate playwright tests for [my app]"

Use Cases:

• •Setting up Playwright testing from scratch
• •Debugging visual/UI bugs hard to describe in text
• •Creating screenshot-based regression testing
• •Generating e2e test suites for new applications
• •Identifying accessibility issues through visual inspection

NOT for:

• •Unit testing or component testing (use Vitest/Jest)
• •API-only testing without UI
• •Performance/load testing
• •Mobile native app testing (use Detox/Appium)

Response Style

• •Automated: Execute entire workflow with minimal user intervention
• •Informative: Clear progress updates at each phase
• •Visual: Always capture and analyze screenshots
• •Actionable: Generate specific fixes with file paths and line numbers

Quick Decision Matrix

Workflow Overview

Phase 1: Application Discovery

Detect app type, framework versions, and optimal configuration. → Details: workflow/phase-1-discovery.md

Phase 2: Playwright Setup

Install Playwright and generate configuration. → Details: workflow/phase-2-setup.md

Phase 2.5: Pre-flight Health Check

Validate app loads correctly before full test suite. → Details: workflow/phase-2.5-preflight.md

Phase 3: Test Generation

Create screenshot-enabled tests for critical workflows. → Details: workflow/phase-3-generation.md

Phase 4: Screenshot Capture

Run tests and capture visual data. → Details: workflow/phase-4-capture.md

Phase 5: Visual Analysis

LLM-powered analysis to identify UI bugs. → Details: workflow/phase-5-analysis.md

Phase 6: Regression Detection

Compare screenshots against baselines. → Details: workflow/phase-6-regression.md

Phase 7: Fix Generation

Map issues to source code with actionable fixes. → Details: workflow/phase-7-fixes.md

Phase 8: Test Suite Export

Package production-ready test suite. → Details: workflow/phase-8-export.md

Important Reminders

1. •Capture before AND after interactions - Provides context for visual debugging
2. •Use semantic selectors - Prefer getByRole, getByLabel over CSS selectors
3. •Baseline management is critical - Keep in sync with intentional UI changes
4. •LLM analysis is supplementary - Use alongside automated assertions
5. •Test critical paths first - Focus on user journeys that matter most (80/20 rule)
6. •Screenshots are large - Consider .gitignore for screenshots/, use CI artifacts
7. •Run tests in CI - Catch visual regressions before production
8. •Update baselines deliberately - Review diffs carefully before accepting

Limitations

• •Requires Node.js >= 16
• •Browser download needs ~500MB disk space
• •Screenshot comparison requires consistent rendering (may vary across OS)
• •LLM analysis adds ~5-10 seconds per screenshot
• •Not suitable for testing behind VPNs without additional configuration

Reference Materials

Success Criteria

• • Playwright installed with browsers
• • Configuration generated for app type
• • Test suite created (3-5 critical journey tests)
• • Screenshots captured and organized
• • Visual analysis completed with issue categorization
• • Regression comparison performed
• • Fix recommendations generated
• • Test suite exported with documentation
• • All tests executable via npm run test:e2e

Total time: ~5-8 minutes (excluding one-time Playwright install)