BackstopJSを使って、CSSをテストをする

こういうときに便利

• 軽微だけれども影響範囲が広い修正の確認（コンポーネントレベルの修正がどこまで影響するか…というような）
• リファクタリングを実施した場合に、修正前後で表示に差異がないかの確認
• 既存ページのスクリーンショットの取得

BackstopJSとは

修正前後のスクリーンショットを比較して、差分を検出するツール

使い方

1. グローバルにインストールする（homeディレクトリ推奨）

$npm install -g backstopjs

2. backstopJSを初期化する

BackstopJSが設定されていない場合は、以下のコマンドでデフォルトの設定ファイル（backstop.json）を生成出来る。
既に設定されている場合は、上書きされるので注意すること。

$cd toYourProject
$backstop init

3. backstop.json に、テストを設定する

必須項目

id - 生成されるスクリーンショット名

viewport - スクリーンの大きさ、最低1つ以上を設定

  "viewports": [{
      "label": "phone",
      "width": 375,
      "height": 480
    },
    {
      "label": "pc",
      "width": 1280,
      "height": 768
    }
  ],

scenarios - テスト項目

label と url が必須項目で、それ以外はオプション

"scenarios": [{
      "label": "TOP", // [必須]画面名、日本語だと化けるので英語推奨
      "cookiePath": "backstop_data/engine_scripts/cookies.json",　// cookie
      "url": "http://localhost:8888/index.html", // [必須]対象となるURL
      "referenceUrl": "", // 修正前（公開されている)同じ画面のURL
      "readyEvent": "",
      "readySelector": "",
      "delay": 0, // 表示後、数秒経った後でスクリーンショットを撮る場合の秒数（ミリ秒）
      "hideSelectors": [], // visibility: hidden したいセレクタ、iframeとかに便利
      "removeSelectors": [], // display: none したいセレクタ
      "hoverSelector": "", 
      "clickSelector": "",
      "postInteractionWait": 0,
      "selectors": [],
      "selectorExpansion": true,
      "misMatchThreshold": 0.1,
      "requireSameDimensions": true
    }
]

4. 修正前の状態でテストを実施して、スクリーンショットを取得する

$backstop reference

→ backstop_data/bitmaps_reference にスクリーンショットが保存されていく

5. 修正後の状態でテストを実施する

$backstop test

backstop_data/bitmaps_test/yyyymmdd-hhmmssにスクリーンショットが保存されていき、
最後にbitmaps_referenceとの比較が行われ、ターミナル上とブラウザで差分が確認出来る

雑感

画面数が多いと、実行時間が10分以上になり、その間結構暇…。目視することを考えれば100倍マシ。
テストの設定のために複数回事前に実施して、想定している結果が得られるように設定を調整すると良さそう。

参考URL

BackstopJS を利用した Visual Regression Testing の感想と工夫ポイント - upinetree's memo
http://upinetree.hatenablog.com/entry/2018/05/13/231951

Visual RegressionテストによるWebデザイン崩れの防止 - LCL Engineers' Blog
http://techblog.lclco.com/entry/2017/01/02/204804