Skip to main content

Visual Testing with Percy

Learn how visual testing with Percy works and why you should choose Percy

Visual testing is a software testing technique that aims to verify the visual aspects of a user interface (UI). To ensure that no unintended visual regressions or discrepancies occur, you need to compare the visual appearance of an application before and after making changes to the application.

Percy is an all-in-one visual testing and review platform. We help teams automate their visual QA process to catch visual bugs and gain insights into UI changes on each commit. Our goal is to give you and your team confidence in the visual integrity of your UI every time you deploy.

Use Percy for visual testing of web applications on desktop and mobile browsers. Check out the video below to get an overview of visual testing with Percy:

How it works

Percy handles everything, from capturing and rendering screenshots, to detecting and notifying your team for visual changes.

Step 1: Integrate Percy into your stack

Integrate the Percy SDK into your web application. It supports various programming languages and testing frameworks, so you can choose the one that suits your project.

Step 2: Run visual tests

Write or modify your existing tests to include Percy commands to capture screenshots or render snapshots of specific UI components or pages in your application. Set the PERCY_TOKEN environment variable in your CI environment and run the visual tests.

Regardless of how you run your visual tests, Percy handles all asset discovery, rendering, and visual change detection. When you push changes to your codebase, Percy captures DOM snapshots, renders screenshots, and compares them to previously generated screenshots to see if any pixels have changed. Screenshots for individual components and pages are grouped into snapshots, and snapshots are grouped into builds to be reviewed.

Percy build dashboard for web application

Percy dashboard

Step 3: Review and approve visual changes

Review the visual differences using Percy’s dashboard, approve the changes if they are intended, or mark them as regressions if unintended.

You can integrate Percy into your continuous integration/continuous deployment (CI/CD) pipeline and source code management. Enabling source code integration helps you transition seamlessly from your pull request to Percy, where you can review all visual changes with a single click.

Our side-by-side comparison view enables you to easily identify exact changes and detect visual regressions across responsive widths and browsers. Your team receives alerts when changes are requested or when changes are approved and ready to ship!

Visual check status

Benefits of using Percy for visual testing

  • Efficiency: Improves efficiency by reducing the time and effort required to manually spot visual regressions.
  • Consistency: Promotes consistent user experience by identifying visual discrepancies early in the development process.
  • Collaboration: Improves collaboration between developers, designers, and QA teams by providing a visual representation of changes.
  • Prevent regression: Prevents you from experiencing unintended visual regressions.
  • Integrations: Percy integrates with popular tools and services like GitHub, GitLab, Bitbucket, and more.

Visual testing with Percy gives you complete insight and confidence on each and every deployment. You can easily catch visual bugs, review design changes, and be sure that every pixel you deploy to customers is correct, before they even see it.

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback

Is this page helping you?

Yes
No

We're sorry to hear that. Please share your feedback so we can do better

Contact our Support team for immediate help while we work on improving our docs.

We're continuously improving our docs. We'd love to know what you liked






Thank you for your valuable feedback!

Talk to an Expert
Download Copy