跳至主要內容

元件測試

透過 WebdriverIO 的 瀏覽器執行器，您可以在實際的桌面或行動瀏覽器中執行測試，同時使用 WebdriverIO 和 WebDriver 通訊協定來自動化並與頁面上呈現的內容互動。 與其他僅允許針對 JSDOM 進行測試的測試框架相比，這種方法具有許多優勢。

它是如何運作的？​

瀏覽器執行器使用 Vite 來呈現測試頁面並初始化測試框架，以便在瀏覽器中執行您的測試。 目前它僅支援 Mocha，但 Jasmine 和 Cucumber 在路線圖上。 這允許測試任何種類的元件，即使對於不使用 Vite 的專案也是如此。

Vite 伺服器由 WebdriverIO 測試執行器啟動並配置，以便您可以像用於正常 e2e 測試一樣使用所有報表器和服務。 此外，它還初始化一個 browser 實例，允許您存取 WebdriverIO API 的子集，以便與頁面上的任何元素互動。 與 e2e 測試類似，您可以透過附加到全域範圍的 browser 變數或從 @wdio/globals 匯入它來存取該實例，具體取決於如何設定 injectGlobals。

WebdriverIO 內建支援以下框架

  • Nuxt：WebdriverIO 的測試執行器會偵測 Nuxt 應用程式並自動設定您的專案組合，並協助模擬 Nuxt 後端，請在Nuxt 文件中閱讀更多資訊
  • TailwindCSS：WebdriverIO 的測試執行器會偵測您是否正在使用 TailwindCSS，並將環境正確載入測試頁面

設定​

若要設定 WebdriverIO 以在瀏覽器中進行單元或元件測試，請透過以下方式啟動新的 WebdriverIO 專案

npm init wdio@latest ./
# or
yarn create wdio ./

一旦設定精靈開始，請選擇 browser 來執行單元和元件測試，並在需要時選擇其中一個預設值，否則如果您只想執行基本的單元測試，請選擇「其他」。 如果您已在專案中使用 Vite，您也可以設定自訂 Vite 設定。 如需更多資訊，請查看所有執行器選項。

資訊

注意：預設情況下，WebdriverIO 將在 CI 無頭模式下執行瀏覽器測試，例如，CI 環境變數設定為 '1' 或 'true'。 您可以使用執行器的headless選項手動設定此行為。

在此過程結束時，您應該會找到一個 wdio.conf.js，其中包含各種 WebdriverIO 設定，包括 runner 屬性，例如

wdio.comp.conf.js
loading...

透過定義不同的功能，您可以在不同的瀏覽器中執行測試，如果需要，還可以平行執行。

如果您仍然不確定所有內容是如何運作的，請觀看以下關於如何在 WebdriverIO 中開始使用元件測試的教學

測試 Harness​

您想在測試中執行什麼以及如何呈現元件完全取決於您。 但是，我們建議使用 Testing Library 作為公用程式框架，因為它為各種元件框架（例如 React、Preact、Svelte 和 Vue）提供外掛程式。 它對於將元件呈現到測試頁面中非常有用，並且會在每次測試後自動清除這些元件。

您可以根據需要將 Testing Library 原語與 WebdriverIO 命令混合使用，例如

component-testing/svelte-example.js
loading...

注意：使用 Testing Library 中的呈現方法有助於移除測試之間建立的元件。 如果您不使用 Testing Library，請確保將測試元件附加到在測試之間清除的容器。

設定腳本​

您可以在 Node.js 或瀏覽器中執行任意腳本來設定測試，例如，注入樣式、模擬瀏覽器 API 或連線到第三方服務。 WebdriverIO hooks 可用於在 Node.js 中執行程式碼，而 mochaOpts.require 允許您在載入測試之前將腳本匯入瀏覽器，例如

export const config = {
    // ...
    mochaOpts: {
        ui: 'tdd',
        // provide a setup script to run in the browser
        require: './__fixtures__/setup.js'
    },
    before: () => {
        // set up test environment in Node.js
    }
    // ...
}

例如，如果您想使用以下設定腳本來模擬測試中的所有 fetch() 呼叫

import { fn } from '@wdio/browser-runner'

// run code before all tests are loaded
window.fetch = fn()

export const mochaGlobalSetup = () => {
    // run code after test file is loaded
}

export const mochaGlobalTeardown = () => {
    // run code after spec file was executed
}

現在，您可以在測試中為所有瀏覽器要求提供自訂的回應值。 在 Mocha 文件中閱讀有關全域固定裝置的更多資訊。

監看測試和應用程式檔案​

有多種方法可以偵錯您的瀏覽器測試。 最簡單的方法是使用 --watch 旗標啟動 WebdriverIO 測試執行器，例如

$ npx wdio run ./wdio.conf.js --watch

這將先執行所有測試，並在所有測試執行完畢後停止。 然後您可以對個別檔案進行變更，這些檔案將會個別重新執行。 如果您設定 filesToWatch 指向您的應用程式檔案，則在變更您的應用程式時，它將重新執行所有測試。

偵錯​

雖然 (尚未) 無法在 IDE 中設定中斷點並讓遠端瀏覽器識別它們，但您可以使用 debug 命令隨時停止測試。 這允許您開啟開發人員工具，然後透過在來源索引標籤中設定中斷點來偵錯測試。

當呼叫 debug 命令時，您也會在終端機中獲得 Node.js repl 介面，顯示

The execution has stopped!
You can now go into the browser or use the command line as REPL
(To exit, press ^C again or type .exit)

按下 Ctrl 或 Command + c 或輸入 .exit 以繼續測試。

使用 Selenium Grid 執行​

如果您已設定 Selenium Grid 並透過該網格執行瀏覽器，您必須設定 host 瀏覽器執行器選項，以允許瀏覽器存取正在提供測試檔案的正確主機，例如

export const config: WebdriverIO.Config = {
    runner: ['browser', {
        // network IP of the machine that runs the WebdriverIO process
        host: 'http://172.168.0.2'
    }]
}

這將確保瀏覽器正確開啟託管在執行 WebdriverIO 測試之實例上的正確伺服器實例。

範例​

您可以在我們的範例儲存庫中找到使用熱門元件框架測試元件的各種範例。

歡迎！我能幫上什麼忙？

WebdriverIO AI Copilot