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 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