Handling dynamic data

Learn how to freeze dynamic data during visual testing

Dynamic data can lead to inconsistencies in visual tests, making it essential to stabilize this data before capturing screenshots.

Begin by identifying dynamic elements in your application, such as timestamps, user-specific content, or any data that frequently changes. To stabilize this content during testing, replace it with fixed values using mock data or predefined inputs.

Handling JavaScript elements or carousels

If you have dynamic JavaScript elements or carousels in your test, stabilize the DOM first and then invoke percyScreenshot function. This allows for capturing consistent and accurate screenshots.

For example, if you are using bootstrap carousel, handle it as follows:

Use Faker for stable data

Utilize libraries like Faker to generate consistent fake data for testing. By seeding your Faker instance with a specific seed value, you ensure that the generated data remains the same across test runs, providing stability for your visual tests. Additionally, 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.This approach minimizes discrepancies caused by changing dynamic content.

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: