メインコンテンツにスキップ

ビジュアルテスト

何ができますか？​

WebdriverIOは、画面、要素、またはフルページの画像比較を以下に対して提供します。

  • 🖥️ デスクトップブラウザ（Chrome / Firefox / Safari / Microsoft Edge）
  • 📱 モバイル/タブレットブラウザ（Androidエミュレータ上のChrome / iOSシミュレータ上のSafari / シミュレータ / 実機） Appium経由
  • 📱 ネイティブアプリ（Androidエミュレータ / iOSシミュレータ / 実機） Appium経由 (🌟 新機能 🌟)
  • 📳 ハイブリッドアプリ Appium経由

軽量なWebdriverIOサービスである@wdio/visual-serviceを通じて。

これにより、以下のことが可能になります。

  • 画面/要素/フルページの画面をベースラインと比較して保存または比較する
  • ベースラインがない場合は、自動的にベースラインを作成する
  • カスタム領域をブロックし、比較中にステータスバーやツールバー（モバイルのみ）を自動的に除外する
  • 要素の寸法のスクリーンショットを拡大する
  • ウェブサイトの比較中にテキストを非表示にして、
    • 安定性を向上させ、フォントレンダリングの不安定さを防ぐ
    • ウェブサイトのレイアウトのみに焦点を当てる
  • 異なる比較方法と、より読みやすいテストのための追加のマッチャーのセットを使用する
  • キーボードのタブ操作でWebサイトがどのようにサポートされるかを確認する（Webサイトのタブ操作も参照）
  • その他多数。サービスおよびメソッドのオプションを参照してください。

このサービスは、すべてのブラウザ/デバイスに必要なデータとスクリーンショットを取得するための軽量モジュールです。比較機能は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.dokyumento.jp/");

// 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();

Webサイトのタブ操作​

キーボードのTABキーを使用してWebサイトにアクセスできるかどうかを確認できます。アクセシビリティのこの部分のテストは、常に時間のかかる（手動の）作業であり、自動化するのは非常に困難でした。saveTabbablePageおよびcheckTabbablePageメソッドを使用すると、Webサイトに線と点を描き、タブの順序を確認できるようになりました。

これはデスクトップブラウザにのみ役立ち、モバイルデバイスには役立ちません。すべてのデスクトップブラウザがこの機能をサポートしています。

...注記

この作業は、Viv Richards氏のブログ記事「ビジュアルテストとJavaScriptを使用したページタブフローの自動化」に触発されています。

タブで移動可能な要素の選択方法は、tabbableモジュールに基づいています。タブ操作に関する問題がある場合は、README.md、特に詳細セクションを確認してください。

仕組み​

どちらのメソッドも、Webサイトにcanvas要素を作成し、エンドユーザーがTABキーを使用した場合の移動先を示す線と点を描画します。その後、フローの概要を示すフルページのスクリーンショットを作成します。

...重要

**スクリーンショットを作成し、** **ベースライン**画像と比較**したくない**場合にのみ、saveTabbablePageを使用してください。****

タブ操作フローをベースラインと比較する場合は、checkTabbablePageメソッドを使用できます。2つのメソッドを一緒に使用する必要は**ありません**。サービスのインスタンス化時にautoSaveBaseline: trueを指定することで自動的に作成できるベースライン画像が既に存在する場合、checkTabbablePageは最初に*実際の*画像を作成し、ベースラインと比較します。

オプション​

どちらのメソッドも、saveFullPageScreenまたはcompareFullPageScreenと同じオプションを使用します。

例​

これは、モルモットのWebサイトでのタブ操作の例です。

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以前では、このモジュールは、Node.js用のキャンバス実装であるCanvasに依存しています。CanvasはCairoに依存しています。

インストールの詳細​

デフォルトでは、macOS、Linux、Windows 用のバイナリは、プロジェクトの npm install 実行中にダウンロードされます。サポートされていない OS またはプロセッサアーキテクチャを使用している場合、モジュールはシステム上でコンパイルされます。これには、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