Screenshot element larger than viewport

Steps to reproduce

Tell us about your environment:

• Puppeteer version: 0.13.0
• Platform / OS version: OSX
• Node.js version: 8.9.0

What steps will reproduce the problem?

// compare with .to-screenshot size
await page.setViewport({width: 500, height: 500}); 

await page.setContent(`
  something above
  <style>div.spacer {
    border: 2px solid blue;
    background: red;
    height: 600px;
  }
  div.to-screenshot {
    border: 2px solid blue;
    background: green;
    width: 50px;
    height: 1000px;
    margin-left: 1000px;
  }
  </style>
  <div class="spacer"></div>
  <div class="to-screenshot"></div>
  <div class="spacer"></div>
`);
const elementHandle = await page.$('div.to-screenshot');
const screenshot = await elementHandle.screenshot();

---

I’m using elementHandle.screenshot() which is working, but if the element is larger than the viewport, it won’t capture all of it. This make sense if you look at the source and see that it’s using page.screenshot with a clip, and you know that clip doesn’t work with fullPage, but it’s not intuitive, and doesn’t seem like a good default behavior.

Would it be possible to get elementHandle.screenshot to capture the whole element? It already tries to ignore scroll position, but viewport size limits it.

I tried making it use Emulation.setDeviceMetricsOverride, but then clip stopped working. Guessing this is why clip+fullPage errors.

On the project I need this for, I ended up doing:

const bounds = await el.boundingBox();
const initial = Object.assign({}, page.viewport());

await page.setViewport({
  width: Math.max(Math.ceil(bounds.width), initial.width),
  height: Math.max(Math.ceil(bounds.height), initial.height),
});

const imageRes = await el.screenshot({ type: 'jpeg', quality: 90 });
await page.setViewport(initial);
return imageRes;

Of course, this would impact media queries and ‘resize’ events, so not high enough quality to be included in puppeteer’s source, I think.

I don’t know what a good solution would be, but I use element screenshots a lot so I’m happy to implement any solutions you come up with. Thanks for the great tool!

[florianbepunkt]

Experiencing the same issue in a react app. The screenshot’s dimensions are correct but everything that is not initially visible in the viewport, is blank/cut off.

[Sid-Turner-Ellis]

@florianbepunkt Did you figure this one out? Experiencing the same thing…