多实例设置

从 Vitest 3 开始，你可以使用新的 browser.instances 选项来配置多种不同的浏览器环境。

与传统的 测试项目 相比，使用 browser.instances 的主要优势在于改进了缓存机制。所有实例都将共享同一个 Vite 服务器，这意味着文件转换和依赖预打包只需执行一次。

多种浏览器

你可以使用 browser.instances 字段为不同的浏览器指定配置选项。例如，如果你想在多种浏览器中运行相同的测试，最简单的配置如下所示：

import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: 'playwright',
      headless: true,
      instances: [
        { browser: 'chromium' },
        { browser: 'firefox' },
        { browser: 'webkit' },
      ],
    },
  },
});

不同的配置

你也可以独立于浏览器指定不同的配置选项（尽管每个实例仍然可以包含 browser 字段）：

vitest.config.ts

import { defineConfig } from 'vitest/config';
export default defineConfig({
  test: {
    browser: {
      enabled: true,
      provider: 'playwright',
      headless: true,
      instances: [
        {
          browser: 'chromium',
          name: 'chromium-1',
          setupFiles: ['./ratio-setup.ts'],
          provide: {
            ratio: 1,
          },
        },
        {
          browser: 'chromium',
          name: 'chromium-2',
          provide: {
            ratio: 2,
          },
        },
      ],
    },
  },
});

example.test.ts

import { expect, inject, test } from 'vitest';
import { globalSetupModifier } from './example.js';

test('ratio works', () => {
  expect(inject('ratio') * globalSetupModifier).toBe(14);
});

在此示例中，Vitest 将在 chromium 浏览器中运行所有测试，但仅对第一个配置执行 './ratio-setup.ts' 文件，并根据 provide 字段 注入不同的 ratio 值。

WARNING

请注意，如果使用相同的浏览器名称，则需要定义自定义的 name 值。否则，Vitest 会将浏览器名称作为项目名称。

过滤

你可以使用 --project 标志 来过滤要运行的项目。如果未手动分配项目名称，Vitest 将自动使用浏览器名称作为项目名称。如果根配置已定义名称，Vitest 会将它们合并，例如：custom -> custom (browser)。

$ vitest --project=chromium

default

export default defineConfig({
  test: {
    browser: {
      instances: [
        // name: chromium
        { browser: 'chromium' },
        // name: custom
        { browser: 'firefox', name: 'custom' },
      ]
    }
  }
})

custom

export default defineConfig({
  test: {
    name: 'custom',
    browser: {
      instances: [
        // name: custom (chromium)
        { browser: 'chromium' },
        // name: manual
        { browser: 'firefox', name: 'manual' },
      ]
    }
  }
})

WARNING

Vitest 无法同时运行多个 headless 模式设置为 false（默认情况下）的实例。在开发时，你可以在终端中选择要运行的项目：

? Found multiple projects that run browser tests in headed mode: "chromium", "firefox".
Vitest cannot run multiple headed browsers at the same time. Select a single project
to run or cancel and run tests with "headless: true" option. Note that you can also
start tests with --browser=name or --project=name flag. › - Use arrow-keys. Return to submit.
❯   chromium
    firefox

如果你的 CI 环境中有多个非 headless 项目（即手动在配置中设置了 headless: false，且未在 CI 环境中被覆盖），Vitest 将会运行失败，并且不会启动任何测试。

在 headless 模式下运行测试的能力不受此影响。只要实例未将 headless 设置为 false，你仍然可以并行运行所有实例。