[BUG] Default viewport config doesn't set viewport to selected size

Context:

• Playwright Version: 1.21.1
• Operating System: Windows & ArchLinux
• Node.js version: 16.14.2
• Browser: Chromium, Firefox

Code Snippet

import type { PlaywrightTestConfig } from "@playwright/test";
import { devices } from "@playwright/test";

const config: PlaywrightTestConfig = {
  testDir: "./tests",
  timeout: 30 * 1000,
  expect: {
    timeout: 5000,
  },
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [["junit", { outputFile: "results.xml" }]],
  use: {
    actionTimeout: 0,
    baseURL: "localhost",

    trace: "on",

    video: {
      mode: "on",
      size: {
        width: 1920,
        height: 1080,
      },
    },
    viewport: {
      width: 1920,
      height: 1080,
    },
  },

  projects: [
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
      },
    },

    {
      name: "firefox",
      use: {
        ...devices["Desktop Firefox"],
      },
    },
  ],
};

export default config;

Describe the bug

Hello, I’m trying to set a default viewport for my test to 1920x1080, but when i’m putting this configuration into playwright.config.ts file, the current viewport is always 800x800. The unique workaround I found is to set manualy the viewport size of each page on my test file by doing await page.setViewportSize({ width: 1920, height: 1080 });.

Did I miss something?

[tsvetkovamaria]

Maybe it’s worth mentioning it in the docs, as it took me a while to figure out the reason of viewport not applied.

[pavelfeldman]

Global viewport size is the default value to use for all the projects. The problem here is that the following code in your project overwrites it (device includes viewport size):

use: {
  ...devices["Desktop Chrome"],
}

You can replace ...devices with browserName: 'firefox' if you only want to set the browser and not define the whole preset that includes browser, user agent, viewport. etc/