跳至主要內容

視覺測試

它能做什麼？​

WebdriverIO 為以下項目提供螢幕、元素或整頁的圖片比較：

  • 🖥️ 桌面瀏覽器（Chrome / Firefox / Safari / Microsoft Edge）
  • 📱 行動/平板瀏覽器 (Android 模擬器上的 Chrome / iOS 模擬器上的 Safari / 模擬器 / 透過 Appium 的實際裝置)
  • 📱 原生應用程式 (Android 模擬器 / iOS 模擬器 / 透過 Appium 的實際裝置) (🌟 全新 🌟)
  • 📳 透過 Appium 的混合應用程式

透過 @wdio/visual-service，它是一個輕量級的 WebdriverIO 服務。

這可讓您

  • 將螢幕/元素/整頁畫面與基準比較或儲存
  • 在沒有基準時自動建立基準
  • 遮蔽自訂區域，甚至在比較期間自動排除狀態列和/或工具列（僅限行動裝置）
  • 增加元素維度螢幕截圖
  • 在網站比較期間隱藏文字，以
    • 提高穩定性並防止字體渲染不穩定
    • 僅專注於網站的版面配置
  • 使用不同的比較方法和一組額外的匹配器，以獲得更易於閱讀的測試
  • 驗證您的網站將如何透過鍵盤支援 Tab 鍵，另請參閱瀏覽網站的 Tab 鍵
  • 以及更多內容，請參閱服務和方法選項

此服務是一個輕量級模組，用於擷取所有瀏覽器/裝置所需資料和螢幕截圖。比較功能來自 ResembleJS。如果您想在線上比較圖片，可以查看線上工具。

注意：針對原生/混合應用程式

方法 saveScreen、saveElement、checkScreen、checkElement 和匹配器 toMatchScreenSnapshot 和 toMatchElementSnapshot 可用於原生應用程式/內容。

當您想要將其用於混合應用程式時，請在您的服務設定中使用屬性 isHybridApp:true。

安裝​

最簡單的方法是透過以下方式，將 @wdio/visual-service 作為開發依賴項保留在您的 package.json 中：

npm install --save-dev @wdio/visual-service

用法​

@wdio/visual-service 可以作為一般服務使用。您可以使用以下程式碼在您的組態檔中設定它

import path from "node:path";

// wdio.conf.ts
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // Some options, see the docs for more
                baselineFolder: path.join(process.cwd(), "tests", "baseline"),
                formatImageName: "{tag}-{logName}-{width}x{height}",
                screenshotPath: path.join(process.cwd(), "tmp"),
                savePerInstance: true,
                // ... more options
            },
        ],
    ],
    // ...
};

更多服務選項請見此處。

在您的 WebdriverIO 組態中設定完成後，您可以繼續將視覺判斷新增至您的測試。

WebdriverIO MultiRemote​

我們也支援 MultiRemote。為了使其正常運作，請確保將 wdio-ics:options 新增至您的功能，如下所示。這將確保每個螢幕截圖都有其唯一的名稱。

撰寫您的測試與使用 測試執行器相比，不會有任何不同

// wdio.conf.js
export const config = {
    capabilities: {
        chromeBrowserOne: {
            capabilities: {
                browserName: "chrome",
                "goog:chromeOptions": {
                    args: ["disable-infobars"],
                },
                // THIS!!!
                "wdio-ics:options": {
                    logName: "chrome-latest-one",
                },
            },
        },
        chromeBrowserTwo: {
            capabilities: {
                browserName: "chrome",
                "goog:chromeOptions": {
                    args: ["disable-infobars"],
                },
                // THIS!!!
                "wdio-ics:options": {
                    logName: "chrome-latest-two",
                },
            },
        },
    },
};

以程式設計方式執行​

以下是如何透過 remote 選項使用 @wdio/visual-service 的最小範例

import { remote } from "webdriverio";
import VisualService from "@wdio/visual-service";

let visualService = new VisualService({
    autoSaveBaseline: true,
});

const browser = await remote({
    logLevel: "silent",
    capabilities: {
        browserName: "chrome",
    },
});

// "Start" the service to add the custom commands to the `browser`
visualService.remoteSetup(browser);

await browser.url("https://webdriverio.dev.org.tw/");

// or use this for ONLY saving a screenshot
await browser.saveFullPageScreen("examplePaged", {});

