If you work with headless browsers, you might have encountered this before. You load a page, and a cookie acceptance screen pops up and stops you from scrolling until you click accept.
Sometimes they use overflow:hidden on the body element to stop the scrolling. In this scenario, a full-page screenshot will result in the content being hidden below the viewport’s height, although the screenshot will reflect the page height. You will not see any of the fonts, images, text, background colours that would be “below the fold” will render.
It’s not realistic to have some logic to click these buttons, so how do you get around it?
Resize the viewport
If you load the page in a 1024×768 viewport, you can see the cookie acceptance screen pinned to the bottom. Once the page is loaded, measure the page’s height and adjust the viewport to that height. Keep the same width.
Measure the height of the page
let pageHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);Then adjust the height of the viewport to that. If you’re unsure on that, check the docs of the tools you’re using. If for example, you’re on selenium, check this Stack Overflow thread.
Changing the headless browsers viewport height works by changing the bottom of the screen and putting the “fold” at the bottom of the page. All of the page content is then visible because it is then all above the bottom of the page.
Imagine a computer monitor with the same vertical resolution as the page height.
The added benefit of this is that the cookie bar will also be at the bottom of the page – likely not covering the most important content at the top of the page.
I wrote an article on Headless Chrome giving some more tips to help you get the best from it.