Understanding Full-page Screenshots
A basic screenshot is simple: just take a screenshot of the browser window and you are done. This is what we provide with a ‘windowed’ screenshot. However, for ‘fullpage’ screenshots, where we show the web page below-the-fold all the way down to the bottom of the page, there is no simple solution. Our algorithm involves scrolling the page, capturing an image for each viewport scrolled, and then stitching the images together to make a seamless fullpage screenshot.
How Fixed-Position Elements Affect Fullpage Results
When there are elements with the CSS style ‘position:fixed’, then these elements appear throughout the fullpage result, making it difficult if not impossible to verify layout. Many modern websites use these fixed-position elements at both the top and bottom of the webpage, especially for mobile devices.
How ‘Hide Fixed Elements’ Addresses the Issue
In the Advanced Options of a new Screenshot Test, we default the option for ‘Hide Fixed Elements’ to true to help fullpage screenshots avoid showing fixed elements throughout the page. We achieve this by searching the DOM for fixed-position elements and their offsets relative to the viewport. We hide the elements at the bottom for the first screen capture, then hide all elements for middle pages, then hide the elements only at the top for the final screen capture. The effect should be a fullpage screenshot that has value in viewing and verifying layout.
