本文へスキップ

サービスオプション

サービスオプションは、サービスのインスタンス化時に設定できるオプションであり、各メソッド呼び出しで使用されます。

// wdio.conf.(js|ts)
export const config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        [
            "visual",
            {
                // The options
            },
        ],
    ],
    // ...
};

デフォルトオプション​

addressBarShadowPadding​

  • 型: number
  • 必須: いいえ
  • デフォルト: 6
  • サポート対象: Web

iOSとAndroidでは、ビューポートを適切に切り抜くために、アドレスバーにパディングを追加する必要があります。

autoElementScroll​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: true
  • サポート対象: Web、ハイブリッドアプリ（Webview）

このオプションを使用すると、要素のスクリーンショットを作成する際に、要素を自動的にビューにスクロールする機能を無効にできます。

addIOSBezelCorners​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: false
  • サポート対象: Web、ハイブリッドアプリ（Webview）、ネイティブアプリ

iOSデバイスのスクリーンショットにベゼルコーナーとノッチ/ダイナミックアイランドを追加します。

注記

これは、デバイス名が自動的に判別でき、次の正規化されたデバイス名のリストと一致する場合のみ可能です。正規化はこのモジュールによって行われます。 **iPhone:**

  • iPhone X: iphonex
  • iPhone XS: iphonexs
  • iPhone XS Max: iphonexsmax
  • iPhone XR: iphonexr
  • iPhone 11: iphone11
  • iPhone 11 Pro: iphone11pro
  • iPhone 11 Pro Max: iphone11promax
  • iPhone 12: iphone12
  • iPhone 12 Mini: iphone12mini
  • iPhone 12 Pro: iphone12pro
  • iPhone 12 Pro Max: iphone12promax
  • iPhone 13: iphone13
  • iPhone 13 Mini: iphone13mini
  • iPhone 13 Pro: iphone13pro
  • iPhone 13 Pro Max: iphone13promax
  • iPhone 14: iphone14
  • iPhone 14 Plus: iphone14plus
  • iPhone 14 Pro: iphone14pro
  • iPhone 14 Pro Max: iphone14promax **iPad:**
  • iPad mini 第6世代: ipadmini
  • iPad Air 第4世代: ipadair
  • iPad Air 第5世代: ipadair
  • iPad Pro (11インチ) 第1世代: ipadpro11
  • iPad Pro (11インチ) 第2世代: ipadpro11
  • iPad Pro (11インチ) 第3世代: ipadpro11
  • iPad Pro (12.9インチ) 第3世代: ipadpro129
  • iPad Pro (12.9インチ) 第4世代: ipadpro129
  • iPad Pro (12.9インチ) 第5世代: ipadpro129

autoSaveBaseline​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: true
  • サポート対象: Web、ハイブリッドアプリ（Webview）、ネイティブアプリ

比較時にベースライン画像が見つからない場合、画像は自動的にベースラインフォルダにコピーされます。

baselineFolder​

  • 型: any
  • 必須: いいえ
  • デフォルト: .path/to/testfile/__snapshots__/
  • サポート対象: Web、ハイブリッドアプリ（Webview）、ネイティブアプリ

このディレクトリには、比較で使用されるすべてのベースライン画像が保存されます。設定されていない場合、デフォルト値が使用され、ファイルはビジュアルテストを実行するspecファイルの隣にある__snapshots__/フォルダに保存されます。オプションオブジェクトを受け取る関数を使用して、baselineFolder値を設定することもできます。

{
    baselineFolder: (options) => {
        const testFolder = path.dirname(options.specs[0]);
        return path.join(testFolder, "snapshots", type);
    };
}

clearRuntimeFolder​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: false
  • サポート対象: Web、ハイブリッドアプリ（Webview）、ネイティブアプリ

初期化時にランタイムフォルダ（actualとdiff）を削除します。

注記

これは、screenshotPathがプラグインオプションを通じて設定されている場合にのみ機能し、メソッドでフォルダを設定した場合には**機能しません**。

createJsonReportFiles (新規)​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: false

これで、比較結果をJSONレポートファイルにエクスポートするオプションが利用できるようになりました。createJsonReportFiles: trueオプションを指定すると、比較される各画像について、actual画像結果の隣にあるactualフォルダに保存されるレポートが作成されます。出力は次のようになります。

