配置 WebdriverIO

Playwright 與 WebdriverIO

如果您的專案尚未採用 WebdriverIO，我們建議優先考慮使用 Playwright，因為其設定更為簡便，且 API 彈性更高。

預設情況下，TypeScript 無法識別提供者選項及額外的 expect 屬性。請務必引入 @vitest/browser/providers/webdriverio，以便 TypeScript 能夠取得自訂選項的定義：

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

或者，您也可以將其加入 tsconfig.json 檔案中的 compilerOptions.types 欄位。請注意，在此欄位中指定任何內容將會停用 @types/* 套件的自動載入功能。

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

Vitest 會開啟單一頁面來執行同一檔案中的所有測試。您可以在 instances 中設定 RemoteOptions 所指定的任何屬性：

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    browser: {
      instances: [
        {
          browser: 'chrome',
          capabilities: {
            browserVersion: 86,
            platformName: 'Windows 10',
          },
        },
      ],
    },
  },
})

WARNING

在 Vitest 3 之前，這些選項是透過 test.browser.providerOptions 屬性進行設定的：

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

providerOptions 已被棄用，請改用 instances。

您可以在 WebdriverIO 說明文件中找到大多數可用的選項。請注意，Vitest 將會忽略所有測試執行器選項，因為我們僅使用 webdriverio 的瀏覽器能力。

TIP

最實用的選項位於 capabilities 物件中。WebdriverIO 允許巢狀功能，但 Vitest 將會忽略這些選項，因為我們依賴不同的機制來啟動多個瀏覽器。

請注意，Vitest 將會忽略 capabilities.browserName。請改用 test.browser.instances.name。