puppeteer: Fullpage Screenshot Problem with some Single Page Websites

Tell us about your environment:

Windows10
puppeteer 0.11.0

Problem?

Fullpage screenshots of single page websites will not be displayed correctly. I tried to clip areas, scrolling through the page and waitForNavigation.

Similiar problems with navalia, chromeless and phantomjs.

Is there anything else i can do?

Steps reproduce

`const puppeteer = require(‘puppeteer’); var url = “http://thehenhouse.com.au/”; // page url var name = “the” var resWidth = 1366; // width of screenshot var resHeight = 1000;

(async () => { const browser = await puppeteer.launch(); const page = await browser.newPage() await page.goto(url, {waitUntil: ‘load’}); // await page.waitForNavigation({waitUntil: ‘networkidle’}); await page.setViewport({width: resWidth, height: resHeight}); await page.emulateMedia(‘screen’); await page.screenshot({path: name + ‘-’ + resWidth + ‘.jpeg’, type: ‘jpeg’, fullPage: true}); console.log(“screenshot done”);

await browser.close(); })();`

the-1366

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 17
Comments: 15

Most upvoted comments

I believe the problem here is that Puppeteer is naively increasing the client height. This is not the same as making an actual screenshot of content below the fold (scrollbar), because content dynamically adjusts based on the client height (e.g. if you use vh sizing in CSS).

Therefore we need an actual “screenshot content below the fold” feature, rather than a hack that is simply making the screen size larger temporarily.

+12

tommedema on Feb 19, 2018

Use something like urlbox.io? Handles full-height backgrounds ok in full screen mode. https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/f1dec2f00eee0b46452e2519b48c660a36d09eb9/png?url=http%3A%2F%2Fthehenhouse.com.au%2F&full_page=true

+12

cjroebuck on Nov 28, 2017

add this code before screenshot to fix:

await page.evaluate(async () => { var allElems = window.document.getElementsByTagName("*"); for (var i = 0, max = allElems.length; i < max; i++) { var hEleme = window.getComputedStyle(allElems[i]).height; if(hEleme != 'auto'){ var numdEleme = Number(hEleme.slice(0, -2)); if(numdEleme > 100 && numdEleme < 1000){ allElems[i].style.setProperty("height", numdEleme + 'px', "important"); } } } return true; });

msadougi on Sep 26, 2020

For now, I solved my problem with image lazy load by set page viewport height as max as possible.

await page.setViewport({
      width: 1440,
      height: 10000 // set whatever you want
})

rohmanhm on Oct 13, 2017

@cjroebuck this is not a solution as some of us may be trying to create services similar to urlbox.io using puppeteer.

tommedema on Feb 18, 2018