BackstopJSで手軽にUI変更の差分を確認してみる

CI/CD test

DTダイナミクスで板金・溶接Webの開発をしている田門です。 主に板金・板金溶接サービスのフロントエンドを担当しています。

今日は、Visual Regression Test(以下VRT)ができるBackstopJSを使って、開発中画面の変更点を一目で把握できるか試してみました。

VRTを試した経緯

meviyを使用して、部品が実際にユーザーの元へ届くまでのおおまかなフローは下記になります。

  1. CADファイルをアップロードしプロジェクトを作成する
  2. プロジェクトを3DViewer画面で表示し、加工指示を設定する
  3. 見積を確定し、型番を発行する
  4. 型番を指定して注文する
  5. 部品が届く

リグレッションテストにおいて、3.で見積を確定した過去のデータに不要な変更が発生していないかを確認する必要があります。 今回は、この確認作業を効率化する手段としてVRTを使って検証してみました。

BackstopJSで修正前後の差分を確認してみる

VRTは画面の修正前後のスクリーンショットを取得し、差分を色付けしてわかりやすくする機能です。 UIデザインの変更による画面全体の表示崩れの影響を検出したいケースで用いられることが多いです。

VRTツールの本格導入前にその妥当性を明確にするために、現状の差分の確認とそれがどう検出されるかを実際に見てみたいと考え、まずは環境構築が簡単で画面全体を比較できるBackstopJSを選択しました。 簡単に導入できる一方、画面全体で差分の許容値が超えた箇所に色付けされるため、UIパーツ単位での比較には向いていません。
この場合は、別のテストツールを使うべきだと思います。

導入の手順

github.com

プロジェクト内のローカルにインストールします。

npm install --save-dev backstopjs

初期化コマンドを実行するとbackstop.json(backstopJSの設定ファイル)と、backstop_data/サンプル用のテストデータやスクリプトが生成されます。

backstop init

backstop.jsonでテストの実行準備と実際のテストシナリオを記載します。

まずテスト準備ですが、検証時のブラウザウィンドウサイズをviewportsに記載します。 テストを実行できるように、認証Cookie情報のJSONファイルを用意します。

  "viewports": [
    {
      "label": "desktop",
      "width": 1920,
      "height": 1080
    }
  ],
  "onBeforeScript": "onBefore.js",

JSONファイルはシナリオ自体にcookiePathを指定することでテスト実行時に認証を通してくれます。 場合によって、onBeforeScript(テスト実行前の準備用のスクリプト)に環境別に認証情報を適用、社内プロキシの認証を通すスクリプトを指定します。

同じ設定ファイルにシナリオを記載します。 シナリオは差分を取得したい画面のurlを記載します。 比較元のurlを別にしたい場合はreferenceUrlで指定可能です。

　"onReadyScript": "onReady.js",
  "scenarios": [
    {
      "label": "meviy_sample",
      "cookiePath": "cookies.json",
      "url": "http://localhost:8080/your-app-view-path",
      "delay": 3000
    }
  ],

画面表示後の特定の要素をクリック操作するなど簡単なUI操作する場合、onReadyScript（各テストシナリオのページが読み込まれた後に実行するスクリプト） で指定できます。

テストの実行

package.jsonに 比較元（修正前）のスクリーンショットを取得するスクリプトコマンドと、比較先（修正後）のスクリーンショットを取得するスクリプトコマンドを用意します。

package.json

"backstop:reference": "backstop reference",
"backstop:test": "backstop test",

比較元のスクリーンショットを取得する。

npm run backstop:reference

比較先のスクリーンショットを取得し、レポートを生成する。

npm run backstop:test

実行すると、下記のように、比較元、比較先、差分の順に表示されます。

差分一覧

DIFFを拡大すると、縦線のバーで比較元をベースに確認が可能です。

差分拡大

結果

当初の目的のように型番を発行済みのプロジェクトのリグレッションテストとして利用する場合は、不整合・不具合が発生していることに気が付きやすいため、活用できそうです。

おわりに

今回は、BackstopJSで手軽にUI差分を確認したことを紹介しました。 今後の開発に活かしつつまた次回の記事で紹介できればと思います。

ミスミ、DTDダイナミックスでは一緒に開発するメンバーを募集しています。 興味がありましたら、ぜひ応募お願いします！