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, there is no simple solution for ‘fullpage’ screenshots, which shows the entire web page, including below-the-fold. Our algorithm involves scrolling the page, capturing an image for each viewport scrolled, 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 styles ‘position:fixed’ and ‘position:sticky’, 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. This helps 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, hide all elements for middle pages, then hide the elements at the top for the final screen capture. The effect should be a fullpage screenshot that has value in viewing and verifying layout.