Product Overview of Percy
Percy is an all-in-one visual testing and review platform designed to help teams automate visual testing, ensuring that web applications maintain a flawless and consistent user interface across various devices and browsers.
What Percy Does
Percy automates the process of detecting visual bugs and regressions in web applications. It captures screenshots of UI components, compares them against established baselines, and highlights any visual changes. This approach enables teams to identify and address visual discrepancies early in the development process, thereby enhancing the overall quality and consistency of the user experience.
Key Features and Functionality
Integration with CI/CD Pipelines
Percy seamlessly integrates into existing Continuous Integration/Continuous Deployment (CI/CD) pipelines, allowing teams to run visual tests with every commit. This integration supports popular tools and services such as GitHub, GitLab, Jenkins, and more.
Automated Visual Testing
Percy captures UI snapshots and compares them against baselines to detect visual changes. It uses advanced visual comparison techniques and AI processing to exclude false positives and provide relevant visual change reports. This process ensures that any unintended visual regressions are identified and addressed promptly.
Cross-Browser and Cross-Device Testing
Percy tests visual changes across over 20,000 real devices and browsers, including Chrome, Firefox, Edge, and Safari. It also supports testing at different width breakpoints to ensure compatibility with various screen resolutions.
Efficient Review and Approval Process
The platform streamlines the review process by organizing visual changes, filtering out noise, and updating teams with comments and notifications. Teams can approve individual snapshots, entire snapshot groups, or whole builds, and these approvals can automatically update the status of pull requests or commits.
Project Management
Percy allows users to create unlimited projects, each serving as an organizational structure for visual tests. Projects can be configured to set up browsers, visibility settings, and automatic branch approvals. API keys are project-specific and write-only, ensuring secure and controlled access.
Advanced Rendering and Asset Handling
Percy captures DOM snapshots and page assets (like CSS and images) rather than accepting pre-captured images. It handles animations, dynamic data, and third-party fonts to ensure stable and accurate screenshots. However, it does not capture authenticated assets or assets hosted on different domains.
Collaboration and Workflow
Percy enhances collaboration between developers, designers, and QA teams by providing a visual representation of changes. It supports various end-to-end testing frameworks such as Playwright, Cypress, TestCafe, and Selenium, making it versatile and adaptable to different development environments.
Benefits
- Consistency: Ensures a consistent user experience by identifying visual discrepancies early.
- Efficiency: Reduces the time and effort required to manually spot visual regressions.
- Confidence: Allows teams to deploy code changes with confidence, knowing that visual regressions have been identified and addressed.
- Scalability: Tests on a large scale using real devices and advanced parallelization techniques.
By leveraging Percy, teams can ship software faster and with greater confidence in the visual integrity of their applications.