Playwright Maximize Window: 4 Ways to Set Viewport Size

Last updated on August 2nd, 2026 at 09:57 am

Playwright is a powerful browser automation tool that allows developers to test and scrape web applications across multiple browsers. In playwright automation, sometimes you need to maximize the browser window to ensure consistent viewport sizes or to test responsive designs.

QUICK ANSWER: The fastest way to maximize the browser window in Playwright is to launch Chromium with the –start-maximized argument and set viewport: null when creating the browser context (no_viewport=True in Python). This skips Playwright’s default 1280×720 viewport and lets the browser fill the actual screen. If you just need a large fixed viewport for responsive testing rather than a true maximized window, set an explicit size like 1920×1080 in browser.newContext() instead.

The playwright has several methods for maximising the window or changing the viewport size. Let’s learn each one. Examples below are tested against Playwright 1.61 for both Node.js and Python.

Maximize Window Using the Viewport Option

In Playwright automation, you can simulate maximizing the browser window by setting a large viewport size when launching the browser. Specify the width and height parameters in the viewport option to control the window dimensions.

Here’s an example of how to simulate maximizing the window using a large viewport in Playwright.

Note: The following examples are for JavaScript/TypeScript with Playwright. For Python examples, see the section below.

Example of maximizing the window using the viewport in Playwright

const { test, expect } = require('@playwright/test');

test('Maximize browser using viewport', async ({ browser }) => {
//Set viewport zise.
  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });
  //Launch browser maximised.
  const page = await context.newPage();
  await page.goto('https://example.com');
  await expect(page).toHaveTitle('Example Domain');
  await page.waitForTimeout(5000);
});

Code Breakdown

• browser.newContext({ viewport: { width: 1920, height: 1080 }: This syntax will set and maximize the browser window size to 1920 width and 1080 height.
• await context.newPage(): It will launch the browser maximised with a defined width and height.

Advanced Playwright Tutorial Quick Links

• Hover Over Element in Playwright With Example
• Focus on an Element Using Playwright
• Press Keys in Playwright: Quick Guide
• Download and Save File In Playwright
• Upload Files in Playwright – Complete Guide
• Take a Screenshot in Playwright With Example

Maximize Browser Using the –start-maximized Launch Argument

Another way to maximize the browser in Playwright is by using the –start-maximized Launch Argument.

import { test, chromium } from '@playwright/test';

test.describe('Maximized Browser Tests', () => {
  let browser;

  test.beforeAll(async () => {
    // Launch browser with maximized argument
    browser = await chromium.launch({
      args: ['--start-maximized'],
      headless: false
    });
  });

  test.afterAll(async () => {
    await browser.close();
  });

  test('should open in maximized window', async () => {
    const context = await browser.newContext({ viewport: null });
    const page = await context.newPage();
    await page.goto('https://example.com');
    
    // Verify window is maximized by checking viewport matches screen size
    const viewportSize = await page.evaluate(() => ({
      width: window.innerWidth,
      height: window.innerHeight
    }));
    
    //Print viewport size in console.
    console.log('Viewport size:', viewportSize);
    
  });
});

Code Breakdown

• Here, args: [‘–start-maximized’] will launch the browser in maximised mode.
• viewport: null tells Playwright not to override the window with its own default size, so the browser actually fills the screen instead of just reporting a large viewport.
• Next, we open the test URL in the browser.
• Then it will get the viewport size and print it to the console

Per-Test Viewport Maximization

You can maximize the window per test as well. Here is an example to understand how to maximize by reading the screen dimensions and setting the browser window size according to them.

import { test, expect } from '@playwright/test';

test('should maximize viewport for test', async ({ browser }) => {
  const context = await browser.newContext();
  const page = await context.newPage();
  
  // Get screen dimensions and set viewport
  const dimensions = await page.evaluate(() => ({
    width: window.screen.availWidth,
    height: window.screen.availHeight
  }));

  console.log("dimension width: "+dimensions.width)
  console.log("dimention height: "+dimensions.height)
  
  await page.setViewportSize(dimensions);
  await page.goto('https://example.com');  
  
  // Verify viewport matches screen size
  const viewportSize = await page.evaluate(() => ({
    width: window.innerWidth,
    height: window.innerHeight
  }));
  
  expect(viewportSize.width).toBe(dimensions.width);
  console.log("viewportSize width: "+viewportSize.width)
  console.log("viewportSize height: "+viewportSize.height)
  
});

Set It Globally via the Playwright Config File

If every test in your suite should launch maximized, setting it per test file gets repetitive fast. A cleaner approach is to set it once in playwright.config.ts, so every test picks it up automatically without repeating the same setup code.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    viewport: null,
    launchOptions: {
      args: ['--start-maximized'],
    },
  },
});

