Visual Regression Tester

Overview

Detect unintended visual changes in UI components by capturing screenshots and comparing them pixel-by-pixel against approved baselines. Supports Playwright visual comparisons, Percy, Chromatic, BackstopJS, and reg-suit.

Prerequisites

• Browser automation tool installed (Playwright, Puppeteer, or Cypress)
• Visual regression library configured (Playwright toHaveScreenshot, Percy, Chromatic, or BackstopJS)
• Baseline screenshots committed to version control or stored in a cloud service
• Storybook or component playground running for isolated component captures (optional)
• Consistent rendering environment (Docker or CI with fixed OS/fonts/GPU settings)

Instructions

1. Identify all UI components and pages requiring visual coverage using Glob to scan component directories and route definitions.
2. Create a visual test file for each component or page:
   • Navigate to the component URL or Storybook story.
   • Wait for all network requests, animations, and lazy-loaded images to complete.