1. 概要
CSSのリグレッションテストを自動化してくれるツールBackstopJSの紹介です。
紹介記事（CSS Trick: http://css-tricks.com/automating-css-regression-testing/ ）を読んで動かそうとしたものの、少し手間取ったのでここにメモします。
2. 動かす
個人的な好みの問題で、GitHubから手動で持ってきたファイルを使う方法を示します。Readmeではbowerが推奨されています。
2.1 動作環境の準備
node.js、Gulp、PhantomJS、CasperJSが必要になります。
node.jsは「node.js インストール」でぐぐってください。
そのほかは次のコマンドでインストールします。
$ sudo npm install -g gulp phantomjs casperjs
2.2 とりあえず動かす
どういうものかを最初に知っていた方が理解が早いです。
-
"Download Zip"からダウンロード
https://github.com/garris/BackstopJS -
フォルダに移動してモジュールをインストール
$ cd [展開したフォルダ]
$ npm install
- 基準となる画面のスクリーンショットを用意
$ gulp reference
→bitmaps_referenceの中にスクリーンショットが保存されます
- リグレッションテストを行う
※ 現在（2014年12月3日時点）、WindowsだとChromeが開けないので、gulpfile.js 243行目を下記のように修正する必要がありました。
(-) ,app: "Google Chrome"
(+) ,app: (process.platform === 'win32' ? "chrome" : "google-chrome")
次のコマンドでテストを実行します
$ gulp test
スクリーンショットの撮影が終わったらリポートページがGoogle Chromeに表示されます。ページを変更していないのですべてpassedになります。Failedのときにどうなるかは最初に貼った CSS Trick にあるので参考にしてください。
2.3 テストをつくって動かす
前節のテストは、capture/config.default.jsonをもとに動いていました。本節では設定ファイルbackstop.jsonを作成してテストする方法を示します。
gulpfile.jsの編集
設定ファイルはgulp genConfigで作ることができますが、設定ファイルのできる場所がbowerの使用を前提としていて、gulpfile.jsの2階層上にbackstop.jsが配置されます。必要があればgulpfile.jsの16行目を変更してください。
(-) var backstopConfigFileName = path.join(__dirname, '../..', 'backstop.json')
// １つ上の階層の場合
(+) var backstopConfigFileName = path.join(__dirname, '..', 'backstop.json')
// 同じ階層の場合
(+) var backstopConfigFileName = path.join(__dirname, 'backstop.json')
backstop.jsonの編集
viewportsではデバイスの大きさを定義します。ここはデフォルトを参考にすればわかるかと思います。
grabConfigsが具体的なテストケースになります。
-
url: テストするページのURL -
hideSelectors:display:hiddenにしたい要素をCSSセレクタで指定 -
removeSelectors:display:noneにしたい要素をCSSセレクタで指定 -
selectors: キャプチャしたい要素をセレクタで指定（要素の数だけテストケースができる。全体を比較したい場合はbodyを指定）
テストの準備・実行
リグレッションテストなので、変更前に gulp reference を実行しておきます。変更が終わったら、gulp testでテストを行います。
3. 所感
CSSをリファクタリングする際などに役立ちそうです。画像をバージョン管理しておくと、人に見せる場面で色々捗りそうな予感がします。
もっとも大きな利点は、（最初の準備さえすれば）Gulpを知らずともテストが書けるという点でしょう。
クリックしたらオープンするようなUIは未対応？今後に期待します。