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.
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.
Visual Test Options
TestingBot offers these features to stabilize your screenshots:
Ignore Specific Regions
You can ignore specific regions, defined in pixel coordinates, from the screenshot: