Percy

Captures screenshots across multiple browsers and viewport sizes, then applies machine learning-based image diffing to detect visual regressions by comparing current renders against stored baselines. The system automatically identifies pixel-level changes, layout shifts, and rendering inconsistencies without requiring manual threshold tuning, using computer vision techniques to distinguish intentional design changes from unintended visual bugs.

Embeds visual testing into continuous integration pipelines by automatically capturing screenshots on each commit, comparing against baselines, and blocking deployments until visual changes are explicitly approved by team members. The system provides a web-based review interface where developers and designers can approve, reject, or request changes to visual diffs before code merges, creating a gated approval process that prevents unreviewed visual changes from reaching production.

Automatically captures screenshots of web applications across a matrix of browsers (Chrome, Firefox, Safari, Edge), viewport sizes (mobile, tablet, desktop), and device orientations (portrait, landscape) by leveraging BrowserStack's cloud browser infrastructure. The system renders pages in real browser engines rather than headless approximations, ensuring captured visuals accurately reflect how users will see the application across their actual devices and browsers.

Maintains a versioned history of visual baselines (approved screenshots) for each page/component, allowing teams to compare current renders against the most recent approved baseline or revert to previous versions if needed. The system automatically creates new baseline versions when visual changes are approved, tracks which commit/pull request introduced each baseline change, and enables rollback to previous baselines if a visual change is later deemed incorrect.

Generates visual diff reports that highlight pixel-level changes between baseline and current screenshots using color overlays, bounding boxes, and side-by-side comparisons. The system annotates diffs with metadata (change type, affected regions, severity) and provides interactive tools for zooming, panning, and toggling between baseline/current views to help reviewers quickly identify and understand visual changes.

Enables multiple team members to review visual changes asynchronously by adding comments, annotations, and feedback directly on diff reports. The system supports threaded discussions, @mentions for notifying specific reviewers, and resolution tracking to ensure all feedback is addressed before approval. Comments are persisted with the baseline snapshot, creating a permanent record of design decisions and review discussions.

Provides language-specific SDKs (JavaScript/Node.js, Python, Ruby, etc.) and a command-line interface that allow developers to integrate visual testing into their local development workflows and CI/CD pipelines. The SDKs handle screenshot capture, baseline comparison, and result reporting, while the CLI provides commands for uploading snapshots, comparing against baselines, and managing approvals without requiring manual web interface interaction.

Tracks visual testing metrics over time (number of visual changes per release, approval time, regression detection rate) and generates reports showing trends in visual quality and testing effectiveness. The system provides dashboards displaying which pages/components have the most visual changes, which team members approve the most changes, and how visual testing coverage has evolved across the codebase.

Connects visual testing results to design system documentation and design tools (Figma, Storybook, etc.) by embedding Percy snapshots in design system pages and linking visual changes to design specifications. The system allows designers to compare actual rendered components against design mockups and tracks when implementation diverges from design intent.