Configuring Playwright

To run tests using playwright, you need to install the @vitest/browser-playwright npm package and specify its playwright export in the test.browser.provider property of your config:

vitest.config.js

import { playwright } from '@vitest/browser-playwright'
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      provider: playwright(),
      instances: [{ browser: 'chromium' }]
    },
  },
})

You can configure the launchOptions, connectOptions and contextOptions when calling playwright at the top level or inside instances:

vitest.config.js

import { playwright } from '@vitest/browser-playwright'
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      // shared provider options between all instances
      provider: playwright({
        launchOptions: {
          slowMo: 50,
          channel: 'chrome-beta',
        },
        actionTimeout: 5_000,
      }),
      instances: [
        { browser: 'chromium' },
        {
          browser: 'firefox',
          // overriding options only for a single instance
          // this will NOT merge options with the parent one
          provider: playwright({
            launchOptions: {
              firefoxUserPrefs: {
                'browser.startup.homepage': 'https://example.com',
              },
            },
          })
        }
      ],
    },
  },
})

WARNING

Unlike Playwright test runner, Vitest opens a single page to run all tests that are defined in the same file. This means that isolation is restricted to a single test file, not to every individual test.

launchOptions

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.

connectOptions

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

WARNING

Since this command connects to an existing Playwright server, any launch options will be ignored.

contextOptions

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 always 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

• Default: no timeout

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'

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