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!

Handling dynamic data

Covered in this doc

How to freeze time and dynamic data for more stable screenshots
Freezing data in Storybook
Freezing date/time in Cypress

As you start to introduce visual testing into your workflow, you might find that the passing of time or generated data from tools like faker can cause visual diffs.

It's fairly easy to stabilize these diffs. Tools like faker often allow you to provide a seed to ensure that the same data is generated each time faker is run. Libraries like MockDate allow you to override the current date, eliminating variations due to the screenshots being taking at a different date and time. If you use Math.random, you can seed it with seedrandom.

Freezing time and dynamic data in Storybook

Percy provides an inPercy function that you can use in your Storybook's config.js if you'd prefer that these adjustments only have an effect when running in Percy's rendering environment. Add the @percy-io/in-percy package if you'd like to use inPercy.

You can see an example of how this type of stabilization can be done in this storybook/config.js.

Freezing date/time in Cypress

If you have a date picker that auto-selects the current day, each time you run your tests, Percy is going to capture a different day selected, causing noisy diffs. In order to overcome this issue, you need to freeze time in Cypress. You can do so by adding this to your tests:

const now = new Date(2018, 1, 1);
cy.clock(now); // freezes the system time to Jan 1, 2018
// continue with your normal tests below

Updated about a month ago

Handling dynamic data

Suggested Edits are limited on API Reference Pages

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