BackstopJS の CSS リグレッションテストをログインが必要なページに対して使う

CSSのテスト - 何をテストするのか | CodeGrid

CodeGrid の記事で知った BackstopJS を試してみた。

ログインが必要なページに対して使うことはできないようだが、ソースコードを読んでみて PhantomJS に Cookie を食わせれば（Cookie をログインセッションの管理に使っているウェブサイトであれば）どうにかなりそうだと思ったのでやってみた。

https://github.com/kyanny/BackstopJS/tree/addCookie

事前に対象のページにログインしておいて、 Cookie を JSON 形式で保存しておく。それを phantom.addCookie で CasperJS のスクレイピング実行前にセットしておけばよい。 Cookie を JSON で保存するのは Google Chrome の EditThisCookie 拡張のエクスポート機能を使うと楽。

試しに https://github.com/ でやってみる例。手順がやや込み入っているのでサンプルプロジェクトを作った。

https://github.com/kyanny/BackstopJS-sample

1. 適当なディレクトリで git clone https://github.com/kyanny/BackstopJS-sample.git
2. BackstopJS-sample ディレクトリに移動して rake setup
3. https://github.com/ にふつうにブラウザでログインする
4. EditThisCookie のエクスポートで Cookie をクリップボードにコピー
5. BackstopJS-sample ディレクトリ内に cookies.json というファイル名で保存
6. rake original でログインなしの状態で BackstopJS を実行する。 BackstopJS のタスクが実行されるとブラウザでこういうページが開かれるはず
7. rake addCookie でログイン済みの状態で BackstopJS を実行する。こういうページが開かれるはず

URL が決まっているページであれば比較的簡単に CSS リグレッションテストができそう。ただし、 BackstopJS は URL が動的に変化する場合に使うのは難しそうなので、サイト全体の見た目に対するテストは厳しそう。もともと自社サービスの見た目のテストに使えないかと思ってやり始めたが、 backstop.json の維持が大変だろうからちょっと導入は難しいかもなぁ、と思った。