本文へ移動

Novus Visual Regressionサービス

wdio-novus-visual-regression-serviceはサードパーティのパッケージです。詳細については、GitHub | npm を参照してください。

Build Status

WebdriverIOのためのビジュアル回帰テスト

wdio-visual-regression-service と wdio-screenshot のJan-André Zinserによる作業に基づいています。

インストール​

通常どおりNPMを介してwdio-novus-visual-regression-serviceをインストールできます。

$ npm install wdio-novus-visual-regression-service --save-dev

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

設定​

WebdriverIOの設定のserviceセクションにnovus-visual-regressionを追加し、サービスオプションに希望する比較戦略を定義することで、wdio-novus-visual-regression-serviceを設定します。

// wdio.conf.js

var path = require('path');
var VisualRegressionCompare = require('wdio-novus-visual-regression-service/compare');

function getScreenshotName(basePath) {
  return function(context) {
    var type = context.type;
    var testName = context.test.title;
    var browserVersion = parseInt(context.browser.version, 10);
    var browserName = context.browser.name;
    var browserViewport = context.meta.viewport;
    var browserWidth = browserViewport.width;
    var browserHeight = browserViewport.height;

    return path.join(basePath, `${testName}_${type}_${browserName}_v${browserVersion}_${browserWidth}x${browserHeight}.png`);
  };
}

exports.config = {
  // ...
  services: [
    [
      'novus-visual-regression',
      {
        compare: new VisualRegressionCompare.LocalCompare({
          referenceName: getScreenshotName(path.join(process.cwd(), 'screenshots/reference')),
          screenshotName: getScreenshotName(path.join(process.cwd(), 'screenshots/screen')),
          diffName: getScreenshotName(path.join(process.cwd(), 'screenshots/diff')),
          misMatchTolerance: 0.01,
        }),
        viewportChangePause: 300,
        viewports: [{ width: 320, height: 480 }, { width: 480, height: 320 }, { width: 1024, height: 768 }],
        orientations: ['landscape', 'portrait'],
      }
    ]
  ],
  // ...
};

オプション​

wdio.config.jsのvisualRegressionキーの下に、次の構造を持つ設定オブジェクトを渡すことができます。

  • **compare** Object
    スクリーンショット比較メソッド、比較メソッドを参照してください。

  • **viewportChangePause** Number（デフォルト：100）
    ビューポート変更後、xミリ秒待機します。ブラウザが再描画するのに時間がかかる場合があります。これによりレンダリングの問題が発生し、実行間の結果に矛盾が生じる可能性があります。

  • **viewports** Object[{ width: Number, height: Number }]（デフォルト：*[current-viewport]*）（**デスクトップのみ**）
    すべてのスクリーンショットは、異なるビューポート寸法で撮影されます（例：レスポンシブデザインテストの場合）。

  • **orientations** String[] {landscape, portrait}（デフォルト：*[current-orientation]*）（**モバイルのみ**）
    すべてのスクリーンショットは、異なる画面方向で撮影されます（例：レスポンシブデザインテストの場合）。

比較メソッド​

wdio-novus-visual-regression-serviceは、さまざまなスクリーンショット比較メソッドの使用を許可します。

VisualRegressionCompare.LocalCompare​

名前が示すように、LocalCompareはコンピューター上でローカルにスクリーンショットをキャプチャし、以前の実行と比較します。

オブジェクトとして次のオプションをコンストラクターに渡すことができます。

  • **referenceName** Function
    参照スクリーンショットのファイル名を返す関数を渡します。関数は、コマンドに関するすべての関連情報を含むcontextオブジェクトを最初の引数として受け取ります。

  • **screenshotName** Function
    現在のスクリーンショットのファイル名を返す関数を渡します。関数は、コマンドに関するすべての関連情報を含むcontextオブジェクトを最初の引数として受け取ります。

  • **diffName** Function
    差分スクリーンショットのファイル名を返す関数を渡します。関数は、コマンドに関するすべての関連情報を含むcontextオブジェクトを最初の引数として受け取ります。

  • **misMatchTolerance** Number（デフォルト：0.01）
    0と100の間の数値で、2つの画像を同一とみなす不一致の程度を定義します。この値を増やすと、テストカバレッジが減少します。

  • **ignoreComparison** String（デフォルト：なし）
    比較方法を調整するために、nothing、colors、antialiasingの値を持つ文字列を渡します。

現在のテスト名に依存するスクリーンショットファイル名の生成例については、設定のサンプルコードをご覧ください。

VisualRegressionCompare.SaveScreenshot​

このメソッドは、スクリーンショットのみをキャプチャするための、VisualRegressionCompare.LocalCompareの簡略化されたバリアントです。これは、参照スクリーンショットを作成し、差分を作成せずに以前のスクリーンショットを上書きしたい場合に非常に便利です。

