testing-visual-regression

# 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. - Set a consistent viewport size (e.g., 1280x720 for desktop, 375x812 for mobile). 3. Capture screenshots with deterministic settings: - Disable animations and transitions (`* { animation: none !important; transition: none !important; }`). - Mask dynamic content (timestamps, random avatars, ads) with CSS overlays. - Use `fullPage: true` for scrollable pages. 4. Compare captured screenshots against baselines: - Configure pixel dif...