瀏覽器模式實驗性

本頁面提供關於 Vitest API 中實驗性瀏覽器模式功能的資訊。此功能允許您在原生瀏覽器中執行測試，從而可以存取諸如 window 和 document 之類的瀏覽器全域物件。此功能目前仍在開發階段，API 可能會在未來變更。

瀏覽器相容性

Vitest 使用 Vite dev server 運行你的測試，因此我們僅支援在 esbuild.target 選項中指定的功能（預設為 esnext）。

預設情況下，Vite 針對支援原生 ES Modules、原生 ESM 動態導入和 import.meta 的瀏覽器。此外，我們還利用 BroadcastChannel 在 iframe 之間進行通訊：

Chrome >=87
Firefox >=78
Safari >=15.4
Edge >=88

動機

我們開發 Vitest 瀏覽器模式功能，旨在改進測試工作流程，並達成更準確、更可靠的測試結果。這個測試 API 的實驗性新增功能，允許開發人員在本機瀏覽器環境中執行測試。在本節中，我們將探討此功能背後的動機及其對測試的好處。

多樣的測試方式

測試 JavaScript 程式碼的方式有很多種。一些測試框架在 Node.js 中模擬瀏覽器環境，而另一些則在真實瀏覽器中執行測試。在模擬環境方面，jsdom 是一個規格實作的範例，它透過與 Jest 或 Vitest 等測試執行器一起使用來模擬瀏覽器環境。另一方面，WebdriverIO 或 Cypress 等測試工具則允許開發人員在真實瀏覽器中測試他們的應用程式，而 Playwright 則提供瀏覽器引擎。

模擬環境的限制

在 jsdom 或 happy-dom 等模擬環境中測試 JavaScript 程式，簡化了測試設定，並提供了易於使用的 API。這使得它們適用於許多專案，並提升對測試結果的信心。然而，必須謹記，這些工具僅模擬瀏覽器環境，而非真實的瀏覽器，這可能會導致模擬環境與真實環境之間存在差異。因此，測試結果中可能會出現偽陽性或偽陰性結果。

為了在測試中達到最高程度的信心，在真實的瀏覽器環境中進行測試至關重要。因此，我們在 Vitest 中開發了瀏覽器模式功能，允許開發人員在原生瀏覽器中執行測試，以獲得更準確、更可靠的測試結果。透過瀏覽器層級測試，開發人員可以更有信心地確保他們的應用程式在真實場景中能夠按預期工作。

缺點

使用 Vitest 瀏覽器模式時，請務必考慮以下缺點：

早期開發階段

Vitest 的瀏覽器模式功能尚處於早期開發階段。因此，它可能尚未完全最佳化，並且可能存在一些尚未修正的錯誤或問題。建議使用者搭配使用獨立的瀏覽器端測試執行器，例如 WebdriverIO、Cypress 或 Playwright，以獲得更完善的 Vitest 瀏覽器體驗。

較長的初始化時間

Vitest 瀏覽器模式需要在初始化過程中啟動提供者 (provider) 和瀏覽器，這可能需要一些時間。與其他測試模式相比，這可能會導致更長的初始化時間。

設定

要在您的 Vitest 配置中啟用瀏覽器模式，您可以使用 --browser 標誌，或在您的 Vitest 設定檔中將 browser.enabled 欄位設定為 true。以下是使用 browser 欄位的配置範例：

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      name: 'chrome', // 瀏覽器名稱為必填
    },
  },
});

瀏覽器選項類型：

Vitest 中的瀏覽器選項取決於提供者 (provider)。如果您傳遞 --browser 參數，但未在設定檔中指定其名稱，Vitest 將會拋出錯誤。可用選項如下：

webdriverio (預設) 支援以下瀏覽器：
- firefox
- chrome
- edge
- safari
playwright 支援以下瀏覽器：
- firefox
- webkit
- chromium

跨瀏覽器測試：

當您在瀏覽器選項中指定瀏覽器名稱時，Vitest 預設會嘗試使用 WebdriverIO 執行指定的瀏覽器，並在該瀏覽器中執行測試。此功能使得在 CI 等環境中，跨瀏覽器測試的使用和配置更加容易。如果您不想使用 WebdriverIO，您可以使用 browser.provider 選項配置自訂瀏覽器提供者 (provider)。

要使用 CLI 指定瀏覽器，請使用 --browser 標誌，後跟瀏覽器名稱，如下所示：

npx vitest --browser=chrome

或者，您可以透過點表示法向 CLI 提供瀏覽器選項：

npx vitest --browser.name=chrome --browser.headless

NOTE

將 Safari 瀏覽器選項與 WebdriverIO 搭配使用時，需要在您的裝置上執行 sudo safaridriver --enable 命令來啟用 safaridriver。

此外，在執行測試時，Vitest 將嘗試安裝一些驅動程式，以與 safaridriver 相容。

無頭模式

無頭模式是瀏覽器模式提供的另一個選項。在無頭模式下，瀏覽器在沒有使用者介面的背景中執行，這使得它對於執行自動化測試非常有用。 Vitest 中的 headless 選項可以設定為布林值，以啟用或停用無頭模式。

以下是一個啟用無頭模式的配置範例：

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      headless: true,
    },
  },
});

您也可以在 CLI 中使用 --browser.headless 標誌設定無頭模式，如下所示：

npx vitest --browser.name=chrome --browser.headless

在這種情況下，Vitest 將會使用 Chrome 瀏覽器在無頭模式下執行。

限制

執行緒阻斷對話框

使用 Vitest 瀏覽器模式時，請務必注意，alert 或 confirm 等會阻塞執行緒的對話方塊無法在本機使用。這是因為它們會阻塞網頁，導致 Vitest 無法繼續與頁面通訊，進而導致執行掛起。

在這種情況下，Vitest 會為這些 API 提供預設模擬，並設定預設的回傳值。這確保了即使使用者不小心使用了同步彈出視窗 Web API，執行也不會停止。不過，仍然建議使用者模擬這些 Web API，以獲得更好的體驗。在模擬中閱讀更多內容。

瀏覽器模式 實驗性 ​

瀏覽器相容性 ​

動機 ​

多樣的測試方式 ​

模擬環境的限制 ​

缺點 ​

早期開發階段 ​

較長的初始化時間 ​

設定 ​

瀏覽器選項類型： ​

跨瀏覽器測試： ​

無頭模式 ​

限制 ​

執行緒阻斷對話框 ​