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.
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.
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 5 months ago