// or use this for validating. Both methods don't need to be combined, see the FAQ
await browser.checkFullPageScreen("examplePaged", {});

await browser.deleteSession();

瀏覽網站的 Tab 鍵​

您可以透過鍵盤 TAB 鍵檢查網站是否可訪問。測試此可訪問性部分一直是一項耗時（手動）的工作，並且很難透過自動化完成。透過方法 saveTabbablePage 和 checkTabbablePage，您現在可以在您的網站上繪製線條和點，以驗證 Tab 鍵順序。

請注意，這僅適用於桌面瀏覽器，不適用於行動裝置。所有桌面瀏覽器都支援此功能。

注意

這項工作靈感來自 Viv Richards 關於「使用視覺測試和 JavaScript 自動化頁面 Tab 鍵流程」的部落格文章。

選取可使用 Tab 鍵的元素的方式是根據模組 tabbable。如果關於 Tab 鍵有任何問題，請查看 README.md，尤其是 更多詳細資訊章節。

運作方式​

這兩種方法都會在您的網站上建立一個 canvas 元素，並繪製線條和點，以向您顯示使用者使用時您的 Tab 鍵會去哪裡。之後，它會建立一個整頁螢幕截圖，讓您全面了解流程。

重要

僅當您需要建立螢幕截圖，而且不想將其與基準圖片比較時，才使用 saveTabbablePage。

當您想要將 Tab 鍵流程與基準比較時，可以使用 checkTabbablePage 方法。您不需要同時使用這兩種方法。如果已經建立基準圖片（可以在實例化服務時透過提供 autoSaveBaseline: true 自動完成），則 checkTabbablePage 會先建立 *實際* 圖片，然後將其與基準比較。

選項​

這兩種方法都使用與saveFullPageScreen或compareFullPageScreen相同的選項。

範例​

這是在我們的 天竺鼠網站上 Tab 鍵如何運作的範例

WDIO tabbing example

自動更新失敗的視覺快照​

透過新增引數 --update-visual-baseline，透過命令列更新基準圖片。這將

  • 自動複製實際拍攝的螢幕截圖並將其放入基準資料夾中
  • 如果有差異，則會讓測試通過，因為基準已更新

用法

npm run test.local.desktop  --update-visual-baseline

當以記錄資訊/除錯模式執行時，您會看到新增以下記錄

[0-0] ..............
[0-0] #####################################################################################
[0-0]  INFO:
[0-0]  Updated the actual image to
[0-0]  /Users/wswebcreation/Git/wdio/visual-testing/localBaseline/chromel/demo-chrome-1366x768.png
[0-0] #####################################################################################
[0-0] ..........

Typescript 支援​

我們現在也支援 typescript 類型。將以下內容新增至您的 tsconfig.json 中的 types

{
    "compilerOptions": {
        "types": ["@wdio/visual-service"]
    }
}

系統需求​

5 版及更新版本​

對於 5 版及更新版本，此模組是一個純粹的 JavaScript 型模組，除了通用專案需求之外，沒有其他系統依賴項。它使用 Jimp，這是一個完全以 JavaScript 撰寫的 Node 圖片處理程式庫，沒有任何原生依賴項。

版本 4 及更低版本​

對於版本 4 及更低版本，此模組依賴於 Canvas，一個 Node.js 的 canvas 實作。Canvas 依賴於 Cairo。

安裝細節​

預設情況下，macOS、Linux 和 Windows 的二進制檔案將在您的專案執行 npm install 時下載。如果您沒有支援的作業系統或處理器架構，則該模組將在您的系統上編譯。這需要幾個依賴項，包括 Cairo 和 Pango。

有關詳細的安裝資訊，請參閱 node-canvas wiki。以下是常見作業系統的一行安裝指令。請注意，libgif/giflib、librsvg 和 libjpeg 是可選的，僅分別需要用於支援 GIF、SVG 和 JPEG。需要 Cairo v1.10.0 或更高版本。

使用 Homebrew

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

Mac OS X v10.11+: 如果您最近更新到 Mac OS X v10.11+ 並且在編譯時遇到問題，請執行以下命令：xcode-select --install。 在 Stack Overflow 上閱讀更多關於此問題的資訊。如果您安裝了 Xcode 10.0 或更高版本，則要從原始碼建置，您需要 NPM 6.4.1 或更高版本。

歡迎！我能幫上什麼忙？

WebdriverIO AI Copilot