17

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 });

Example image

Thomas Dondorf
  • 23,416
  • 6
  • 84
  • 105
Nikkie08
  • 473
  • 2
  • 5
  • 12

8 Answers8

40

This works fine for me.

await puppeteer.launch({ 
      headless: false,
      defaultViewport: null,
      args: ['--start-maximized'] 
});
Mohammad Faisal
  • 2,144
  • 15
  • 26
3

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());
pavelsaman
  • 7,399
  • 1
  • 14
  • 32
3
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

Van_Paitin
  • 3,678
  • 2
  • 22
  • 26
PDHide
  • 18,113
  • 2
  • 31
  • 46
3

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

Anwar Javed
  • 325
  • 3
  • 11
1

In my case helped defaultViewport: null

Dima Dorogonov
  • 2,297
  • 1
  • 20
  • 23
0

I hope that typo I see in your code was made just in this post.

Chrome arguments are passed to the puppeteer.launch function as the values of the key args, and not rgs.

Also, in your Chrome configuration, I suspect that the flags --start-fullscreen and --window-size are contradictory.

Finally, you might be interested in the Chrome flag --start-maximized.

For a full list of Chrome flags, see this post by Peter Beverloo.

Anas Tiour
  • 1,344
  • 3
  • 17
  • 33
0

I also met this problem

My solution: first close or minimize the previously opened chrome window

cdmalcl
  • 191
  • 1
  • 10
0

I figured out a solution to minimize / maximize the actual window after a headful browser session is created. This solved my use case to have the ability to manipulate the window state (not viewport size) after the initial window creation (--start-maximized is useless for me)

You must utilize a Chrome Devtools Protocol session, as Puppeteer deliberately does not have native minimize/maximize functions. Note this solution assumes you're running puppeteer on a Chromium based browser.

Working demo using Node v18.12.1 and Puppeteer v20.8.0

(async () => {
    const puppeteer = require('puppeteer')
    const browser = await puppeteer.launch({ headless: false })
    const [page] = await browser.pages()

    // Chrome Devtools Protocol session
    const session = await page.target().createCDPSession()
    const { windowId } = await session.send("Browser.getWindowForTarget")

    await delay(1500) // Delay for illustrative purposes

    // Minimize
    await session.send("Browser.setWindowBounds", {
        windowId,
        bounds: { windowState: "minimized" },
    })

    await delay(1500)

    // Normal - required before maximizing if previously minimized
    await session.send("Browser.setWindowBounds", {
        windowId,
        bounds: { windowState: "normal" },
    })

    // Maximize
    await session.send("Browser.setWindowBounds", {
        windowId,
        bounds: { windowState: "maximized" },
    })

    await delay(1500)

    // Fullscreen - different from maximize
    await session.send("Browser.setWindowBounds", {
        windowId,
        bounds: { windowState: "fullscreen" },
    })

    await session.detach()
})()


const delay = (time) => {
    return new Promise((resolve) => {
        setTimeout(resolve, time)
    })
}

Note that if the page is minimized, you must switch the window state to "normal" before "maximized" to avoid an error. (Chromium window state handling source code)

I referenced this article and this puppeteer-extra plugin to figure out the above solution. If you're inclined to utilize that plugin, note that it may not work properly, as it only switches the window to "normal" mode, instead of "normal" then "maximized".

chriskruki
  • 51
  • 1
  • 5