Percy Developer Hub

Welcome to the Percy Developer Hub. You'll find comprehensive guides and documentation to help you start working with Percy as quickly as possible, as well as support if you get stuck. Let's jump right in!

Responsive visual diffs

Visual testing at responsive breakpoint widths with Percy

A powerful feature of Percy is visual regression testing for responsive designs. You provide a list of responsive breakpoint widths, we take care of the rest.

For example, here is a responsive visual diff of a button change on the same page rendered at different widths:

/index.html @ 375px:

/index.html @ 1280px:

Usage


Usage depends on the client library, see the Usage section of your specific client library.

Limits


  • Maximum of 10 different widths per snapshot.
  • Each width must be between 120px and 1400px inclusive.

Pricing


Each responsive width counts as a separate visual diff in your subscription. For example, a snapshot of your homepage at 375px and 1280px simply counts as 2 visual diffs.

How it works


Because Percy stores the original DOM snapshot and page assets, we simply render the same page at different widths by resizing the browser when generating page screenshots. This is handled entirely server-side and has no effect on the speed of your tests since all rendering and diffing takes place in Percy, like normal.

One downside to this approach is that we do not execute JavaScript by default while rendering pages, so any responsive changes that rely on JavaScript may not show. We have some ideas on how to handle this in the future, please contact us if you are interested in this feature.

Responsive visual diffs


Visual testing at responsive breakpoint widths with Percy

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.