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.
This applies to both BrowserStack SDK and Percy SDK.
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.
Use percy_snapshot
function if you’re using the Percy SDK for web projects. For Automate projects with the Percy SDK or when using the BrowserStack SDK, use percy_screenshot
function.
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:
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
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!