Configuring Playwright

To run tests using playwright, you need to specify it in the test.browser.provider property in your config:

vitest.config.js

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

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

Vitest opens a single page to run all tests in the same file. You can configure the launch, connect and context when calling playwright at the top level or inside instances:

vitest.config.js

import { playwright } from '@vitest/browser/providers/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',
              },
            },
          })
        }
      ],
    },
  },
})

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/context'

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