オブジェクトとして次のオプションをコンストラクターに渡すことができます。

  • **screenshotName** Function
    現在のスクリーンショットのファイル名を返す関数を渡します。関数は、コマンドに関するすべての関連情報を含むcontextオブジェクトを最初の引数として受け取ります。

VisualRegressionCompare.Spectre​

このメソッドは、ウェブアプリケーションSpectreにスクリーンショットをアップロードするために使用されます。Spectreは、ビジュアル回帰テストのためのUIです。スクリーンショットを保存して比較し、継続的インテグレーションに非常に便利です。

オブジェクトとして次のオプションをコンストラクターに渡すことができます。

  • **url** String
    SpectreウェブサービスのURLを渡します。

  • **project** String
    プロジェクトの名前を渡します。

  • **suite** String
    テストスイートの名前を渡します。1つのプロジェクトには複数のスイートを含めることができます。

  • **test** Function
    スクリーンショットのテスト名を返す関数を渡します。関数は、コマンドに関するすべての関連情報を含むcontextオブジェクトを最初の引数として受け取ります。

  • **browser** Function
    スクリーンショットのブラウザを返す関数を渡します。関数は、コマンドに関するすべての関連情報を含むcontextオブジェクトを最初の引数として受け取ります。

  • **size** Function
    スクリーンショットのサイズを返す関数を渡します。関数は、コマンドに関するすべての関連情報を含むcontextオブジェクトを最初の引数として受け取ります。

  • **fuzzLevel** Number（デフォルト：30）
    0と100の間の数値で、Spectreの画像比較メソッドのファズファクターを定義します。詳細については、Spectreドキュメントをご覧ください。

例

// wdio.conf.js

var path = require('path');
var VisualRegressionCompare = require('wdio-novus-visual-regression-service/compare');

exports.config = {
  // ...
  services: [
    [
      'novus-visual-regression',
      {
        compare: new VisualRegressionCompare.Spectre({
          url: 'http://localhost:3000',
          project: 'my project',
          suite: 'my test suite',
          test: function getTest(context) {
            return context.test.title;
          },
          browser: function getBrowser(context) {
            return context.browser.name;
          },
          size: function getSize(context) {
            return context.meta.viewport != null ? context.meta.viewport.width : context.meta.orientation;
          },
          fuzzLevel: 30
        }),
        viewportChangePause: 300,
        viewports: [{ width: 320, height: 480 }, { width: 480, height: 320 }, { width: 1024, height: 768 }],
        orientations: ['landscape', 'portrait'],
      }
    ]
  ],
  // ...
};

使用方法​

wdio-novus-visual-regression-serviceは、次のコマンドでWebdriverIOインスタンスを拡張します。

  • browser.checkViewport([{options}]);
  • browser.checkDocument([{options}]);
  • browser.checkElement(elementSelector, [{options}]);

これらはすべて、異なる寸法でスクリーンショットをキャプチャしたり、無関係な部分（例：コンテンツ）を除外したりするのに役立つオプションを提供します。次のオプションを使用できます。

  • **exclude** String[]|Object[]（**まだ実装されていません**）
    スクリーンショットの頻繁に変更される部分を除外します。1つまたは複数の要素をクエリするさまざまなWebdriverIOセレクター戦略を渡すか、長方形または多角形を伸ばすxとyの値を定義できます。

  • **hide** Object[]
    さまざまなWebdriverIOセレクター戦略でクエリされたすべての要素を非表示にします（visibility: hiddenを使用）。

  • **remove** Object[]
    さまざまなWebdriverIOセレクター戦略でクエリされたすべての要素を削除します（display: noneを使用）。

  • **viewports** Object[{ width: Number, height: Number }]（**デスクトップのみ**）
    このコマンドのグローバルなviewports値を上書きします。すべてのスクリーンショットは、異なるビューポート寸法で撮影されます（例：レスポンシブデザインテストの場合）。

  • **orientations** String[] {landscape, portrait}（**モバイルのみ**）
    このコマンドのグローバルなorientations値を上書きします。すべてのスクリーンショットは、異なる画面方向で撮影されます（例：レスポンシブデザインテストの場合）。

  • **misMatchTolerance** Number
    このコマンドのグローバルなmisMatchTolerance値を上書きします。0と100の間の数値を渡して、2つの画像を同一とみなす不一致の程度を定義します。

  • **fuzzLevel** Number
    このコマンドのグローバルなfuzzLevel値を上書きします。0と100の間の数値を渡して、Spectreの画像比較メソッドのファズファクターを定義します。

  • **ignoreComparison** String
    このコマンドのグローバルなignoreComparison値を上書きします。比較方法を調整するために、nothing、colors、antialiasingの値を持つ文字列を渡します。

  • **viewportChangePause** Number
    このコマンドのグローバルなviewportChangePause値を上書きします。ビューポート変更後、xミリ秒待機します。

ライセンス​

MIT

ようこそ！お手伝いしましょうか？

WebdriverIO AI Copilot