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.

The playwright has several methods for maximising the window or changing the viewport size. Let’s learn each one.

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.

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

Maximize browser using viewport in playwright

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.

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({ noViewport: true });
    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);
    
  });
});

Maximize window using start-maximized argument in playwright

Code Breakdown

  • Here, args: [‘–start-maximized’] will launch the browser in maximised mode.
  • 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)
  
});

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.

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.

Related Articles