Skip to main content
Experience faster, smarter testing with BrowserStack AI Agents. See what your workflow’s been missing. Explore now!
No Result Found
Get help or connect with the developer community Join Discord Community -> Join Discord Community ->

Handle 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_screenshotfunction.

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

Copy icon Copy
# before taking screenshot we force the carousel to be at 1st tile
driver.execute_script(`var carousel = $('.carousel');
  carousel.carousel(0);
  carousel.carousel('pause');`)
percy_screenshot(driver, name = 'Screenshot 1')

Another example is how to handle sticky elements. Suppose the website you’re testing has the cookie banner. You can either accept or reject it. In the following snippet, we’re accepting the cookie:

Copy icon Copy
# before taking screenshot please close the sticky elements
cookie_banner = wait.until(EC.presence_of_element_located((By.ID, 'cookie-banner')))
# Find the accept button and click it
accept_button = cookie_banner.find_element(By.XPATH, '//button[text()="Accept"]')
accept_button.click()
percy_screenshot(driver, name = 'Screenshot 1')

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:

Sample JavaScript
Copy icon Copy
const now = new Date(2018, 0, 1);
describe('Freeze date and time', function() {
  it('Loads the homepage', function() {
  cy.clock(now); // freezes the system time to Jan 1, 2018
  ...
  }
// continue with your normal tests below

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

Is this page helping you?

Yes
No

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!

Talk to an Expert
Download Copy Check Circle