How to full screen a browser in Playwright?

One of the things that newcomers to Playwright may find strange at first is that even when the browser is full screen, the content displayed remains in a small area.

The main reason for this is that in the default device parameters, separate values are defined for the viewport. The viewport is the area in the browser where the content is displayed, for example if you go to whatismyviewport you will see a value smaller than your screen resolution.

If you look at the viewport resolution in the default device parameters in Playwright, you will see that it remains quite small and since these values remain constant, the area where the content will be displayed remains the same even if the browser is made full screen.

  "Desktop Chrome": {
    "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.6312.4 Safari/537.36",
    "screen": {
      "width": 1920,
      "height": 1080
    },
    "viewport": {
      "width": 1280,
      "height": 720
    },
    "deviceScaleFactor": 1,
    "isMobile": false,
    "hasTouch": false,
    "defaultBrowserType": "chromium"
  },

Source: deviceDescriptorsSource.json

I did some research to solve this situation and the solutions I found were either directly wrong or not enough. As a result of my own experiments, I obtained the solution I found the most suitable and it is as follows:

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

In the example above, I have added additional parameters for Chromium in the playwright.config.ts file. The argument in launchOptions already makes the Chromium (and of course Chrome) browser window fullscreen, but as I mentioned at the beginning of this article, the viewport resolution remains constant, so the area where the content is displayed is still small.

In order for the viewport resolution to change dynamically, the viewport parameter must be set to null, but if you do this alone, it is not enough because you get the following error when you try to run the test:

Error: "deviceScaleFactor" option is not supported with null "viewport"

And that's why I also defined the deviceScaleFactor parameter as undefined. When you run the test in its final form, the browser now comes up full screen as it should in reality.

If you found my article useful, you can like it and share it for the benefit of people around you, thank you.