配置 Playwright

預設情況下，TypeScript 無法辨識提供者選項及額外的 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,
});