多重設定

自 Vitest 3 起，您可以使用新的 browser.instances 選項來指定多個不同的瀏覽器設定。

相較於 測試專案 (test projects)，使用 browser.instances 的主要優勢在於其改進的快取機制。每個實例都將共用相同的 Vite 伺服器，這意味著檔案轉換處理和依賴預打包 (dependency pre-bundling) 只需執行一次。

多個瀏覽器

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

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: false 且未在 CI 環境中覆寫），Vitest 將會執行失敗且不會啟動任何測試。

在無頭模式下執行測試的功能不受此影響。只要它們沒有 headless: false，您仍然可以並行執行所有實例。