Visual Regression Testing (VRT)
Definition
Automated testing that detects unintended visual changes by comparing screenshots of UI states across code changes. Captures a 'baseline' screenshot, then after code changes captures a 'current' screenshot and diffs the two — flagging pixel-level or semantic differences. Three tiers: (1) Playwright built-in (free, pixelmatch, toHaveScreenshot() API, baselines in Git — covers 80% of use cases); (2) Cloud services (Percy by BrowserStack, Chromatic — add cross-browser rendering, AI false-positive filtering, team collaboration); (3) AI-native (Applitools Eyes — semantic visual understanding, recognizes dynamic content, self-healing selectors). VRT is the verification layer that catches design drift that unit tests and integration tests miss.
Builder Context
VRT is the automated safety net for design consistency in agentic builds. Start with Playwright's built-in VRT (free, 5 minutes to set up, toHaveScreenshot() in your tests). Run it in CI — builds fail if visual changes exceed your threshold. When you outgrow it (need cross-browser, team collaboration, smarter diffs), add Percy or Chromatic. For agent-specific workflows, the Playwright MCP + Pixelmatch loop creates an iterative design implementation cycle: agent codes → screenshot → diff → agent refines → repeat until diff is below threshold. Frontend Review MCP adds a semantic 'does this look right?' check on top. The key: VRT baselines should be captured BEFORE any agentic modification session and compared AFTER — this is your design consistency verification gate.