BackstopJSで行うビジュアルリグレッションテスト

こんにちは、Gaji-Labo 石垣です。

今回は Gaji-Labo が使っている BackstopJS というビジュアルリグレッションテストツールをご紹介します。

BackstopJSとは

ビジュアルリグレッションテスト (ある変更を加える前後でスクリーンショットを作成し、それらを比較することで意図しない挙動が無いかを検証するテスト手法) を行うことが出来る npm パッケージです。

Gaji-Labo では主に CSS に関する作業で、意図しない崩れをチェックし、問題がないことを担保するのに使用しています。

とにかく手軽で、すぐに導入し、撮る URL を設定し、ローカルでコマンドを叩くだけでテストが実行できるのが特徴です。

使い方

導入

$ npm install backstopjs

yarn の場合は $ yarn add backstopjs で導入します。

この時 backstop と入れるとダミーファイルが入った別のライブラリが導入されるので注意します。

設定

導入後、$ backstop init を叩くことで設定用ファイルとキャプチャを格納するフォルダ /backstop_data が作成されます。

設定は生成された設定用ファイル backstop.json に記述します。

最低限の設定として、id, viewports, scenariosの設定が必要です。

{
  "id": "backstop_default", // 生成されるスクリーンショット名に使用されるテストの id です
  "viewports": [ // キャプチャを撮る画面サイズを設定します。複数を設定可能ですが1つは必須です
    {
      "label": "tablet", // 画面サイズのラベルです
      "width": 1024, // 画面幅です
      "height": 768 // 画面高さです
    }
  ],
  "scenarios": [ // キャプチャを撮るURLを設定します。複数を設定可能ですが1つは必須です
    {
      "label": "index", // URLのラベルです
      "url": "http://localhost:8000/", // キャプチャ対象のURLです
    }
  ]
}

変更前のキャプチャを撮影

$ backstop reference で変更前のURLのキャプチャを撮影し、/backstop_data/backstop_reference フォルダに格納します。

変更後のキャプチャを撮影し、差分比較

作業を追加した後、$ backstop test を叩いて変更後のURLのキャプチャを取得します。

ここで $ backstop reference を叩くと先程取得した reference が全部消えるので注意します。

テストが終わった後、結果画面がターミナルとブラウザに表示されます。

設定したビューポートとシナリオ毎に差分が表示されます。前述の設定の場合だと、tablet で設定した画面サイズで http://localhost:8000/ の差分が表示されます。

差分を確認した後、変更に問題がなければ $ backstop approve を叩くと reference のキャプチャを test で取得した方のキャプチャに置き換えます。

細かい設定

backstop.json の設定を書き換えることで、キャプチャの待機時間や撮影のトリガーとなる要素を設定したり、テストする上で不要な要素（例えばランダムでアクセスの度に表示が変わる要素など）を非表示にしてからキャプチャを撮影するように設定することもできます。

詳しい設定方法は公式ドキュメントをご覧ください。

また、 BackstopJS ではキャプチャにヘッドレスブラウザの puppeteer を使用しており（デフォルト。設定で chromy にも変更可能です）、puppeteer の機能を使ってキャプチャ前にWebサイトのインタラクションを作動させたり、ログインをさせることも可能です。

まとめ

今回は BackstopJS というツールを紹介しました。

Gaji-Labo ではこのようなツールを導入してチェックを効率化しています。

関連リンク

• garris/BackstopJS: Catch CSS curve balls.