【Puppeteer × reg-cli】実行中のローカル環境でVRテストを行なう(後編: VRTの実施まで

VRT

VRT とは Visual Regression Testing のことで、画像による回帰テスト、つまりビューの変更差分を画像として比較しテストするものです。

テストとして得られる価値としては、スタイルシートの変更等でビジュアル面での変更が大小関係無く検知できるということがあります。
font-size 1pxの変更や設定している background-colorカラーコードの変更まで テストの結果として差分が出力されるので、改修に伴う予期しない変更の発見に繋がります。

この記事内で行なう事

この記事は後編記事です。VRTを実施するためにローカル環境の差分スクリーンショットを取得するまでは前編を参照ください。
後編と題したこの記事内では、作成した変更前・変更後のスクリーンショットを使ってreg-cliを使って変更内容のHTMLレポートを生成し 生成したHTMLをローカルにホスティングするところまで行ないます。

実現したいシーン

前回はPuppeteerを使って自分が作業を行なったブランチと、その元となる親ブランチの表示をそれぞれブランチを切り替える事でスクリーンショットを作成しました。

今回は、それらを比較するVRTを実際に実施し、結果を表示、そして それらのシーケンスをコマンドひとつ実行すれば実行されるようにします。

流れ

Puppeteerでローカル環境のビューのスクリーンショットを作成
↓
simple-gitで作業ディレクトリのブランチを親ブランチに変更
↓
ローカル環境のビューのスクリーンショットを作成
↓
~ここまで前回~
↓
reg-cliを実行してVRTを実施・実施結果の画像ファイルとHTMLレポートを作成する
↓
HTMLレポートをexpressで表示(expressを使う理由は後ほど説明します)

これを行ないます。

実装内容

前回、作成したスクリーンショットは作業ブランチ内・親ブランチのそれぞれ1枚ずつを作成しました。
それらを元にVRTを行ないます。

vrt-cliをインストールします。
https://github.com/noraj/vrt-cl

前回の内容で、親ブランチでを対象に作成したスクリーンショットは /public/screenshots/develop 作業ブランチの環境下を対象に作成したスクリーンショットは /public/screenshots/work に入っています。それらを元に /public/diff以下にテスト結果を出す事にします。

プロジェクトディレクトリのルートから指定する相対パスで比較元となるスクリーンショットが保存されたディレクトリ・比較対象となるスクリーンショットが保存されたディレクトリを指定し、以下の文でVRTを実行します。

reg-cli ./public/screenshots/develop ./public/screenshots/work ./public/diff -R ./public/report.html -I true

-R ./public/report.htmlで生成されるHTMLレポートファイルの出力場所を指定、-I trueで もし差分が生じたとしても続行してテストを実行するようにします。この指定があることで、差分が生じたとしても そのままテストを続行して保存されている全スクリーンショットを対象にテストを行なうようになります。

以上のコマンドを実行することで
/public/diff/トップページ.png(画像名は比較するスクリーンショット名に基いて決定されます(つまり、比較元と比較対象となるスクリーンショットの画像名は合致させている必要がありそうです))
/public/report.html
の2種類のファイルが生成されました。

画像ファイルの方を確認すると

こんな感じに、変更されている箇所が赤くハイライトされるようになっています。

HTMLファイルの方には、もっとビジュアライズされて比較結果がわかりやすい内容が入っているので、確認します。

テスト結果

まず、トップに差分が検出されたテスト内容が表示されています。
(今回テストにかけられたのは1ページのみなので、表示されているのは1つだけになっています)

詳細を確認すると
差分箇所が赤くハイライトされる Diff

スライダーを動かして変更前・変更後を比較する事ができるSlide

変更前・変更後が並べて表示される2Up

等の比較結果が表示されるようになっていました。

おわり

ローカルページのVRTを行ない レポートファイルをローカルで表示させるようにしました。
今回行なった内容では、チームメンバーに変更結果やテストの内容を共有しにくかったり いちいちコマンドを手動実行しなければいけなかったりとまだ不便な事があります。
いずれ、GithubActionsと連携させたりと自動テストとなるようにすれば もっと実用性が高まり 便利になるんじゃないかと思っています。