How do screenshot tests work?
CrossBrowserTesting.com's screenshot testing service allows a user to specify a URL for a web page and select a list of browsers to test against, and then returns images, or screenshots, of how the page looks in each browser. There are two resulting images for each browser tested: a "windowed" screenshot, and a "fullpage" screenshot.
First we will define a some terminology so that the description below will make a little more sense.
- Windowed Screenshot
- Image of a web page within a browser.
- Fullpage Screenshot
- Image of a fully scrolled web page from top to bottom within a browser. This is created by scrolling a web page, calling screen captures, and appending, or pasting, the images together.
- The viewable area of the web page that can be seen within the browser. This area changes as a web page is scrolled vertically.
- Screen Capture
- A snapshot image of the browser during the screenshot creating process.
- The software that "drives" the browser during the screenshot process, backed by the Selenium browser automation framework.
Screenshot Test Process
When a user launches a screenshot test either via our website or our API, each browser requested is inserted into a queue. As the system processes a request for a browser, here are the steps taken to achieve the two results, a windowed screenshot and fullpage screenshot.
- The operating system is booted from a locked image.
- The ScreenshotDriver launches the requested browser.
- The page is loaded for the requested URL.
- If a login was requested, the authentication method is applied.
- Maintenance tasks are run such as ensuring the document is ready and the browser window is maximized.
- If the user requested a delay for additional page rendering, the system pauses.
- The windowed screenshot is created and delivered back to the results page.
- The browser and web page is analyzed in preparation for a fullpage screenshot.
- The web page is scrolled and a screen capture is saved for each viewport scrolled until the bottom of the page is reached.
- The fullpage screenshot is built by removing the browser's top and bottom tool bars from the screen captures so that final resulting image looks seamless.
- The fullpage image is delivered back to the results screen and the operating system instance is cleaned up and torn down.
The windowed screenshot is delivered as soon as it is ready. If the ScreenshotDriver is unable to complete the fullpage screenshot process, the screenshot test is marked as failed and no time is deducted from your account for the test, even though the windowed screenshot is still available in the results.
For more information on issues that may occur with certain web pages, see the following FAQ:
Why do screenshot tests fail or return unexpected results?