Puppeteer Window Size


#1

Following workaround is shared in a puppeteer issue, to overcome puppeteer resize window problem;

args.push(`--window-size=${width},${height}`);
puppeteer.launch({ headless: false, args });
...
await page._client.send('Emulation.clearDeviceMetricsOverride')

How can we use this in CodeceptJS?


#2

You can override _startBrowser method in Puppeteer helper to make it work.


#3

You might be able to pass the argument in your config file (codecept.conf.js). Here’s ours:

   // https://peter.sh/experiments/chromium-command-line-switches/
    const chromiumArgs = [
      '--disable-web-security',
      '--ignore-certificate-errors',
      '--disable-infobars',
      '--allow-insecure-localhost',
      '--disable-device-discovery-notifications',
    ];

const chromeLocation = process.env.CHROME_LOCATION || '2150,25';
chromiumArgs.push(`--window-position=${chromeLocation}`);

const puppeteerHelper = {
  Puppeteer: {
chrome: { args: chromiumArgs },
  },
};

exports.config = {
   helpers: puppeteerHelper,
   <-- deleted-->
 },

#4

I didn’t know you can override helper’s internal methods. Do you have code samples?


#5

Hi David,

Does this code work on your project?

I am using as follows, but window-size and window-position makes no difference;

const chromiumArgs = [
    '--disable-web-security',
    '--ignore-certificate-errors',
    '--disable-infobars',
    '--allow-insecure-localhost',
    '--disable-device-discovery-notifications',
    '--window-size=1920,1080',
    '--window-posizition=200,0'
];

exports.config = {
    helpers: {
        Puppeteer: {
            url: "http://site",
            waitForNavigation: "load",
            show: true,
            waitForAction: 300,
            restart: false,
            manualStart: true,
            keepBrowserState: true,
            keepCookies: true,
            chrome: {chromiumArgs}
        }
    }
}

#6

Looks like window position is misspelled. We don’t use window-size as resizeWindow works for us.(https://codecept.io/helpers/Puppeteer/#resizewindow)


#7

Ah, Ok. I fixed that, but no difference. resizeWindow just resizes the viewport for us. Some discussions say it is not possible to change window size with puppeteer and JS but some of them gives code to change the window size with positive feedbacks.


#8

I was able to get window-size to work here:


#9

Thank you david. This fixed the problem. I think the problem in my definition is the lack of "args: " in front of the chromiumArgs. @davert, this can be described in puppeteer documentation. It was important for me while we developed hundreds of tests and in every run we had to maximize the window manually.