多种设置

你可以使用 browser.instances 选项来指定多个不同的浏览器设置。

与 测试项目 相比，使用 browser.instances 的最大好处在于缓存效率更高。所有项目会共享同一个 Vite 服务器，因此文件转换和 依赖的预打包 只需进行一次即可。

多个浏览器

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

vitest.config.ts

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

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

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 会将 browser 作为项目名称。

过滤

你可以使用 --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' },
      ]
    }
  }
})