Playwright - Javascript - Maximize Browser

Question

I am trying to maximize the browser window using Playwright. I tried below code but the browser is not maximized to full mode.

hooks.cjs class:

const playwright = require('playwright');
const { BeforeAll, Before, After, AfterAll , Status } = require('@cucumber/cucumber');

// Launch options.
const options = {
    slowMo: 100,
    ignoreHTTPSErrors: true,
};

// Create a global browser for the test session.
BeforeAll(async () => {
    console.log('Launch Browser');
    global.browser = await playwright['chromium'].launch({ headless: false,
        args:['--window-size=1920,1040']}); // --start-maximized //defaultViewport: null
    //global.context = await playwright['chromium'].launch({ args: ['--start-maximized'] });
})

// Create a new browser context for each test.
Before(async () => {
    console.log('Create a new Context and Page')
    global.context = await global.browser.newContext()
    global.page = await global.context.newPage()
})

// Close the page and context after each test.
After(async () => {
    console.log('Close Context and Page');
    await global.page.close();
    await global.context.close();
})

// Take Screenshot if Scenario Fails
After(async function (scenario) {
    if (scenario.result.status === Status.FAILED) {
        const buffer = await global.page.screenshot({ path: `reports/${scenario.pickle.name}.png`, fullPage: true })
        this.attach(buffer, 'image/png');
    }
})

// Close Browser
AfterAll(async () => {
    console.log('close Browser')
    await global.browser.close()
});

I'm running with npm: npm run test -- --tags "@Begin"

I have tried in many ways, but I cannot launch browser maximized. How can I do this?

Simeon

have you tried viewport: { width: 1920, height: 1040 } instead of args in the launch options. – Kumkumagai

See this - tried and tested solution - stackoverflow.com/a/77281854 – Voter

Answer 1

If you want to start your browser maximized, then use the --start-maximized flag when starting the browser, and disable fixed viewport when launching a context or page. Example

global.browser = await playwright['chromium'].launch({ headless: false,
                 args:['--start-maximized']});
global.context = await global.browser.newContext({ viewport: null})

In python, use the equivalent no_viewport arg and pass it as True when starting a context

Cocotte

It works: The only thing that --start-maximized didn't worked, so I changed by --window-size=1920,1040 and works – Simeon

Only works for Chromium – Simeon

Answer 2

You need 3 things:

1. Add args: ["--start-maximized"] to the launchOptions
2. Remove the DeviceDescriptor from your project
3. Set viewport: null in your project

Example playwright.config.ts file:

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  use: {
    launchOptions: {
      // 1
      args: ["--start-maximized"],
    },
  },

  projects: [
    {
      name: "chromium",
      use: {
        // 2 (Make sure device is not set)
        // ...devices["Desktop Chrome"],

        // 3
        viewport: null,
      },
    },
  ],
});

In my example I'm using Playwright's config file - best practice in most cases,
but this can be done in the test itself - as long as you follow the three key-things list.

Bireme

Answer 3

You can pass arguments like below during browser launch:

const browser=  await chromium.launch({ headless: false,
                    args:['--window-size=1920,1040']})

const context= await browser.newContext()

const page = await context.newPage()

Voter

Answer 4

projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'],
    deviceScaleFactor: undefined,
    viewport:null,
    launchOptions: {
      args: ["--start-maximized"],
    }
      }, 
    }
]

Please find the projects in playwright.config.ts file and this should work.

Burlie