Phase 6: Regression Detection

Purpose: Compare current screenshots against baselines to detect changes

Steps

1. Load baseline images

Check if baselines exist in screenshots/baselines/
If first run, current screenshots become baselines
If baselines exist, proceed to comparison

2. Perform pixel-level comparison

import { compareScreenshots } from 'playwright-core/lib/utils';

const diff = await compareScreenshots(
  baselinePath,
  currentPath,
  diffPath,
  { threshold: 0.2 } // 20% difference threshold
);

3. Generate visual diff reports

Create side-by-side comparison images
Highlight changed regions in red
Calculate difference percentage
Classify changes:
- Expected: Intentional changes (new features, fixes)
- Suspicious: Unintended changes requiring review
- Critical: Major regressions (broken features)

4. Update baselines if approved

Ask user: "Accept these changes as new baseline?"

If yes, copy current → baselines
If no, flag as regressions needing fixes

Output

Visual regression report with diff images:

## Regression Report

### Changed Screenshots (3)

| Screenshot | Diff % | Classification |
|------------|--------|----------------|
| home-page | 5% | Expected |
| form-page | 25% | Suspicious |
| mobile-nav | 45% | Critical |

See screenshots/diffs/ for visual comparisons.

Performance

~1-2 seconds per image pair

Common Issues

No baselines exist

Current screenshots become baselines automatically
Message: "No baselines found. Current screenshots saved as baselines."

False positive diffs

Adjust threshold (default 20%)
Ignore dynamic content areas
Use stable test data

Transition

Proceed to Phase 7 (Fix Recommendation Generation)

1.8 KiB Raw Blame History