Key takeaways
- Automated visual comparison catches layout regressions no functional test asserts on.
- Compare the same viewport and state, or the diff is dominated by noise.
- Review differences rather than gating on pixel equality, which fails constantly.
With LoadFocus you can visually compare your staging website with your production website automatically, following these steps below:
Steps to dynamically compare Staging vs. Production websites:
- Enter your Staging Website (i.e. https://loadfocus-staging.com)
- Enter your Production or Live Website (i.e. https://loadfocus.com)
- Click Discover button and choose the number of URLs to automatically get discovered from your Production website
- Start your Visual Comparison Test
- Inspect generated images and the diff image of the two websites
This will generate a screenshot for each version of your website, Staging and Production, based on the Staging URL + Pathname or Production URL + Pathname and compare the screenshots.
You can choose the threshold which will ignore the percentage of different pixels between the two screenshots generate for each page. You can generate screenshots on different responsive sizes or emulate on mobile devices.
More details on our Visual Regression Testing service webpage.
Frequently Asked Questions
What does visual comparison catch that functional tests miss?
Layout regressions. A functional test asserts that an element exists and passes happily while the page renders broken, because nothing checks how it looks.
Why do I get so many differences?
Usually because the two captures are not comparable. Compare the same viewport and the same page state, or the diff is dominated by noise rather than by the change you are looking for.
Should the build fail on any pixel difference?
No. Pixel equality fails constantly on fonts and antialiasing. Review the differences, or set a tolerance, so the signal survives.
