How to fix Puppeteer 'Error: Protocol error (Emulation.setDeviceMetricsOverride): Invalid parameters width: integer value expected; height: integer value expected'
Problem:
You are trying to set the viewport size in Puppeteer using
const browser = await puppeteer.launch({
defaultViewport: '1920x1080'
});
but you see an error message like
(node:15692) UnhandledPromiseRejectionWarning: Error: Protocol error (Emulation.setDeviceMetricsOverride): Invalid parameters width: integer value expected; height: integer value expected
at /home/uli/dev/myproject/node_modules/puppeteer/lib/Connection.js:183:56
at new Promise (<anonymous>)
at CDPSession.send (/home/uli/dev/myproject/node_modules/puppeteer/lib/Connection.js:182:12)
at EmulationManager.emulateViewport (/home/uli/dev/myproject/node_modules/puppeteer/lib/EmulationManager.js:41:20)
at Page.setViewport (/home/uli/dev/myproject/node_modules/puppeteer/lib/Page.js:808:54)
at Page.<anonymous> (/home/uli/dev/myproject/node_modules/puppeteer/lib/helper.js:112:23)
at Function.create (/home/uli/dev/myproject/node_modules/puppeteer/lib/Page.js:49:18)
at processTicksAndRejections (internal/process/task_queues.js:85:5)
at async Browser._createPageInContext (/home/uli/dev/myproject/node_modules/puppeteer/lib/Browser.js:177:18)
at async /home/uli/dev/myproject/index.js:8:16
-- ASYNC --
at Target.<anonymous> (/home/uli/dev/myproject/node_modules/puppeteer/lib/helper.js:111:15)
at Browser._createPageInContext (/home/uli/dev/myproject/node_modules/puppeteer/lib/Browser.js:177:31)
at processTicksAndRejections (internal/process/task_queues.js:85:5)
at async /home/uli/dev/myproject/index.js:8:16
-- ASYNC --
at Browser.<anonymous> (/home/uli/dev/myproject/node_modules/puppeteer/lib/helper.js:111:15)
at /home/uli/dev/myproject/index.js:8:30
at processTicksAndRejections (internal/process/task_queues.js:85:5)
(node:15692) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:15692) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Solution
You need to use
{defaultViewport: {width: 1920, height: 1080}}
instead of
{defaultViewport: '1920x1080'}
Full example:
// Minimal puppeteer example
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
defaultViewport: {width: 1920, height: 1080}
});
const page = await browser.newPage();
await page.goto('https://techoverflow.net', {waitUntil: 'domcontentloaded'});
// Make a screenshot
await page.screenshot({path: 'screenshot.png'});
await browser.close();
})();