Skip to main content

Responsive Visual Testing

Learn how responsive visual testing works in Percy

A powerful feature of Percy is visual testing for responsive user interfaces, allowing you to automatically detect visual regressions on mobile, tablet, and desktop screens at once.

Responsive Visual Testing

You provide a list of responsive breakpoint widths and we take care of the rest.

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.

Configuring responsive snapshots

Configuring Percy for responsive visual testing is as easy as specifying your desired responsive breakpoint widths when you call Percy snapshots.

NOTE: Check the documentation for the specific SDK you’re using to learn how to add responsive widths to your snapshot calls.

Limits

  • Maximum of 10 different widths per snapshot.
  • Each width must be between 120px and 2000px inclusive.
  • The default page height is set to capture a full-page screenshot.
  • The default viewport height is 1024. You can customize it using the min-height parameter.

Usage

Each responsive width counts as a separate screenshot that counts towards your monthly screenshot usage. For example, a snapshot of your homepage at 375px and 1280px will count as 2 screenshots.

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