{
    "parent": "check methods",
    "test": "should fail comparing with a baseline",
    "tag": "examplePageFail",
    "instanceData": {
        "browser": {
            "name": "chrome-headless-shell",
            "version": "126.0.6478.183"
        },
        "platform": {
            "name": "mac",
            "version": "not-known"
        }
    },
    "commandName": "checkScreen",
    "boundingBoxes": {
        "diffBoundingBoxes": [
            {
                "left": 1088,
                "top": 717,
                "right": 1186,
                "bottom": 730
            }
            //....
        ],
        "ignoredBoxes": [
            {
                "left": 159,
                "top": 652,
                "right": 356,
                "bottom": 703
            }
            //...
        ]
    },
    "fileData": {
        "actualFilePath": "/Users/wdio/visual-testing/.tmp/actual/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
        "baselineFilePath": "/Users/wdio/visual-testing/localBaseline/desktop_chrome-headless-shellexamplePageFail-local-chrome-latest-1366x768.png",
        "diffFilePath": "/Users/wdio/visual-testing/.tmp/diff/desktop_chrome-headless-shell/examplePageFail-local-chrome-latest-1366x768png",
        "fileName": "examplePageFail-local-chrome-latest-1366x768.png",
        "size": {
            "actual": {
                "height": 768,
                "width": 1366
            },
            "baseline": {
                "height": 768,
                "width": 1366
            },
            "diff": {
                "height": 768,
                "width": 1366
            }
        }
    },
    "misMatchPercentage": "12.90",
    "rawMisMatchPercentage": 12.900729014153246
}

すべてのテストが実行されると、比較のコレクションを含む新しいJSONファイルが生成され、actualフォルダのルートで見つけることができます。データは次のとおりにグループ化されます。

  • Jasmine/Mochaの場合はdescribe、CucumberJSの場合はFeature
  • Jasmine/Mochaの場合はit、CucumberJSの場合はScenario。そして、次のとおりにソートされます。
  • commandName（画像を比較するために使用される比較メソッド名）
  • instanceData（最初にブラウザ、次にデバイス、次にプラットフォーム）は次のようになります。
[
    {
        "description": "check methods",
        "data": [
            {
                "test": "should fail comparing with a baseline",
                "data": [
                    {
                        "tag": "examplePageFail",
                        "instanceData": {},
                        "commandName": "checkScreen",
                        "framework": "mocha",
                        "boundingBoxes": {
                            "diffBoundingBoxes": [],
                            "ignoredBoxes": []
                        },
                        "fileData": {},
                        "misMatchPercentage": "14.34",
                        "rawMisMatchPercentage": 14.335403703025868
                    },
                    {
                        "tag": "exampleElementFail",
                        "instanceData": {},
                        "commandName": "checkElement",
                        "framework": "mocha",
                        "boundingBoxes": {
                            "diffBoundingBoxes": [],
                            "ignoredBoxes": []
                        },
                        "fileData": {},
                        "misMatchPercentage": "1.34",
                        "rawMisMatchPercentage": 1.335403703025868
                    }
                ]
            }
        ]
    }
]

レポートデータを使用すると、すべての魔法とデータ収集を自分で行うことなく、独自のビジュアルレポートを作成できます。

注記

@wdio/visual-testingバージョン5.2.0以上を使用する必要があります。

disableCSSAnimation​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: false
  • サポート対象: Web、ハイブリッドアプリ（Webview）

アプリケーション内のすべてのCSSアニメーションと入力キャレットを有効/無効にします。trueに設定すると、スクリーンショットを撮る前にすべてのアニメーションが無効になり、完了時にリセットされます。

enableLayoutTesting​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: false
  • サポート対象: Web

これにより、ページ上のすべてのテキストが非表示になり、レイアウトのみが比較に使用されます。非表示にするには、スタイル'color': 'transparent !important'を**各**要素に追加します。

出力については、テスト出力を参照してください。

情報

このフラグを使用すると、テキストを含む各要素（p, h1, h2, h3, h4, h5, h6, span, a, liだけでなく、div|button|..なども）にこのプロパティが設定されます。これを調整するオプションは**ありません**。

formatImageName​

  • 型: string
  • 必須: いいえ
  • デフォルト: {tag}-{browserName}-{width}x{height}-dpr-{dpr}
  • サポート対象: Web、ハイブリッドアプリ（Webview）、ネイティブアプリ

保存された画像の名前は、次のようなフォーマット文字列を指定してformatImageNameパラメータを渡すことでカスタマイズできます。

{tag}-{browserName}-{width}x{height}-dpr-{dpr}

文字列のフォーマットに次の変数を渡すことができ、インスタンスの機能から自動的に読み取られます。判別できない場合は、デフォルト値が使用されます。

  • browserName: 指定された機能におけるブラウザの名前
  • browserVersion: 機能で指定されたブラウザのバージョン
  • deviceName: 機能からのデバイス名
  • dpr: デバイスピクセル比
  • height: 画面の高さ
  • logName: 機能からのlogName
  • mobile: これにより、アプリのスクリーンショットとブラウザのスクリーンショットを区別するために、_appまたはブラウザ名がdeviceNameの後に追加されます。
  • platformName: 指定された機能におけるプラットフォームの名前
  • platformVersion: 機能で指定されたプラットフォームのバージョン
  • tag: 呼び出されているメソッドで指定されたタグ
  • width: 画面の幅

fullPageScrollTimeout​

  • 型: number
  • 必須: いいえ
  • デフォルト: 1500
  • サポート対象: Web

スクロール後に待機するミリ秒単位のタイムアウトです。これにより、遅延読み込みのあるページを識別するのに役立つ場合があります。

hideScrollBars​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: true
  • サポート対象: Web、ハイブリッドアプリ（Webview）

