How to maximize browser window using puppeteer?

Question

I am trying to maximize the browser window using puppeteer. I tried below code but the browser is not maximized to full mode. I also did not find any function available in puppeteer library to maximize the window.

(async () => {
  const browser = await puppeteer.launch({headless: false , slowMo: 100, rgs: ['--start-fullscreen', '--window-size=1920,1080'], executablePath: 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe' });
  const page = await browser.newPage();

  await page.setViewport({ width: 1920, height: 1080 });

Answer 1

This works fine for me.

await puppeteer.launch({ 
      headless: false,
      defaultViewport: null,
      args: ['--start-maximized'] 
});

Answer 2

Beware that --start-maximized flag doesn't work in a headless mode. Then you have to set window size, e.g. like so: --window-size=1920,1040.

The way you can do it is you define both options in config:

config.json:

{
    "browserOptions": {
        "headless": {
            "headless": true,
            "args": [                
                "--window-size=1920,1040"        
            ],
            "defaultViewport": null
        },
        "gui": {
            "headless": false,
            "args": [                
                "--start-maximized"           
            ],
            "defaultViewport": null
        }
    }
}

and you choose which one to use based on an env variable - you can implement a tiny module for that:

Helpers/browserOption.js:

require('dotenv').config();
const config = require('../config.json');

module.exports = {
    browserConfig: () => {
        if (process.env.BROWSER === "headless") {
            return config.browserOptions.headless;
        }

        return config.browserOptions.gui;
    }
};

then if you set env variable BROWSER to headless, the concrete window size will be set upon browser launch, and if you choose to run your script in a non-headless mode, --start-maximized arg will be used.

In a script, it could be used like so:

const browserOption = require('./Helpers/browserOption');
const browser - await puppeteer.launch(browserOption.browserConfig());

Answer 3

args: ['--start-maximized'] is correct way to open chrome in maximized window

Answer 4

await page.goto("https://www.google.com")
await page.setViewport({
  width: 1920,
  height: 1080 ,
  deviceScaleFactor: 1,
});

you missed the deviceScaleFactor https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio