[BUG] `TypeError: Cannot read property 'mode' of undefined` when `PlaywrightTestConfig.use.video` is `undefined`

[tats-u]

Context:

• Playwright Version: 1.22.2
• Operating System: Windows
• Node.js version: 14.15.4
• Browser: All (N/A)
• Extra: None

Code Snippet

--- playwright.config.bak.ts    2022-06-25 17:03:58.154821400 +0900
+++ playwright.config.ts        2022-06-25 17:05:11.162019500 +0900
@@ -22,6 +22,7 @@ const config: PlaywrightTestConfig = {
   },

   use: {
+    video: undefined,
     // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
     // More information: https://playwright.dev/docs/trace-viewer
     trace: 'retry-with-trace',

import { PlaywrightTestConfig, devices } from '@playwright/test'
import path from 'path'

// Reference: https://playwright.dev/docs/test-configuration
const config: PlaywrightTestConfig = {
  // Timeout per test
  timeout: 30 * 1000,
  // Test directory
  testDir: path.join(__dirname, 'e2e'),
  // If a test fails, retry it additional 2 times
  retries: 2,
  // Artifacts folder where screenshots, videos, and traces are stored.
  outputDir: 'test-results/',

  // Run your local dev server before starting the tests:
  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
  webServer: {
    command: 'npm run dev',
    port: 3000,
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
  },

  use: {
    video: undefined,
    // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
    // More information: https://playwright.dev/docs/trace-viewer
    trace: 'retry-with-trace',

    // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
    // contextOptions: {
    //   ignoreHTTPSErrors: true,
    // },
  },

  projects: [
    {
      name: 'Desktop Chrome',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    // {
    //   name: 'Desktop Firefox',
    //   use: {
    //     ...devices['Desktop Firefox'],
    //   },
    // },
    // {
    //   name: 'Desktop Safari',
    //   use: {
    //     ...devices['Desktop Safari'],
    //   },
    // },
    // Test against mobile viewports.
    {
      name: 'Mobile Chrome',
      use: {
        ...devices['Pixel 5'],
      },
    },
    {
      name: 'Mobile Safari',
      use: devices['iPhone 12'],
    },
  ],
}
export default config

Describe the bug

I set up an Next.js project with Playwright, change the Playwright sconfiguration to the above, and run a test.

yarn create-next-app --ts -e with-playwright with-playwright-app
cd with-playwright-app
cp playwright.config.ts playwright.config.bak.ts
editor playwright.config.ts
yarn playwright install
yarn playwright test --max-failures 2

Note: editor must be replaced with your fabvorite editor.

The result of the test is:

yarn run v1.22.17
$ E:\playwright-test\node_modules\.bin\playwright test --max-failures 2

Running 3 tests using 3 workers

  ✘  [Mobile Safari] › example.spec.ts:3:1 › should navigate to the about page (3s)
     [Mobile Chrome] › example.spec.ts:3:1 › should navigate to the about page
  ✘  [Desktop Chrome] › example.spec.ts:3:1 › should navigate to the about page (4s)


  1) [Desktop Chrome] › example.spec.ts:3:1 › should navigate to the about page ====================

    TypeError: Cannot read property 'mode' of undefined



  2) [Mobile Safari] › example.spec.ts:3:1 › should navigate to the about page =====================

    TypeError: Cannot read property 'mode' of undefined




  2 failed
    [Desktop Chrome] › example.spec.ts:3:1 › should navigate to the about page =====================
    [Mobile Safari] › example.spec.ts:3:1 › should navigate to the about page ======================
  1 skipped
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The error is due to the following line is tried to run:

playwright/packages/playwright-test/src/index.ts

Line 561 in 295ea7a

let videoMode = typeof video === 'string' ? video : video.mode;

This function is not called when video is not set in use.

[dgozman]

This is the same as #14989, fixed by #15119 for v1.24 release.