【Backstop JS】効果的に活用するための実践Tips

はじめに

https://github.com/garris/BackstopJS
BackstopJSは、ウェブアプリケーションの視覚的な回帰テスト（ヴィジュアルリグレッションテスト）を自動化するためのライブラリです。

特に、リファクタリングなどの開発過程で発生しがちなデザインの変化を検知するのに役立ちます。

本記事では、BackstopJSを効果的に活用するためのTipsをいくつか紹介します。

オプション管理

BackstopJSでは、リファレンス取得時やテスト実行時に動きを調整するためのオプションが用意されています。

デフォルトでは、このオプションはbackstop.jsonで管理されています。

Tips

画面キャプチャ実行までの時間調整

画面キャプチャ実行前に、ページが完全に読み込まれるのを待つ必要があります。

BackstopJSでは、delayオプションを使用して、指定した時間待つことが可能です。
これにより、ページの読み込みの遅延によるテストの誤判定を防げます。

単位は、msです。

具体例

画面読み込みからキャプチャまで、7秒間待機する。

backstop.json

"delay": 7000 

画面キャプチャ実行前のクリック操作

BackstopJSのclickSelectorオプションを利用することで、画面キャプチャを実行する前に特定の要素をクリックする操作が設定できます。

これにより、ドロップダウンメニューの開閉やモーダルウィンドウのトリガーといった操作をテストに組み込むことが可能です。

具体例

画面キャプチャ前にclass=sample__modalの要素をクリックする

backstop.json

"clickSelector": ".sample__modal"

テストの精度調整

画像比較の精度を調整することで、不要なテスト失敗を減らすことができます。

BackstopJSでは、misMatchThresholdを設定して、許容されるピクセルの違いの割合を指定できます。
この値を上回る差異が認められなければ、テストはパスします

単位はパーセント(%)です。

具体例

変更差異が0.005%以下の場合、テストがパスする。

backstop.json

"misMatchThreshold": 0.005

複数の画面を一度にテストする

BackstopJSでは、複数のシナリオを定義することで、異なる画面を一度にテストすることも可能です。

各シナリオに異なるURLやオプションを指定することで、異なる画面の振る舞いを同時にチェックできます。

具体例

テスト画面1、2、3を一度にテストする。
※便宜上、その他のオプションを省略しています。

backstop.json

"scenarios": [
  {
    "label": "テスト画面1",
    "url": "https://localhost:3000/1",
  },
  {
    "label": "テスト画面2",
    "url": "https://localhost:3000/2",
  },
  {
    "label": "テスト画面3",
    "url": "https://localhost:3000/3",
  }
]