CrossBrowserTesting Support

Support

  • Product
    • Live Testing
    • Automated Testing
    • Record & Replay
    • Visual Testing
  • API Docs
  • Blog
  • Live Q&A
  • Start Testing
CrossBrowserTesting Support » Screenshots » General » Screenshots and Fixed Elements

Screenshots and Fixed Elements

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.

full-page screenshot example with fixed elements

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.

fullpage screenshot example with fixed elements turned off

Related

All Topics

  • Billing and Plans
  • Frequently Asked Questions
  • Integrations
  • Live Testing
  • Local Connection
  • Screenshots
  • Selenium Testing
  • Teams and Admins
  • Team Guides



Think you need a human?

Our customer success team will be glad to help you with your question.

Contact Support

Still need a free trial?

Try CrossBrowserTesting free for 7 days and see how we make testing easier.

Start Today

Want the latest tips?

Enter your email and we’ll send you tutorials and browser testing strategies right to your inbox.


Product

  • Live Testing
  • Automated Testing
  • Visual Testing
  • Local Testing
  • Integrations

Resources

  • Browsers & Devices
  • Blog
  • Webinars
  • Security
  • ROI Calculator

Support

  • Help Center
  • CBT Community
  • API Docs
  • Automation Docs
  • Schedule A Demo
  • Enterprise Request

Company

    • About Us
    • Contact Us
    • Careers
    • Terms of Use
    • 1-888-927-6973

© 2019 CrossBrowserTesting.com, LLC. All rights reserved.