Error: Protocol error (Page.captureScreenshot): Unable to capture screenshot when taking screenshot of a large viewport #5341
Description
Steps to reproduce
Tell us about your environment:
- Puppeteer version: 2.0.0
- Platform / OS version: Windows 10 1903 x64
- Node.js version: 10.17
What steps will reproduce the problem?
Please include code that reproduces the issue.
Here is a code snippet that sets large viewport and is trying to take screenshot of that
// test.js
const puppeteer = require('puppeteer');
class Server {
async setup() {
if (!this.browser) {
this.browser = await puppeteer.launch();
}
}
async export() {
try {
await this.setup();
const me = this;
const page = await this.browser.newPage();
page.on('error', e => {
throw e;
});
await page.setContent('<html><head></head><body><h1>test</h1></body></html>');
await page.setViewport({
width : 10000,
height : 50000
});
await page.emulateMedia('print');
await page.screenshot({
deviceScaleFactor : 4
});
await this.browser.close();
console.log('browser closed');
}
catch (e) {
await this.browser.close();
throw e;
}
}
}
const srv = new Server();
srv.export()
.then(() => process.exit())
.catch(e => {
process.exit(1);
});
What is the expected result?
Screenshot taken
What happens instead?
Exception thrown
Error: Protocol error (Page.captureScreenshot): Unable to capture screenshot
at Promise (...server\node_modules\puppeteer\lib\Connection.js:183:56)
at new Promise (<anonymous>)
at CDPSession.send (...server\node_modules\puppeteer\lib\Connection.js:182:12)
at Page._screenshotTask (...server\node_modules\puppeteer\lib\Page.js:951:39)
at process._tickCallback (internal/process/next_tick.js:68:7) -- ASYNC --
at Page.<anonymous> (...server\node_modules\puppeteer\lib\helper.js:111:15)
at Server.export (...server\src\utils\screenshot.js:34:24)
at process._tickCallback (internal/process/next_tick.js:68:7)
Initially I got that exception from a puppeteer which was launched from node express request handler. It failed to take a screenshot of size 700x25000 with same exception. So I tried to figure what's going on and wrote this test script, which worked just fine with same html and same size of the viewport.
Then I tried to increase viewport to some ridiculous number and reproduced the problem.
So screenshot fails inside node express request handler on a viewport 700x25000
and fails outside of the node express but at much higher viewport size, like 10000x50000
So questions are:
- Is there a limit to screenshot size which can be taken?
- If so, how can I calculate that limit?
- Is there a safe value for viewport?
- Can you suggest a way to take screenshots of large pages? What comes to my mind is to play with
trasnform: scale()to fit content into some reasonable viewport, e.g. UHD