How to maximize the Window size in Playwright? [duplicate]

Question

I'm running my Playwright test scenarios and facing an issue while trying to run scenarios with windows “maximized” / full window.

I set viewport as null for browser context, and it works in maximized view on local, but on remote-cloud-providers like LambdaTest/SauceLabs it works only with reduced size.

I tried with view port it does not work: https://playwright.dev/docs/api/class-browser/#browser-new-context-option-viewport.

Chancellor

Please provide enough code so others can better understand or reproduce the problem. – Gustatory

Specify your language- Python/TS/C#/etc.... It changes from language to another – Stealth

nodeJS, I'm using the sample repository provided my these cloud platforms – Chancellor

Answer 1

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

Reference:

Playwright - Javascript - Maximize Browser

Ford

Answer 2

First Way - Via playwright.config file

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:

// 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,
      },
    },
  ],
});

Second Way - In the test itself

const browser = await chromium.launch({
    headless: false,
    args: ["--start-maximized"],
});
const context = await browser.newContext({ viewport: null });
const page = await context.newPage();

Again, note that you follow these steps:

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

Stealth

Can you specify with respect to Browserstack? – Chancellor