elementHandle.screenshot() produces blank screenshots for elements outside of viewport

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 1.3.0
• Platform / OS version: OS X 10.12.6
• URLs (if applicable): N/A (Test script uses https://github.com but I’ve noticed the issue on other pages)
• Node.js version: 8.1.4

What steps will reproduce the problem? Using elementHandle.screenshot in the following test script, capturing an element outside of the viewport results in a blank / empty screenshot.

Please include code that reproduces the issue.

import puppeteer from 'puppeteer';

const VIEWPORT = {width: 1200, height: 900};
const URL = 'https://github.com/';
const TESTELEMENT = '.footer';

(async () => {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.setViewport(VIEWPORT);
  await page.goto(URL, { waitUntil: 'networkidle0' });


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

  // Screenshot using element handle.
  const element = await page.$(TESTELEMENT);
  await page.waitFor(1000);
  await element.screenshot({
    path: 'tmp/testElement.png',
  });

  // Screenshot using the element's bounding box.
  const elementBounds = await element.boundingBox();
  await page.screenshot({
    path: 'tmp/testClip.png',
    clip: elementBounds,
  });

  await browser.close();
})()

What is the expected result?

The screenshot taken using the element handle should capture the footer for the url provided. The screenshot that supplies the element’s bounding box should also capture the footer.

What happens instead?

The full page screenshot is fine, but the other two are blank (white). If I adjust the script and increase the viewport height to something really large, like 9999px, the footer is within the initial viewport and the problematic screenshot come out fine.

[marcelotedeschi]

I managed to fix my issue by setting the viewport before taking the screenshots. The important thing was to get the full height of the page where everything I wanted to screenshot was visible. In my case, everything was a child of a .application-wrapper div. So the code looks something like this:

const VIEWPORT = { width: 1280, height: 720, deviceScaleFactor: 2 }; // Your default values
await page.goto(url, { waitUntil: 'networkidle0' });

const fullPage = await page.$('.application-wrapper');
const fullPageSize = await fullPage.boundingBox();
await page.setViewport(
  Object.assign({}, VIEWPORT, { height: fullPageSize.height })
);

// Element screenshot logic
const elements = await page.$$('.screenshot-element');

for (const [index, element] of elements.entries()) {
  await element.screenshot({ path: `/tmp/${index}.png` });
}

[bluepeter]

To be clear, this code is now nicely working for us without (any yet discovered) issues:

        const screenshot = await chromePage.screenshot({
          clip: await targetElement.boundingBox(),
        });