CODEWITHSUNDEEP
node.jspuppeteer
Nikkie08
Nikkie08

Reputation: 583

How to maximize browser window using puppeteer?

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

Upvotes: 24

Views: 29170

Answers (8)

chriskruki
chriskruki

Reputation: 79

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".

Upvotes: 1

PDHide
PDHide

Reputation: 19979

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

Upvotes: 6

Anwar Javed
Anwar Javed

Reputation: 377

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

Upvotes: 3

cdmalcl
cdmalcl

Reputation: 201

I also met this problem

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

Upvotes: 0

Mohammad Faisal
Mohammad Faisal

Reputation: 2432

This works fine for me.

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

Upvotes: 51

pavelsaman
pavelsaman

Reputation: 8352

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

Upvotes: 4

Dima Dorogonov
Dima Dorogonov

Reputation: 2553

In my case helped defaultViewport: null

Upvotes: 1

Anas Tiour
Anas Tiour

Reputation: 1432

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.

Upvotes: 0

Related Questions