Configuring Playwright

By default, TypeScript doesn't recognize providers options and extra expect properties. Make sure to reference @vitest/browser/providers/playwright so TypeScript can pick up definitions for custom options:

vitest.shims.d.ts

/// <reference types="@vitest/browser/providers/playwright" />

Alternatively, you can also add it to compilerOptions.types field in your tsconfig.json file. Note that specifying anything in this field will disable auto loading of @types/* packages.

tsconfig.json

{
  "compilerOptions": {
    "types": ["@vitest/browser/providers/playwright"]
  }
}

Vitest opens a single page to run all tests in the same file. You can configure the launch and context properties in instances:

vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      instances: [
        {
          browser: 'firefox',
          launch: {},
          context: {},
        },
      ],
    },
  },
})

WARNING

Before Vitest 3, these options were located on test.browser.providerOptions property:

vitest.config.ts

export default defineConfig({
  test: {
    browser: {
      providerOptions: {
        launch: {},
        context: {},
      },
    },
  },
})

providerOptions is deprecated in favour of instances.

launch

These options are directly passed down to playwright[browser].launch command. You can read more about the command and available arguments in the Playwright documentation.

WARNING

Vitest will ignore launch.headless option. Instead, use test.browser.headless.

Note that Vitest will push debugging flags to launch.args if --inspect is enabled.

context

Vitest creates a new context for every test file by calling browser.newContext(). You can configure this behaviour by specifying custom arguments.

TIP

Note that the context is created for every test file, not every test like in playwright test runner.

WARNING

Vitest awlays sets ignoreHTTPSErrors to true in case your server is served via HTTPS and serviceWorkers to 'allow' to support module mocking via MSW.

It is also recommended to use test.browser.viewport instead of specifying it here as it will be lost when tests are running in headless mode.

actionTimeout 3.0.0+

• Default: no timeout, 1 second before 3.0.0

This value configures the default timeout it takes for Playwright to wait until all accessibility checks pass and the action is actually done.

You can also configure the action timeout per-action:

import { page, userEvent } from '@vitest/browser/context'

await userEvent.click(page.getByRole('button'), {
  timeout: 1_000,
})