How to correctly screenshot this type of website

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.11.0
• Platform / OS version: Mac
• URLs (if applicable): https://www.jackall.co.jp/rooster/
• Node.js version: v10.15.0

What steps will reproduce the problem?

Please include code that reproduces the issue.

1. I write normal screenshot function to screenshot the webpage. For static website, It worked perfectly fine. But, when I try to screenshot this website ( https://www.jackall.co.jp/rooster/), it didn’t screenshot correctly. How to deal with this kind of website?

Here are the code : let browser = await puppeteer.launch({executablePath: process.env.EXECUTABLE_PATH}); let page = await browser.newPage(); const override = Object.assign(page.viewport(), {width: width}); if(isAuthenticated){ await page.authenticate({username:body.authentication.username, password:body.authentication.password}); } await page.goto(url, {waitUntil: 'load',timeout: 0}); await page.setViewport(override); await page.screenshot({ path: ./${fileName},fullPage: true }); await page.close(); await browser.close();

What is the expected result?

https://pu-ai-bc-ruby.s3.ap-southeast-1.amazonaws.com/designs/jackallrgm[test]-00250/04ec906b1eaf12ead6b8ac961bd0b5fc/1360/41a55f7a5dcd6ca5c928749997999bab26feb82c5cfac774.png

What happens instead? https://pu-ai-bc-ruby.s3.ap-southeast-1.amazonaws.com/screenshots/a003eac153b830c35895df406c60169a/04ec906b1eaf12ead6b8ac961bd0b5fc/1360/103a21e452f05c2f39080967a95.png

[jsoverson]

It looks like you can get the same effect without worrying about that line by manually setting the clip dimensions to the size of the content:

const puppeteer = require('puppeteer');

(async function(){
  let browser = await puppeteer.launch({
    headless:false,
    defaultViewport: {
      width:1900,
      height:1080
    }
  });
  let page = await browser.newPage();
  await page.goto('https://www.jackall.co.jp/rooster/');
  const height = await page.evaluate(_ => {
    return document.body.scrollHeight;
  });
  await page.screenshot({ path: 'issue-4211.png', clip : { x: 0, y: 0, width:1900, height, scale: 1 }});
  await browser.close();
}())

[jsoverson]

This happens because Puppeteer overrides the device metrics to be the height of the scrollable content but the site was not built to handle that. You can see the effect (which is similar to your result) by emulating a device in devtools and setting the height to the maximum (9999).

If Page.js:892 is commented out then the following script produces something better.

const puppeteer = require('puppeteer');

(async function(){
  let browser = await puppeteer.launch({headless:false, defaultViewport:null});
  let page = await browser.newPage();
  await page.goto('https://www.jackall.co.jp/rooster/');
  await page.evaluate(_ => {
    while (document.body.scrollHeight < (window.scrollY + window.innerHeight)) {
      window.scrollBy(0, window.innerHeight);
    }
  });
  await page.screenshot({ path: 'issue-4211.png', fullPage: true });
  await browser.close();
}())

It’s not uncommon to see sites break at extreme aspect ratios so the emulation should probably be an option that can be disabled.