Menu
The puppeteer function page.screenshot([options]) accepts two parameters:
fullPage When true, takes a screenshot of the full scrollable page. Defaults to false.
captureBeyondViewport When true, captures screenshot beyond the viewport. Whe false, falls back to old behaviour, and cuts the screenshot by the viewport size. Defaults to true.
To me this sounds like pretty much the same thing, besides the different default values. So I wonder what the difference is.
582
These options might seem like siblings, but they are not and have very different behavior from each other and doesn't relate to each other at all.
The fullPage option technically resizes the viewport to match the page layout width and height when taking a screenshot and then returns a viewport size to the previous value. So, that's how you get the whole page screenshot.
Not related to the issue, you might have cases when an element or even the whole page width or height is defined through viewport units. Look at this example (source):
<!DOCTYPE html>
<html>
<body>
<div
class="beyond-viewport-element"
style="height: 110vh; background-color: blue; border: 10px solid red"></div>
<div
class="next-element"
style="height: 100px; background-color: yellow; border: 10px solid black"></div>
</body>
</html>
If you try to take the full-page screenshot, you will fail to take it fully because the .beyond-viewport-element will always be beyond the viewport, so to make sure that you capture elements beyond the viewport, set the captureBeyondViewport option to true.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
