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

V5のビジュアルリグレッション

·5分で読めます
Wim Selles
Wim Selles

WebdriverIO V5用の新しいVisual Regressionサービスwdio-image-comparison-serviceが登場したことをお知らせします。

新しく更新されたサービス

サービスを更新し、その一部としてパッケージ名を変更しました。WebdriverIOのビジュアルテストに関するすべてのドキュメントは、ドキュメントにあります。

何ができるの？​

wdio-image-comparison-serviceは、ブラウザ/モバイルブラウザ/ハイブリッドアプリで画面、要素、またはフルページ画面の画像比較を行うための軽量なWebdriverIOサービスです。

以下のことができます

  • ベースラインに対して、画面/要素/フルページ画面を保存または比較する
  • ベースラインがない場合に、自動的にベースラインを作成する
  • カスタム領域をブロックアウトし、比較中にステータスバーやツールバーを自動的に除外する（モバイルのみ）
  • 要素の寸法スクリーンショットを増やす
  • 異なる比較方法を使用する
  • など、詳細はこちらのオプションを参照してください。

このモジュールは、新しいwebdriver-image-comparisonモジュールの能力に基づいています。これは、すべてのブラウザ/デバイスに必要なデータとスクリーンショットを取得するための軽量モジュールです。比較能力はResembleJSから提供されています。画像をオンラインで比較したい場合は、オンラインツールを確認できます。

以下の用途に使用できます

  • デスクトップブラウザ（Chrome / Firefox / Safari / Internet Explorer 11 / Microsoft Edge）
  • モバイル/タブレットブラウザ（エミュレーター/実デバイス上のChrome / Safari）Appium経由
  • Appium経由のハイブリッドアプリ

バージョンについては下記を確認してください

Sauce Test Status

インストール​

このモジュールを、（開発）依存関係として使用するために、次のコマンドでローカルにインストールします

npm install --save-dev wdio-image-comparison-service

WebdriverIOのインストール方法については、こちらをご覧ください。

使い方​

wdio-image-comparison-serviceはNodeJS 8以上をサポートしています

設定​

wdio-image-comparison-serviceはサービスであるため、通常のサービスとして使用できます。wdio.conf.jsファイルに次のように設定できます

const { join } = require('path');

// wdio.conf.js
exports.config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        ['image-comparison',
        // The options
        {
            // Some options, see the docs for more
            baselineFolder: join(process.cwd(), './tests/sauceLabsBaseline/'),
            formatImageName: '{tag}-{logName}-{width}x{height}',
            screenshotPath: join(process.cwd(), '.tmp/'),
            savePerInstance: true,
            autoSaveBaseline: true,
            blockOutStatusBar: true,
            blockOutToolBar: true,
            // ... more options
        }],
    ],
    // ...
};

その他のプラグインオプションは、こちらをご覧ください。

テストの作成​

wdio-image-comparison-serviceはフレームワークに依存しません。つまり、Jasmine|Mochaなど、WebdriverIOがサポートするすべてのフレームワークで使用できます。次のように使用できます

describe('Example', () => {
  beforeEach(() => {
     browser.url('https://webdriverio.dokyumento.jp');
  });

  it('should save some screenshots', () => {
  	// Save a screen
  	browser.saveScreen('examplePaged', { /* some options*/ });

  	// Save an element
  	browser.saveElement($('#element-id'), 'firstButtonElement', { /* some options*/ });

  	// Save a full page screens
  	browser.saveFullPageScreen('fullPage', { /* some options*/ });
  });

  it('should compare successful with a baseline', () => {
  	// Check a screen
  	expect(browser.checkScreen('examplePaged', { /* some options*/ })).toEqual(0);

  	// Check an element
  	expect(browser.checkElement($('#element-id'), 'firstButtonElement', { /* some options*/ })).toEqual(0);

  	// Check a full page screens
  	expect(browser.checkFullPageScreen('fullPage', { /* some options*/ })).toEqual(0);
  });
});

ベースラインがない状態で初めて実行すると、checkメソッドは次の警告でPromiseを拒否します

#####################################################################################
 Baseline image not found, save the actual image manually to the baseline.
 The image can be found here:
 /Users/wswebcreation/Git/wdio-image-comparison-service/.tmp/actual/desktop_chrome/examplePage-chrome-latest-1366x768.png
 If you want the module to auto save a non existing image to the baseline you
 can provide 'autoSaveBaseline: true' to the options.
#####################################################################################

これは、現在のスクリーンショットが実際のフォルダに保存されており、**手動でベースラインにコピーする必要がある**ことを意味します。autoSaveBaseline: trueでwdio-image-comparison-serviceをインスタンス化すると、画像は自動的にベースラインフォルダに保存されます。

素敵な新機能​

フルページのスクリーンショットを作成する場合、スティッキーヘッダーやチャットボックスなど、ビューに残る要素がある場合があります。これらの要素は通常、下の画像の左側に見られるように、スクリーンショットを混乱させます。

ただし、最初のスクロール後に非表示にする必要のある要素を追加できるようになり、下の画像の右側に見られるような結果が得られます。これは、テストにこのプロパティを追加することで実行できます

browser.checkFullPageScreen('fullPage', {
    hideAfterFirstScroll: [
        $('nav-bar'),
        $('chat-box'),
    ],
});

fullpage-example

テスト結果の出力​

save(Screen/Element/FullPageScreen)メソッドは、メソッドが実行された後、次の情報を提供します

const saveResult = {
  // The device pixel ratio of the instance that has run
  devicePixelRatio: 1,
  // The formatted filename, this depends on the options `formatImageName`
  fileName: 'examplePage-chrome-latest-1366x768.png',
  // The path where the actual screenshot file can be found
  path: '/Users/wswebcreation/Git/wdio-image-comparison-service/.tmp/actual/desktop_chrome',
};

画像については、Save outputセクションを、出力ドキュメントで確認してください。

デフォルトでは、check(Screen/Element/FullPageScreen)メソッドは、1.23のように不一致のパーセンテージのみを提供しますが、プラグインにreturnAllCompareData: trueオプションがある場合、メソッドが実行された後、次の情報が提供されます

const checkResult = {
  // The formatted filename, this depends on the options `formatImageName`
  fileName: 'examplePage-chrome-headless-latest-1366x768.png',
  folders: {
      // The actual folder and the file name
      actual: '/Users/wswebcreation/Git/wdio-image-comparison-service/.tmp/actual/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png',
      // The baseline folder and the file name
      baseline: '/Users/wswebcreation/Git/wdio-image-comparison-service/localBaseline/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png',
      // This following folder is optional and only if there is a mismatch
      // The folder that holds the diffs and the file name
      diff: '/Users/wswebcreation/Git/wdio-image-comparison-service/.tmp/diff/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png',
    },
    // The mismatch percentage
    misMatchPercentage: 2.34
};

画像については、Check output on failureセクションを、出力ドキュメントで確認してください。

サポート

サポートが必要な場合は、コミュニティDiscordサーバーでお手伝いできます。

楽しいテストを！

Grtz、

青いヤツ

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

WebdriverIO AI Copilot