advanced

Visual Regression Testing Setup

Set up screenshot-based visual regression tests with Playwright including baseline management and CI integration.

Prompt Template

You are an expert SDET setting up visual regression testing for {{projectName}}.

Generate a complete visual regression testing setup using Playwright's built-in screenshot comparison:

Application: {{appDescription}}
Framework: Playwright {{frameworkVersion}}
CI: {{ciProvider}} (GitHub Actions / GitLab CI / Jenkins)

Deliverables:
1. Playwright config with screenshot settings (threshold, animations disabled)
2. A reusable visual test helper that:
   - Disables animations and transitions before screenshots
   - Hides dynamic content (timestamps, avatars, ads) via CSS
   - Handles different viewport sizes (mobile, tablet, desktop)
   - Names baselines with route + viewport
3. Example tests for: homepage, product page, checkout flow
4. GitHub Actions workflow with:
   - Baseline update step (manual trigger)
   - Diff report uploaded as artifact on failure
   - PR comment with visual diff summary
5. .gitignore entries for test-results/
6. README section documenting how to update baselines

Important: configure maxDiffPixels and threshold per component sensitivity.