アプリケーション内のスクロールバーを非表示にします。trueに設定すると、スクリーンショットを撮る前にすべてのスクロールバーが無効になります。追加の問題を防ぐために、デフォルトはtrueに設定されています。

isHybridApp​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: false
  • サポート対象: ハイブリッドアプリ

使用されているアプリがハイブリッドアプリであるかどうかをモジュールに伝えます。これにより、アドレスバーの高さは計算されません（存在しないため）。

logLevel​

  • 型: string
  • 必須: いいえ
  • デフォルト: info
  • サポート対象: Web、ハイブリッドアプリ（Webview）、ネイティブアプリ

追加のログを追加します。オプションはdebug | info | warn | silentです。

エラーは常にコンソールに出力されます。

savePerInstance​

  • 型: boolean
  • デフォルト: false
  • 必須: いいえ
  • サポート対象: Web、ハイブリッドアプリ（Webview）、ネイティブアプリ

インスタンスごとに画像を別々のフォルダに保存します。たとえば、Chromeのスクリーンショットはすべてdesktop_chromeのようなChromeフォルダに保存されます。

screenshotPath​

  • 型: any
  • デフォルト: .tmp/
  • 必須: いいえ
  • サポート対象: Web、ハイブリッドアプリ（Webview）、ネイティブアプリ

実際の/異なるスクリーンショットをすべて保存するディレクトリです。設定されていない場合、デフォルト値が使用されます。オプションオブジェクトを受け取る関数を使用して、screenshotPathの値を設定することもできます。

getFolder = type = (options) => {
    const testFolder = path.dirname(options.specs[0]);

    return path.join(testFolder, "snapshots", type);
};
{
    screenshotPath: getFolder(options);
}

toolBarShadowPadding​

  • 型: number
  • 必須: いいえ
  • デフォルト: Androidでは6、iOSでは15（デフォルトでは6、ノッチのあるiPhoneやホームバーのあるiPadの可能なホームバーには自動的に9が追加されます）
  • サポート対象: Web

iOSとAndroidでビューポートを適切に切り取るために、ツールバーに追加する必要があるパディングです。

タブ可能なオプション​

注記

このモジュールは、タブ可能な要素からタブ可能な要素へと線と点を描画することで、ユーザーがキーボードを使用してウェブサイトをタブで操作する方法を描画することもサポートしています。
Viv Richards氏の"AUTOMATING PAGE TABABILITY (IS THAT A WORD?) WITH VISUAL TESTING"に関するブログ投稿にインスピレーションを得ています。
タブ可能な要素の選択方法は、tabbableモジュールに基づいています。タブ操作に関する問題がある場合は、README.md、特に詳細セクションを確認してください。

tabbableOptions​

  • 型: object
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

{save|check}Tabbableメソッドを使用する場合、線と点に対して変更できるオプションです。オプションについては以下で説明します。

tabbableOptions.circle​

  • 型: object
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

円を変更するためのオプションです。

tabbableOptions.circle.backgroundColor​
  • 型: string
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

円の背景色です。

tabbableOptions.circle.borderColor​
  • 型: string
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

円の枠線の色です。

tabbableOptions.circle.borderWidth​
  • 型: number
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

円の枠線の幅です。

tabbableOptions.circle.fontColor​
  • 型: string
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

円内のテキストのフォントの色です。showNumberがtrueに設定されている場合のみ表示されます。

tabbableOptions.circle.fontFamily​
  • 型: string
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

円内のテキストのフォントファミリーです。showNumberがtrueに設定されている場合のみ表示されます。

ブラウザでサポートされているフォントを設定してください。

tabbableOptions.circle.fontSize​
  • 型: number
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

円内のテキストのフォントサイズです。showNumberがtrueに設定されている場合のみ表示されます。

tabbableOptions.circle.size​
  • 型: number
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

円のサイズです。

tabbableOptions.circle.showNumber​
  • 型: showNumber
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

円にタブシーケンス番号を表示します。

tabbableOptions.line​

  • 型: object
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

線を変更するためのオプションです。

tabbableOptions.line.color​
  • 型: string
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

線の色です。

tabbableOptions.line.width​
  • 型: number
  • 必須: いいえ
  • デフォルト: すべてのデフォルト値についてはこちらを参照してください。
  • サポート対象: Web

線の幅です。

waitForFontsLoaded​

  • 型: boolean
  • 必須: いいえ
  • デフォルト: true
  • サポート対象: Web、ハイブリッドアプリ（Webview）

サードパーティのフォントを含むフォントは、同期的にまたは非同期的に読み込むことができます。非同期読み込みとは、WebdriverIOがページが完全に読み込まれたと判断した後にフォントが読み込まれる可能性があることを意味します。フォントのレンダリングの問題を防ぐために、このモジュールはデフォルトで、スクリーンショットを撮る前にすべてのフォントの読み込みを待ちます。

比較オプション​

比較オプションはサービスオプションとしても設定できます。これらはメソッドの比較オプションで説明されています。

ようこそ！お手伝いできることはありますか？

WebdriverIO AI Copilot