Code Breakdown

• viewport: null in the shared use block applies to every test project, the same effect as setting it per context, but defined once.
• launchOptions.args: ['--start-maximized'] passes the launch argument globally, so you don’t need to call chromium.launch() manually in each test file.
• Every test that uses the default project configuration now launches maximized without any extra code inside the test itself.

If one specific test needs a different size instead of the global default, override it locally with test.use():

import { test } from '@playwright/test';

test.describe('Fixed viewport for this file only', () => {
  test.use({ viewport: { width: 1280, height: 720 } });

  test('runs at a fixed size, not maximized', async ({ page }) => {
    await page.goto('https://example.com');
  });
});

This is the approach I default to for any real test suite, since it removes the risk of one test file quietly missing the setup because someone forgot to copy it in. Set it once in the config, override only where a test genuinely needs something different.

How to Maximize Browser Window in Playwright Python

For Python users, here’s how to maximize the browser window:

Option 1: Set Viewport to Full Screen

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
context = browser.new_context(
viewport={'width': 1920, 'height': 1080}
)
page = context.new_page()
page.goto('https://example.com')

Option 2: Start with Maximized Window

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
browser = p.chromium.launch(
headless=False,
args=['--start-maximized']
)
context = browser.new_context(no_viewport=True)
page = context.new_page()
page.goto('https://example.com')

Code Breakdown

• We used window.screen.availWidth and window.screen.availHeight to get the screen’s dimensions (width and height).
• Used the setViewportSize(dimensions) method to set the screen size as per the screen dimensions.
• Verified viewport size readings and printed them in the console.

For more Playwright Python tutorials, visit the Playwright Python Tutorials.

Common Issue: Viewport vs Window Size

A common confusion is the difference between viewport size and window size.

• Viewport size: The visible area of the browser window (what the user sees).
• Window size: The entire browser window including toolbars, tabs, and scrollbars.

If you set viewport: { width: 1920, height: 1080 } but your screen resolution is smaller, the window may not actually maximize. The browser will open at the viewport size, not the full screen.

Solution: Use viewport: null with –start-maximized to let the browser truly maximize and resize to your screen’s full resolution.

I ran into this exact mismatch on a CI runner where the screen resolution didn’t match my local machine, which is why I default to –start-maximized with viewport: null for anything that genuinely needs to fill the real screen, rather than relying on a fixed viewport size.

Playwright Fullscreen: Is There a Difference?

“Fullscreen” and “maximized” get used interchangeably in search, but they aren’t the same thing in a browser. A maximized window still shows the tabs, address bar, and toolbar; it just fills the screen. True fullscreen, like pressing F11 in Chrome, hides all of that browser chrome and shows only the page.

Playwright doesn’t expose a dedicated fullscreen() method. The closest equivalent is the –start-maximized plus viewport: null combination covered above. If you specifically need F11-style fullscreen for a visual test, you can send the key press yourself with page.keyboard.press(‘F11’) after launch, but support for this varies by OS and browser and isn’t guaranteed to work in a headless CI environment.

Which Method Should You Use?

Method	Code	Best For
Viewport option	viewport: { width: 1920, height: 1080 }	When you need to test specific screen sizes for responsive design.
Launch option	args: ['--start-maximized'] with noViewport: true	When you want the browser to truly fill the entire screen.
Dynamic detection	page.setViewportSize(dimensions)	When you need to adapt to different screen resolutions dynamically.
Global config	use: { viewport: null, launchOptions: { args: ['--start-maximized'] } } in playwright.config.ts	When every test in your suite should launch maximized by default.

Best Practices

• Consistency: Choose one method and stick with it across your tests for consistency
• Headless Mode: Remember that in headless mode, “maximized” doesn’t have the same meaning as in headed browsers
• Responsive Testing: Consider testing at multiple viewport sizes, not just maximized
• Browser Differences: Some methods may behave differently across Chromium, Firefox, and WebKit

Final Thoughts

In Playwright automation, you can use the Viewport Option and start-maximized parameter to set the viewport size and maximize the window. Also, you can get the dimensions of your screen and set the screen size based on the dimensions. Playwright’s default viewport is 1280×720 when none of these options are set, which is worth knowing if a test behaves differently than you expect on a fresh context.

Also, you can get the dimensions of your screen and set the screen size based on the dimensions, or set it once globally in your Playwright config file so every test picks it up automatically. Playwright’s default viewport is 1280×720 when none of these options are set, which is worth knowing if a test behaves differently than you expect on a fresh context.

Frequently Asked Question