Percy + CypressでVisual Regression Test
自動テストの中にやっとの思いでe2eテストを組み込んだとしても、「視覚的に正しかったかどうか」という点までキャッチするのはなかなか難しいです。このような観点でテストする一つの手段として「Visual Regression Test」があります。僕自身このテストにはVue Fes Japan 2018の以下の発表で知りました。
ここで紹介されていた「reg-suit」が気になって、自分のローカル環境でも検証してみたこともあります。
今回共有したい内容はこのVisual Regression TestのSaaSであるPercyです。
たまたまTwitterの広告で流れてきたのを見たのですが、最近僕が使っているe2eテストフレームワークのCypressとも連携できるとのことで気になって試してみました。
参考にしたのは以下のYoutubeの内容で、Percy.ioのCEOである@mikefotinakisとCypress.ioのVPoEである@bahmutovによるCypress + Percyの紹介になります。
動画内の以下スライドも非常に参考になります。
想定する読者
- e2eテストなんとなくわかる（Cypressなんとなく知ってる）
- CIなんとなくわかる（CircleCIなんとなく知ってる）
細かい説明はごっそり省くので、この記事は初心者向けの記事ではありません。また、上記Youtubeが理解できる人はこの記事を読まなくて良いと思います。
概要
細かく一つ一つ説明しているとこの記事がとんでもなく大きくなってしまうので、ざっくりと登場人物と役割を説明します。
テスト対象としては動画内のものと同様、以下のサンプルアプリ（ピザ注文アプリ）を使います。
e2eテストのテスト項目としては
- ユーザーはピザを注文できる
というものがあります。ここで活躍するのがCypressです。画面のボタンをポチポチしながらピザが注文できることをテストします。
このテストで確認することが困難なのが、
- アプリが正しく表示されているか
という観点です。ここで活躍するのがPercyです。（どのように活躍するのかはこの記事の続きでウォークスルーします）
そしてこれらをGitHubのPRのたびに継続的にテストさせるために活躍するのがCircleCIとなります。
Percyを使うにあたってCypress, GitHub, CircleCIは差し替え可能です
それではPercyを試してみたいと思います！
前提
- GitHubでcypress-io/angular-pizza-creatorをkenfdevにFork済み
- テスト用のsample-branchを作成済み
- Cypressのテストは流用しているので実装済み
- CircleCIのアカウントは登録済み
Percyの準備
Percyの登録
https://percy.ioにアクセスしますして、GitHubアカウントで登録しました。
続いて、Company nameとメールアドレスの登録になるのですが、このCompany nameがGitHubでいうOrganizationだったりOwnerみたいな扱いになってそうなので注意が必要です。（Individualにしたら重複エラーになってしまった）
最初のプロジェクトの登録をします。1リポジトリに複数のプロジェクトを登録できるみたいですが、今回はリポジトリの単位＝プロジェクトの単位と考えて良さそうです。
これで初回登録のフローが完了しました！
Percyと外部サービス連携
上のキャプチャに表示されている「Add integration」から、外部サービスを連携させることができます。
GitHub連携
GitHubとPercyを連携します。GitHub Appをインストールすることになります。
諸々許可をするとInstalledになります。
連携外部サービスにGitHubが追加されているのがわかります。
Slack連携
Slack連携も簡単に行うことができます。以下の中から何を通知させるか選択できるようですが、とりあえず全部通知させるようにしてみました（通常はUnreviewedだけで十分だと思います）。
- Unreviewed
- 画面上で差分が出たもののレビューが必要な場合に通知
- No changes
- 画面上で何も差分が無かったものでも通知
- Auto-approved
- 自動Approve設定されているブランチでは自動Approveが行われるが、そのタイミングでも通知
- Approved
- ビルドがApproveされたときにも通知
以上でGitHubとSlackの連携が終わって以下のようになります。
CircleCIの設定
PercyとCircleCIを連携します。これに関しては公式ドキュメントでも説明されています。
リポジトリ追加
CI連携しておきたいので、CircleCIにリポジトリを追加します。
サードパーティ製のorbsを許可
PercyはCircleCIで使えるorbsを提供しています。これを使うためにはCircleCIのSecurity設定からorbsの使用を許可する必要があります。これが設定されていない場合にはCircleCIで以下のようなエラーになります。
CircleCIのSettings > Securityの項目で、以下のように設定することでorbsが使えるようになります。ビルドエラーにも書いてありますが、この設定をONにして、CircleCIのJobをRerunしても失敗するので注意！新しいJobを発火させないとビルドエラーは解消されません。
PERCY_TOKEN環境変数の設定
Visual Regression Testなので、Percyにテスト時の情報を送信する必要があります。そのためにはトークンが必要になるので、PercyのProject Settingsからトークンを取得します。
これをCircleCIのProjectのSettings > BUILD SETTINGS > Environment Variablesから設定します。
CI実行
以上の設定が完了したらCircleCIのWorkflowを実行します。全部うまくいけばCIは成功！
Percy検証
ここまでで設定が完了したので、いよいよPercyの機能を見てみます。
ベースデータの登録確認
現時点でのPercyのプロジェクトを覗いてみると：
何やら結果が増えているのがわかります。（1のFailは気にしないでください）
この中を見ると、Percyのレビュー画面に遷移します。
それっぽい画面が表示されているのがわかります！ちょっと最初はわかりづらいかもしれませんが、左が比較元で、右が今回の変更点です。初めてPercyに情報を送ったので、左側には何もないのがわかります。
初回は全てApproveしちゃってOKなので、右上のApprove Allをクリックします。
Percy上でもUnreviewedからApprovedになっているのがわかります。
これでベースとなるデータの登録ができたことになります。
画面に変更を加えて検証
ここからが本番！それでは、なんらかの拍子にピザの色をCSSで緑に変更してしまったとしましょう。
通常のe2eテストであればこのバグをキャッチするのは難しいです（不可能ではない）。しかし、Percyを利用していると変更前の画面と、変更後の画面の比較を自動で行ってくれるので、キャッチできるんです！
ということで上の変更内容をGitHubにPushしてPRを作ります。PercyとGitHubの連携も行っているおかげで、PRにPercyが表示されるのがわかります。
ここからPercyに飛ぶと！
なんだか想定と違う。。。？比較元はさっき用意したはずなのに無い。今更ですがそもそも「比較元はどうやって選んでいるのか？」という点が気になります。
公式ドキュメントに専用のページがあります。
確かに今回の検証はちょっと特殊で、sample-branchをベースにして、そこからsample-change-pizza-base-colorのbranchを生やしているので、比較元はsample-branch、比較先はsample-change-pizza-base-colorとなります。公式ドキュメントのPull request buildsに該当するから、特に意識せずに動作してほしいところですが、どうもそんなに単純な話じゃないみたいです（僕が設定を間違えている可能性が高いのでこれは別途調査が必要）。
明示的に比較元を設定することができるので、今回はCircleCIからPERCY_TARGET_BRANCH環境変数を設定してテストを再実行することにしました。
再度Percyの結果を見ると：
「おお！！」と言いたくなるようなdiffが生成されています。差分が赤くわかりやすく表示されています。そしてその部分をクリックすると、元の画像とのトグルもできるようになっているんです。
感動します！！
また、Slackにも随時ちゃんと通知が来ているのでSlackユーザーにとってもうれしい限り。
疑問点については指摘をして、修正してもらうorApproveをすることでレビューのプロセスを勧めていくことができます。
Percyをうまく活用することでかなりレビューの手間を省けるのと、品質のレベルを1ランク上げられるのではないかと思います。
まとめ
- Percy + Cypressを試した
- SaaSのおかげでVisual Regression Testのハードルがかなり下がったと感じた
- 画面の表示に関連したレビューのプロセス（スピード）がかなり改善すると感じた
まだまだ氷山の一角
この記事で紹介できたのはまだまだPercyの力のほんの一部です。（僕もまだ触ったばかり）
例えばSDKであれば現時点（2019-08-25）で↓だけ項目が用意されています。
- PercyScript
- Web applications
- Components
- Storybook
- End-to-end testing
- Static sites
- Command-line client
- Jekyll
さらに、機能に関しては上で紹介している基本的なものに加えて
- Ignore regions
- CSSでPercy実行時だけ表示・非表示にする場所を制御できる
- Responsive visual testing
- Percy用のSnapshot取るときに幅を指定してレスポンシブデザインのチェックもできる
- Cross-browser visual testing
- Automatic diff matching
- 同じ差分内容であればPercy側で勝手にグルーピングしてくれて、まとめてApproveできる
があります。
試してみたいことが山のようにありますが、この記事はここまでとします！
Percyを使ってガンガン恩恵を受けていきたい気持ちが高まりました。気になるのは料金体系ですが、どうやらこれはSnapshotの枚数で変わってくるみたいです。「月に何枚のSnapshotを撮るのか」というのはシステムのユースケースと、変更の量（PR）、クロスブラウザだったりレスポンシブをどこまでテストするかなどで変わってくるのでパッとは想像しにくいですね。人がそれをテストした場合のコストと比較してみると恩恵がわかりやすくなりそうです。
Percy以外にもSaaSがあると思いますので、それらとの比較も検証したいですね！
