Screenshot is different from what we see in browser

[xiadongdev]

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.20.0
• Platform / OS version: macOS 10.14.6
• URLs (if applicable): https://microblink.com/news-events
• Node.js version: 10.16.0

What steps will reproduce the problem?

Please include code that reproduces the issue.

const puppeteer = require('puppeteer')
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('https://microblink.com/news-events')
await page.screenshot({
    path: 'image.png',
    fullPage: true
})
await browser.close()

What is the expected result?
I should get the screenshot(image.png) as what I see in my browser

What happens instead?
But this was the output:

Same thing happened to https://chvrch.es/#shows as well, many elements were missing on the screenshot. I'm wondering what could be the problem and is there a way to fix this? Thank you in advance!

[kklepper]

I have a similar problem. I think you must add some time before taking the screenshot to let the images download.

Your example works with my code, so maybe you give it a try:

// filename: /tmp/index_bk.js
// for buildkite-puppeteer-derived puppeteer container
// e.g. docker run --rm -v /tmp:/tmp -v /www:/www kklepper/puppeteer:debian \
// node /tmp/index_bk.js http://www.floralworld.com /tmp/9733.png 

const puppeteer = require('puppeteer')

let page

const  args = process.argv.slice(2);
//console.log(args[1]); // url
//console.log(args[2]); // img path

(async () => {
  browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox',
      // This will write shared memory files into /tmp instead of /dev/shm,
      // because Docker’s default for /dev/shm is 64MB
        '--window-size=1420,480',
      '--disable-dev-shm-usage'
    ],
    executablePath: 'google-chrome-unstable'
  })

//console.log('browser launched');

page = await browser.newPage()
page.on('dialog', async dialog => {          
// to kill dialogs like JS errors, 
// e.g. Failed to load: http://www.toolchina.com/skin/chinatool/JoelHome/jd/mf-pattern/mF_YSlider.js
    console.log(dialog.message());
    await dialog.dismiss();
});

await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3738.0 Safari/537.36'); 
// some pages may not work without
await page._client.send('Emulation.clearDeviceMetricsOverride');    
// to get our Viewport dimensions

try {
    await page.goto(args[0], { waitUntil: 'networkidle0', timeout: 150000});         
// 50000 was not enough for https://www.greengate.dk/,  https://www.heembloemex.com/
//var d = new Date();       // see if waitFor works 
//console.log('Date ' + d);
    //await wait(2000);
    await page.waitFor(2000)
    await page.screenshot({path: args[1], fullPage: false});
//d = new Date();
//console.log('Date ' + d);
} catch(e) {
  console.log('Error--->', e);
  browser.close();
  return e;   
}
  
//  console.log("path: " + args[1])
  browser.close();
})();

The url I have trouble with is http://www.kupart.com/, and no matter how much time I add via page.waitFor, I do not get the background images.

[kklepper]

The original page as seen in the browser:

or

or many more slides.

The puppeteer screenshot no matter what:

The screenshot seems to take only one div -- this might be a clue. I will investigate ASAP.

[kklepper]

The missing images are drawn by carousel from jquery. They are not inside an iframe, which would explain the phenomenon and could have been compensated for by using more code (see e.g. https://stackoverflow.com/questions/56335680/puppeteer-cannot-find-element-loaded-by-javascript).

To investigate more comfortably, I switched to interactive mode:

docker run -it --rm -v /tmp:/tmp -v /www:/www kklepper/puppeteer:debian bash

using node /tmp/index_bk.js http://www.kupart.com/ /tmp/9733.png with success -- surprise!

So I switched back to direct mode and again: success!

So sad. No error, no chance to find out. Which jeopardises me to hit on another sample without getting to know. Ok, I might filter on filesize to get an alert.

[xiadongdev]

Thanks kklepper!

I've tried adding more wait time before taking the screenshot and it didn't work either. I think your code works for https://microblink.com/news-events because you have set the viewport
--window-size=1420,480
I found that only when I set the viewport to 1440*1080, and remove fullpage:true, it produces the exact same screenshot as we see in browser, but the problem is, the bottom of the page is missing.

But using fullpage: true works with your site, maybe you could try this:

const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('http://www.kupart.com/')
await page.screenshot({
    path: 'kupart.png',
    fullPage: true
})
await browser.close()```

[mathiasbynens]

Related to #5080. +@progers

[kklepper]

@xiadongdev

As I don't have a problem with kupart.com I used your example -- also I am interested only in a small section of each page, so fullPage is not what I need.

I made the test with

docker run --rm -v /www:/www kklepper/pupp_node_9.11:debian node /www/index_bk.js https://microblink.com/news-events /www/img/test_mb.png

and changed fullPage to true in index_bk.js as you suggested.

The result is as expected:

(this is a browser-shrinked version to show the whole image -- the magnifier symbol switches to original size.)

In case you wonder: I changed my container to kklepper/pupp_node_9.11:debian as the previously used kklepper/puppeteer:debian does not render chinese, which I found out by chance later.

[TracyYXChen]

My two cents: check your Chrome version and see if it's correctly matched with the puppeteer's version here

[stale]

We're marking this issue as unconfirmed because it has not had recent activity and we weren't able to confirm it yet. It will be closed if no further activity occurs within the next 30 days.

[stale]

We are closing this issue. If the issue still persists in the latest version of Puppeteer, please reopen the issue and update the description. We will try our best to accomodate it!