Percy is a visual testing and review tool integrated within BrowserStack that helps developers and QA teams identify visual changes in their applications. It automatically captures screenshots and compares them against previous versions, highlighting any visual differences to ensure that new code changes don’t unintentionally alter the user interface. Percy is particularly useful for maintaining visual consistency across web applications, reducing the risk of visual regressions.
Key Features:
Automated Visual Testing: Percy takes automated snapshots of web pages or components and compares them with the baseline images to detect visual differences.
Cross-Browser and Cross-Device Testing: With BrowserStack’s infrastructure, Percy can test across multiple browsers (Chrome, Firefox, Safari, etc.) and devices (desktop, mobile) to ensure the UI is consistent across different environments.
Detailed Visual Review: Percy highlights the exact pixels where differences occur, providing a side-by-side comparison with the baseline. This makes it easy for developers to review and approve or reject visual changes.
Efficient Review Workflow: Percy integrates with collaboration tools like GitHub, GitLab, and Slack, notifying teams of visual changes in pull requests or commits.
Baseline Management: Percy allows you to set specific baselines for visual tests, defining what the “correct” version of the UI should look like. You can approve changes manually or set them to update automatically once reviewed.
DOM and CSS Snapshot Analysis: Percy captures the entire DOM and CSS of a page, allowing for more consistent visual testing by removing dependency on network calls and reducing flakiness.
Benefits: Catch Visual Bugs Early, Enhanced Quality Assurance, Improved Team Collaboration, Reduced Manual Visual Testing