Catch visual bugs before your customers do

Detect visual changes with Percy and ship visually perfect UI with every release

Visual-testing-and-review-Percy

What is Visual Testing?

Visual testing uses automation to detect visual changes across your entire UI with accurate snapshot comparisons made against the baselines. It makes pixel-by-pixel comparisons highlighting the most elusive changes that can go unnoticed with traditional visual testing methods. Automated visual testing provides increased visual coverage, enabling teams to have complete confidence in the changes they make while releasing code changes.

Why do you need visual testing?

Automate the process of detecting visual changes and regressions before they slip into production

Functional tests are not enough

Functional tests are not enough

Functional tests only check for behavioral outcomes, not UI changes. It is difficult to assert visual correctness with code.

not scalable

Manual testing is not scalable

Applications today run into hundreds of pages and components. Checking all of them for visual consistency manually is inefficient.

Responsive tests are complex

Visual testing compares each configurable responsive width against the baseline and helps you automate responsive testing.

Increase your test coverage with visual testing

Add visual testing to your test suite and deliver visually and functionally perfect applications

Visual testing does not replace your existing test suite; it simply adds a new dimension to it. Instead of validating the functional behaviour of your website or application, visual tests ensure that it is free of visual bugs and regressions and that it looks correct across browsers and screen widths.

Eliminate the risk of shipping visual bugs

Detect visual changes with accurate comparisons and deliver pixel-perfect software with every release

Collaborative visual reviews

Comment, discuss and collaborate with your team to ship faster. Percy also keeps teams up-to-date with automatic status updates in your pull requests whenever visual changes are detected.

Collaborate-and-review-Percy
Snapshot stablization

Dynamic data handling

Percy’s proprietary snapshot stabilization technology automatically freezes animations to minimize false-positives. You can also ignore specific areas of your page using percy-specific-css.

Leveraging existing test suites

Percy integrates seamlessly into your existing CI/CD workflow and supports popular test automation frameworks, languages, tools, and workflow integrations.

Integration Visual testing

Eliminate the risk of shipping visual bugs

Detect visual changes with accurate comparisons and deliver pixel-perfect software with every release

Collaborate-and-review-Percy

Collaborative visual reviews

Comment, discuss and collaborate with your team to ship faster. Percy also keeps teams up-to-date with automatic status updates in your pull requests whenever visual changes are detected.

Snapshot stablization

Dynamic data handling

Percy’s proprietary snapshot stabilization technology automatically freezes animations to minimize false-positives. You can also ignore specific areas of your page using percy-specific-css.

Integration

Leveraging existing test suites

Percy integrates seamlessly into your existing CI/CD workflow and supports popular test automation frameworks, languages, tools, and workflow integrations.

How Percy works

Integrate

Integrate Percy with your CI/CD workflow

Run

Run

Run visual tests on every commit

Review

Review visual changes with your team

Frequently Asked Questions

What are visual diffs?

Visual testing works by comparing UI screenshots to detect if anything has changed visually. Those pixel changes between new and baseline images are called visual diffs. They are also referred to as perceptual diffs, pdiffs, CSS diffs, and UI diffs.

What is a snapshot?

A Percy snapshot is a rendering of a web page or component. Snapshots are made up of screenshots that are permutations of pages or components that are rendered in a specific browser and at a specific width.

What is the baseline?

When changes are pushed to the codebase, Percy captures snapshots and compares them to snapshots generated from a previous build. The snapshots used for pixel-by-pixel comparisons from the previous build are known as the baseline.

What is a base build?

Percy generates screenshots, groups the screenshots into snapshots, and snapshots into a build. New screenshots are compared to baseline screenshots from a previous build. This previous build is also known as the base build.

How are the base builds selected?

Percy uses a variety of strategies to determine the optimal base build for comparison. The particular strategy used depends on several factors, including any installed SCM integrations, the default branch of the project, and commits that have previously finished builds.

How are snapshots rendered?

Percy captures DOM snapshots instead of images. These snapshots are then compared across browsers and screen widths to detect and group visual diffs. Percy handles things such as freezing animations, handling dynamic data, and rendering third-party fonts to stabilize screenshots.

What is the importance of automating visual tests and reviews?

Automation enables full visual coverage and ultimately makes teams more efficient. It helps teams catch bugs early and saving hours spent on hunting for visual inconsistencies.

How does visual regression testing work?

First, Percy renders a screenshot of the page and then visually compares it, pixel by pixel, to a previous screenshot. The output of this comparison creates a third image—this is the “visual diff” or “perceptual diff” that shows exactly what pixels changed between the images:

How is the base build selected?

The chart below demonstrates a simplified view of Percy’s base build selection logic. Click the thumbnail below to view the full-size diagram.

Can I override the base build selection logic?

If you want to completely customize the base build for a Percy comparison, you can set the PERCY_TARGET_COMMIT environment variable to the commit SHA that you would like to use as the base. This will only work if there is a finished Percy build for that commit.

Does Percy support responsive visual testing?

Yes. Because Percy stores the original DOM snapshot and page assets, we simply render the same page at configurable widths by resizing the browser when generating page screenshots. Hence, you can test as many responsive breakpoint widths as you want.

How does Percy handle animations?

Percy handles things like freezing animations and GIFs, anti-aliasing, and more. This helps in stabilizing snapshots and preventing false-positive results.

Can I define elements that I want Percy to ignore while running visual tests?

Percy supports both, rendering snapshots for full pages and components. However, you can define components that need to be ignored by creating webpages that contain only the portion you want to snapshot. In many frameworks, you can do this programmatically within your integration tests before you take the snapshot.

Does Percy support Parallelization?

Percy has built-in support for complex test suites that run in parallelized CI services or parallel test runners. Percy is designed to support any parallelized test environment with only two simple parameters. Snapshots are pushed from your tests to Percy and grouped in the same Percy build, no matter if your tests are run in different processes or even on different machines.

Will integrating visual testing into my CI workflow affect my existing workflow?

No. Our custom rendering infrastructure is horizontally scalable and built specifically for DOM snapshotting without impacting the performance of your existing CI speed.