Stabilize Screenshots for Visual Testing

During visual testing, we're comparing a screenshot with a previous screenshot. If a difference is detected, the visual test is considered a failed test.

In order to avoid false positives during the comparison of two screenshots, it's important to make sure we prevent as much unwanted and unimportant dynamic data from the screenshot as possible.

Freeze CSS Animations

Right before TestingBot takes a screenshot, we will disable any CSS animations currently running on the page.
TestingBot will freeze CSS animation and transition styles. Once the screenshot has been taken, the CSS animations will run just like before.

Lazy Loaded Images

Some images on the webpage might be marked as lazy loading images. If you are taking a full-page screenshot, TestingBot will force-load all images marked as lazy images, to make sure the entire page is visually tested.

Mobile Statusbars

When testing on (physical) mobile devices, a statusbar might be present on the screen, containing the current time. TestingBot will automatically remove the statusbar from the image, because otherwise the time indicator would trigger a visual difference compared to the baseline.

Date/Time on webpages

A webpage might display the current date or time. In order to avoid marking this as a difference, the date and time of the webpage is frozen to 2024-01-01T12:00:00Z.
Once the screenshot has been taken, the date and time is unfrozen.

Native browser controls

Right before TestingBot takes a screenshot, the caret and the scrollbar on the page will be hidden, in order to avoid false positives with focused textinputs. After the screenshot, these changes will be reverted.