Screenshots of Multiple Elements on Page Result in Some Blank Screenshots

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.2.0
• Platform / OS version: macOS 10.13.3
• URLs (if applicable): http://graasp.eu/ils/5a9d467e45aca55d33eafce6/?lang=en&printPreview
• Node.js version: 8.10.0

What steps will reproduce the problem?

I’m trying to take screenshots of a series of HTML elements. The first couple of elements in the series are captured without a problem. However, the third through the tenth appear blank. The screenshots have the right dimensions, but they have no content. Interestingly, if I take a screenshot of the full page, the elements appear fine.

Please include code that reproduces the issue.

const puppeteer = require('puppeteer');

const captureScreenshotsOfElements = async (elements) => {
  let i = 0;
  for (const element of elements) {
    await element.screenshot({ path: `tmp/${i}.png` });
    i += 1;
  }
};

//
(async () => {
  const browser = await puppeteer.launch({headless: false});
  try {
    const page = await browser.newPage();
    await page.setViewport({width: 1200, height: 1200});
    await page.goto('http://graasp.eu/ils/5a9d467e45aca55d33eafce6/?lang=en&printPreview', { waitUntil: 'networkidle0' });

    // wait five more seconds just in case
    await page.waitFor(5000);

    // dismiss cookie banner
    const dismissCookiesMessageButton = 'a.cc-dismiss';
    await page.waitForSelector(dismissCookiesMessageButton);
    await page.click(dismissCookiesMessageButton);

    // print screenshot
    await page.screenshot({path: 'tmp/fullPage.png', fullPage: true});

    const gadgets = await page.$$('div.gadget-content');
    await captureScreenshotsOfElements(gadgets, page);

    await browser.close();
  } catch (err) {
    console.error(err);
    browser.close();
  }

})();

In short I do the following:

1. Load up the page.
2. Dismiss cookie banner.
3. Take screenshot of full page.
4. Select the elements and capture screenshots of each of them.

If have switched steps 3 and 4 around and get the same result.

What is the expected result?

All of the screenshots of the elements show the element content.

What happens instead?

The first three element screenshots show the content. The rest of them are empty.

I believe that there is a small moment after the viewport changes where the element is blank and that’s when the screenshot is take. Is there anyway of waiting a bit before taking the screenshot of the element?

[joeldouglass]

I was able to work around this by setting the viewport height to a very large number (e.g. 1000000).

[stale[bot]]

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!