Testers know the value of using browser screenshots for manual debugging and regression testing, but we take it a step further with capabilities for full-page automated screenshots. CrossBrowserTesting allows you to automate screenshots on real browsers and devices and compare them against a baseline to evaluate layout differences and find issues that need debugging more easily.
But what do we mean by a full-page screenshot? A full-page screenshot is more than what you see when you look at a web page on your device (a.k.a. a windowed screenshot) — it’s a capture of the entire web page above and below the fold.
This means full-page screenshots account for any area you have to scroll up, down, or sideways to view. As opposed to manually taking multiple windowed screenshots of one page and trying to stitch them together and compare them to multiple screenshots of another page; our algorithm scrolls the page, captures an image at each viewpoint, and merges them into one view in order to provide a fast and accurate screenshot of the entire page.
By evaluating different browser versions visually, side-by-side with our comparison engine, it’s easier to not only see layout differences but detect smaller problems that might go unnoticed.
Full-page screenshots are a great tool for
- Exploratory testing – Exploratory testing is performed the first time a tester looks at new software or new features. Being able to multiply these efforts by visually exploring multiple browsers saves time while increasing coverage.
- Regression testing – Any change to working code means the possibility that it’s been compromised. Regression testing is used to ensure that a recent change hasn’t impact any previously functioning features, and comparing them with pass/fail results makes the process easy, effective, and efficient.
- Usability testing – Testing the UI/UX of a web page ensures that current and potential customers are happy with your application and will continue to come back. Usability testing across browser and devices configurations further considers diverse user experiences.
- Responsive design – Responsive design by definition means that everything looks visually acceptable from screen to screen, device to device, and browser to browser, which means visually validating this on real devices is paramount.
Here are five easy steps to taking full-page screenshots of your website with CrossBrowserTesting:
- Log into the CrossBrowserTesting app, click screenshots, and start a screenshot test by entering the URL of choice. Keep in mind, you can also take screenshots locally or behind a firewall so you can test and debug before your app reaches the public eye.
- Choose from over 1,500 real browsers, devices, and operating systems to replicate real user scenarios. Hint: use Google Analytics to decide which browsers you should prioritize, or choose the “Popular Browsers” option.
- Use the full-page setting and view high-resolution results within minutes. Compare to your baseline, filter by device, and easily examine highlighted layout differents that anyone could understand to find bugs, spot UI issues, and identify elements that are hidden or misplaced.
- Download the results, save your reports, and share with your team through Slack, Hipchat, email, or Jira. These communication channel integrations make it easier to provide feedback, start discussions, and affect change by encouraging collaboration with different roles on the development team.
- Take to live testing for remote debugging.
Full-page screenshots prove to be a great resource in many stages of testing, and automating them with a tool like CrossBrowserTesting makes the entire process much more streamlined. Or, you can just photoshop your own full-page screenshots together if you’d like, but we prefer our way.
By increasing test coverage and speeding up debugging time, you can more easily identify gaps in quality and quickly deliver better software to your customers. Additionally, the CrossBrowserTesting Comparison Tool provides the best of both worlds, striking a balance between manual and automated testing by a visual representation of your web page while eliminating shortcomings of human error.