question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Screenshot element larger than viewport

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
florianbepunktcommented, Jan 1, 2021

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.

list-role-booklets-chromium-snap

0reactions
Sid-Turner-Elliscommented, Nov 3, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to capture a web page larger than the browser window?
Right click on the page. Take Screenshot. Take Screenshot. Save full page. Save full page. Then you can choose to Copy or Download...
Read more >
Any option to make screenshot of lement larger than window
I'm looking for a way to make a screenshot of a div that is larger than the browser window. Changing window dimensions is...
Read more >
Viewport concepts - CSS: Cascading Style Sheets | MDN
On larger monitors where applications aren't necessarily full screen, the viewport is the size of the browser window.
Read more >
A tale of two viewports — part two - QuirksMode
Thus the <html> element takes the width of the layout viewport initially, and your CSS is interpreted as if the screen were significantly...
Read more >
How to take website screenshots with Puppeteer - Urlbox
Element screenshots are useful for capturing a specific portion of ... Let's increase the viewport to something larger like 1280×1024 so we ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found