Nightwatchを使用したビジュアルリグレッションテスト（VRT）

概要

ビジュアルリグレッションテスト（VRT）は、アプリケーションに変更が加えられる前と後のユーザーインターフェイスのスクリーンショットまたは画像を比較するソフトウェアテスト手法の一種です。 VRTの目標は、レイアウト、色、タイポグラフィ、その他の視覚要素の変更など、開発中に意図せずに導入された可能性のある視覚的な変更を検出することです。

ビジュアルリグレッションテストには通常、次の手順が含まれます。

  1. 変更が加えられる前と後のアプリケーションまたはWebページのスクリーンショットをキャプチャします。
  2. スクリーンショットをピクセル単位で比較して、違いを特定します。
  3. 違いをレビューおよび分析して、意図的なものか意図的でないものかを判断します。
  4. 変更が意図的な場合は承認します。

仕組み

Nightwatchは、ネイティブな依存関係がないJavaScript画像処理ライブラリであるJIMPを使用して、画像比較を実行します。

Nightwatchロジック

  1. 要素が存在するのを待ちます
  2. スクリーンショットを撮ります
  3. スクリーンショットをベースラインと比較します
  4. 現在のスクリーンショットとベースライン間の視覚的な違いをVRTレポートに表示します

インストール

ステップ1

このコマンドを使用してプラグインをインストールします

npm i @nightwatch/vrt --save-dev

ステップ2

Nightwatch構成を更新して、プラグインをリストに追加します

nightwatch.conf.js
module.exports = {
  plugins: ['@nightwatch/vrt']
  // other nightwatch settings...
}

ビジュアルリグレッションテストの作成

nightwatch-vrtを使用するには、screenshotIdenticalToBaselineアサーションを呼び出し、比較するDOM要素のCSSセレクターを渡すだけです。カスタムファイル名、visual_regression_settingsオーバーライド、およびカスタムログメッセージを渡すこともできます。

screenshotIdenticalToBaselineは、入力として4つのパラメーターを受け取ります。

  1. selector - スクリーンショットでキャプチャされる要素を識別します
  2. fileName - このスクリーンショットのオプションのファイル名。デフォルトはセレクターです
  3. settings - デフォルトおよびvisual_regression_settingsをオーバーライドするためのオプションの設定
  4. message - 完了時にNightwatchがログに記録するオプションのmessage

例：

vrt-demo.js
describe('VRT demo test', function() {
    it('Test Google UI loads correctly', function(browser) {
        browser
            .navigateTo('https://www.google.co.uk')
            .assert.screenshotIdenticalToBaseline('body',  /* Optional */ 'custom-name', {threshold: 0.0}, 'VRT custom-name complete.')
            .end()
    })
})

テストを初めて実行すると、ベースラインスクリーンショットが作成され、ディスクに保存されます。常にベースラインスクリーンショットを登録する必要があります。このテストをさらに実行すると、このベースラインと比較されます。

ビジュアルリグレッション設定

Nightwatch VRTには、慎重に検討されたデフォルト設定が付属しています。次にリストを示します。

  1. generate_screenshot_path default none - スクリーンショットパスを生成する渡された関数
  2. latest_screenshots_path default "vrt/latest" - 最近キャプチャされたスクリーンショットへのパス
  3. latest_suffix default "" - 最近キャプチャされたスクリーンショットの末尾に追加される文字列
  4. baseline_screenshots_path default "vrt/baseline" - ベースラインの予想されるスクリーンショットへのパス
  5. baseline_suffix default "" - ベースラインスクリーンショットの末尾に追加される文字列
  6. diff_screenshots_path default "vrt/diff" - 2つのスクリーンショットの差分画像へのパス
  7. diff_suffix default "" - 差分画像の末尾に追加される文字列
  8. threshold default 0.0 - 一致のしきい値。0から1の範囲です。値が小さいほど、比較がより敏感になります
  9. prompt default false - trueの場合、最近キャプチャしたスクリーンショットが異なる場合、ユーザーはベースラインスクリーンショットを上書きするように求められます
  10. updateScreenshots default false - trueの場合、最近キャプチャされたスクリーンショットは常にベースラインを上書きします

ただし、これらはnightwatch.conf.jsを介してグローバルにオーバーライドできます。以下を参照してください。

nightwatch.conf.js
module.exports = {
  

  //... other config
  

  '@nightwatch/vrt': {
    latest_screenshots_path: 'vrt/latest',
    latest_suffix: '',
    baseline_screenshots_path: 'vrt/baseline',
    baseline_suffix: '',
    diff_screenshots_path: 'vrt/diff',
    diff_suffix: '',
    threshold: 0.00,
    prompt: false,
    updateScreenshots: false
  },
}

さらに、設定は、screenshotIdenticalToBaselineアサーションの一部として例に示すように、JSONオブジェクト（設定引数）として渡すことによってもオーバーライドできます。関数引数として渡される設定は、構成ファイルおよびデフォルト値の設定をオーバーライドします。

レビュー

テストの実行が完了すると、レポートが生成されます。 vrt-reportフォルダーの下にあります。手動で開くか、実行テストコマンドで--openを使用すると、レポートが自動的に開きます。

ベースラインと差分

これは、ベースラインイメージと差分をどのように表示するかを示しています。一致しなかったすべてのピクセルは、差分画像で赤色でマークされています。

Baseline & Diff

ご覧のとおり、差分％も表示されています。差分％がしきい値よりも小さい場合、VRTエンジンはテストを失敗としてマークしません。

ベースラインと最新

これは、現在のイメージがベースラインイメージとどのように異なるかを示しています。

Baseline & Latest

承認

すべての視覚的な変更が意図的であることを確認したら、--update-screenshotsフラグを使用してベースラインを更新できます。これは、今後の比較がすべて新しいベースラインに対して行われるため、重要です。

例：

npx nightwatch <path to tests> --update-screenshots