reg-cli でビジュアルリグレッションテストを小さく始める

この記事は Misoca+弥生 Advent Calendar 2019 6日目の記事です。


モバイルアプリのビジュアルリグレッションテストを見やすくしたい

iOS では fastlane の snapshotAndroid では Spoon で各画面の画像を撮り、各アプリバージョンのスクリーンショットを Git リポジトリで管理し、Github 上または Github Desktop などで確認できるようにしている。

モバイルでのスクリーンショットの取得に関しては以下の記事を参照

tech.misoca.jp

一方 Web アプリケーションでは Capybara でスクリーンショットを撮り、reg-suit で比較画像の生成・S3 への publish、Slack への通知などを行ってビジュアルリグレッションテストを実現していて、社内で reg-suit の一定の実績があった。

Web アプリでのビジュアルリグレッションテストの取り組みについては以下の発表によくまとまっている。

slides.com

モバイルアプリでも reg-suit で比較結果を生成すれば、確認方法も統一できるし、reg-suit のきれいで一覧性のある diff 画面で確認できれば効率的だろうと考えてやってみた。

小さくはじめて最速で成果を評価したい

reg-suit の動作は以下のフェーズに分かれている

  1. 正解画像の取得
  2. 正解画像と手元の画像の比較
  3. 比較結果と次回正解画像の publish

reg-suit の代表的な使い方をした場合、
「1. 正解画像取得」では、reg-suit から使いやすいブランチ構造にあわせる必要があり、 「3.比較結果の publish」では S3 のバケットを用意したりする必要がある。

今やりたいのは既にある画像の比較だけなので、「2. 正解画像と手元の画像の比較」で十分な効果が得られそうだと考えていた。
そもそも、reg-suit を採用するかどうかチームメンバーに見てもらってからだな、と思っていたのでなおさら重い作業や運用を考えることは省きたかった。

「2. 正解画像と手元の画像の比較」では、reg-cli というコマンドラインツールが使われている。
そこで、今回は小さく始めるために reg-suit ではなく reg-cli を直接使うことにした。

reg-cli でのビジュアルリグレッションテスト

上記のとおり既に Git リポジトリに各バージョンのスクリーンショットは用意してあるので、こんな感じで生成した。

# 作業フォルダの準備
rm -rf .reg
mkdir .reg

# before の画像セットの取得
$ git checkout <beforeのリビジョン>
$ cp -R ./capture .reg/before
$ git checkout -

# after の画像セットの取得
$ git checkout <afterのリビジョン>
$ cp -R ./capture .reg/after
$ git checkout -

# reg-cli の実行
yarn add reg-cli --no-progress
yarn -s run reg-cli .reg/after .reg/before diff -R index.html -S -M 0.05

これで index.html ファイルが生成され、こんな感じで比較結果を得られる。

f:id:suer:20191201014324p:plain:w500

Jenkins で半自動化

メンバーに共有したところ

f:id:suer:20191202092641p:plain:w200

こういうコメントをもらえたので、方向性は良さそうという手応えを得ることができた。

この段階では自分の手元でやっていたのだが、次の段階として誰でも比較結果を作れるように Jenkins で半自動化することにした。

とはいっても上記で実行しているコマンドを Jenkins にやらせるだけなので・・・

ビルドパラメータで前後のリビジョンを指定できるようにして

f:id:suer:20191201173120p:plain:w400

こんな感じで上記コマンドをスクリプトとして追加していって *1

f:id:suer:20191201173256p:plain:w400

比較結果を保存対象にしただけ。

f:id:suer:20191201231956p:plain:w400

これでコミットハッシュを指定すれば任意の比較結果を得ることができるようになった。

f:id:suer:20191201173505p:plain:w400

まとめ

やりたいことにフォーカスして、ベイビーステップで振り返りながら進めるようにするには、reg-suit に対する reg-cli のように一段プリミティブなところから始めるのがよさそうだなと思った。

ちなみに今回は既に画像取得できてるところから始めたが、本当は画像取得の部分が一番たいへんなんだよなぁ。


明日、Misoca+弥生 Advent Calendar 2019 の7日目のエントリは @mallowlabs が「RSpec の話」を書くようです。楽しみですね!

*1:細かい話として reg-cli の実行は差分があるときに 0 以外のステータスコードを返してビルドが失敗扱いとなってしまうのを防ぐために yarn コマンドに || true をつけて回避する必要がある