Screenshot Comparison on Real Browsers
Compare screenshots across a wide range of browsers for complete visual coverage. Detect pixel-level visual changes instantly.
What is Screenshot Comparison?
Percy, our automated screenshot platform makes pixel-by-pixel comparisons of websites on real browsers. Identify visual changes across your entire UI with accurate snapshot comparisons against baseline images.
See screenshots on different browsers and screen sizes side by side. The platform automatically highlights visual differences by comparing each screenshot with baseline images. Thanks to Percy’s state-of-the-art visual testing engine, you won’t miss even the most minuscule changes – the ones that often escape the human eye.
Why use a screenshot comparison tool?
Automate the process of comparing screenshots and detect visual changes in minutes
Test on Real Browsers
Verify website visuals on thousands of real browsers. Compare screenshots on real browsers, screen sizes, widths, and resolutions.
See Screenshots Side-By-Side
Select a baseline image and compare screenshots on other browsers and devices. Every pixel-level difference is automatically detected & highlighted by the test engine.
Integrate Seamlessly into Existing CI/CD
With a few lines of code, integrate Percy into your current CI/CD workflow. Minimal setup required. Percy supports popular test automation frameworks, languages, tools, and workflow integrations.
How visual testing with Percy works
Integrate
Integrate Percy with your CI/CD workflow
Run
Run visual tests on every commit
Review
Review visual changes with your team
Compare screenshots on Real Browsers
Increase your test coverage with automated screenshot comparison
Add screenshot comparison to your test suite and deliver visually perfect applications
Screenshot comparison adds a new dimension to your test suite. Along with verifying and validating the functionality of your website or app, ensure it is free of visual bugs and regressions so that it looks perfect across browsers and device screens.
Frequently Asked Questions
Essentially, screenshot comparison refers to the process of comparing how the same website looks on different browsers and devices. Here’s how it works:
1. When you run your first Percy test, baseline screenshots are taken automatically i.e., a screenshot of the website/app displaying perfectly on a particular browser-device duo.
2. Compare this baseline image with screenshots of the same website on other browser-device combinations.
3. Any differences in the subsequent screenshots from the original screenshots will indicate that there might be a visual bug or error that needs to be fixed.
Conducting the whole process manually is impossible. First, it would take an excessive amount of time and effort on the part of the testers. Additionally, even if they did have that time and bandwidth to spare, the human eye cannot detect all differences in screenshots, especially ones at the pixel level.
Automating the whole mechanism is much easier and far more effective. BrowserStack allows testers to do exactly that via Percy’s industry-best visual testing engine. The entire pipeline – taking screenshots, comparing them to the baseline, detecting and highlighting all differences is entirely automated. Once differences have been identified and highlighted, testers can manually review them with their team to validate and verify changes.
Any website or app doesn’t just need to work flawlessly on different browsers and devices. It also needs to look perfect, no matter where it is accessed from. Functional tests, cross-browser compatibility tests, and other tests will validate that the software works as expected, but they cannot determine if all visual elements are in place.
For example, let’s say a button is working fine when clicked. But, when it comes to the website’s UI, the button could be hidden under another image. That means the user cannot see the button or use it.
Screenshot comparison testing is necessary to identify and resolve such visual bugs. If visual elements are displaying incorrectly on a particular browser or device (or both), screenshot comparison will detect the same and prevent a negative user experience.
Once you have a website or app that is functionally ready to be deployed, run tests via a screenshot comparison tool. That means, once you know that the site or app is working as it is intended to, it is time to check what the software looks like on different browsers and devices. That is where a screenshot comparison tool comes into play.
On BrowserStack, screenshot comparison testing is executed via Percy, one of the world’s foremost visual testing tools. Here’s how it works:
1. Developers create code that replicates user functions (typing text into a field, for example). They place commands at appropriate points in the code to capture a screenshot. The first time the test code is executed, an initial set of screenshots is recorded – the baseline.
2. After setting the baseline, the tester runs the test code. Each screenshot is then compared with the baseline image corresponding to that section of the application. If differences occur between the images, the test is marked as failed.
3. Once the test runs completely, a report is generated automatically. You can review the comparisons where visual changes were detected.
4. If the changes were intended, you can approve the build. If there were unintended changes, you can request changes or comments and collaborate with your team to discuss the changes.
If bugs cause these image differences, developers can fix them and rerun the test to check if the fixes actually worked. If later UI changes cause discrepancies, devs will review the screenshot and update baseline images.
In a nutshell, real browsers, and devices. BrowserStack’s screenshot comparison tool automated the process of taking and comparing screenshots on thousands of real browsers and devices. That means software visuals are tested in real user conditions. You know exactly what your product will look like on the users’ end, and any anomalies or errors show up as they would on users’ devices. BrowserStack’s screenshot comparison tests provide 100% accurate results every single time.