配置 Playwright

默认情况下，TypeScript 无法识别 provider 选项和额外的 expect 属性。请确保引用 @vitest/browser/providers/playwright，以便 TypeScript 能够识别这些自定义选项的定义：

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

或者，你也可以将其添加到 tsconfig.json 文件中的 compilerOptions.types 字段。请注意，在该字段中指定任何内容都将禁用 @types/* 包的自动加载功能。

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

Vitest 会在同一浏览器页面中运行所有测试。你可以在 instances 中配置 launch、connect 和 context 属性：

import { defineConfig } from 'vitest/config'

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

WARNING

在 Vitest 3 之前，这些选项位于 test.browser.providerOptions 属性中：

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

providerOptions 已弃用，推荐使用 instances。

launch

这些选项会直接传递给 playwright[browser].launch 命令。你可以在 Playwright 文档中查阅有关该命令和可用参数的更多信息。

WARNING

Vitest 会忽略 launch.headless 选项。请改用 test.browser.headless。

请注意，如果启用了 --inspect，Vitest 会将调试标志添加到 launch.args。

connect 3.2.0+

这些选项会直接传递给 playwright[browser].connect 命令。你可以在 Playwright 文档中查阅有关该命令和可用参数的更多信息。

WARNING

由于此命令连接到现有的 Playwright 服务器，因此任何 launch 选项都将被忽略。

context

Vitest 通过调用 browser.newContext() 为每个测试文件创建新的上下文。你可以通过指定自定义参数来配置此行为。

TIP

请注意，上下文是为每个测试文件创建的，而不是像 Playwright 测试运行器那样为每个测试创建的。

WARNING

Vitest 总是将 ignoreHTTPSErrors 设置为 true（如果你的服务器通过 HTTPS 提供服务），并将 serviceWorkers 设置为 'allow'，以支持通过 MSW 进行模块模拟。

还建议使用 test.browser.viewport 而不是在此处指定它，因为在无头模式下运行时该设置会失效。

actionTimeout 3.0.0+

• 默认值： 无超时（3.0.0 之前为 1 秒）

此值配置 Playwright 等待所有可访问性检查通过且操作实际完成的默认超时时间。

你还可以为每个操作单独配置超时：

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

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