実現したいこと
seleniumで取得した画面スクリーンショットを前回実行時との差分の有無を素早く確認したい
差分が有る場合に、対象のスクリーンショットの確認と差分内容を素早く確認したい
実現方針
reg-cliを使用して、該当の２つのディレクトリ配下の画像比較と比較結果のレポート出力を行う
reg-cliとは
ビジュアルリグレッションテストのためのコマンドラインインターフェイスです。
アサートする画像を指定するだけで現在の画像と以前の画像を比較し、差分のHTMLを作成してくれます。
ビジュアルリグレッションテストとは
ざっくりいうと「見た目の比較」をするテストのことです。
変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。
参考とした記事
環境
mac os 13.0.1
npm v6.14.15
node v14.18.1
手順
ライブラリをインストールする
npm（Node.jsパッケージマネージャー）を使用して、インストールします。
コマンドプロンプトを開き、以下のコマンドを実行します。
npm install -g reg-cli
スクリプトを作成
以下は、画像のビジュアルリグレッションテストを実行するシェルスクリプトです。
shell exec.sh
#!/bin/bash
# reg-cliを実行するシェルスクリプト
# reg-cliがインストールされているか確認する
if ! command -v reg-cli &> /dev/null
then
echo "reg-cliが見つかりませんでした。インストールします..."
npm install -g reg-cli
fi
# タイムスタンプを取得する
ts=$(date '+%Y%m%d%H%M%S')
# ディレクトリのデフォルト指定
diffDir="./diff"
actualDir="./actualDir"
expectedDir="./expectedDir"
# カレントディレクトリ内を探索して、フォルダのうちタイムスタンプが最も直近のものとその次のものを指定するように上書き変更
# mac用
dirs=($(ls -d */ | xargs -I{} stat -f '%m %N' "{}" | sort -r | awk '{print $2}' | head -n 2))
actualDir=${dirs[0]}
expectedDir=${dirs[1]}
# reg-cliを実行する
reg-cli $actualDir $expectedDir $diffDir \
-C 4 \
-M 0 \
-T 0.1 \
-A \
-R "report_$ts.html" \
-J "report_$ts.json" \
-D
実行結果を確認
スクリプトを実行し、
出力されたレポートreport_yyyymmddhhmmss.htmlを開いてみます。
(補足)コマンドオプション
-U, --update：期待される画像を更新します。(実際の画像を期待される画像にコピーします)
-J, --json：指定されたJSONレポートのパスを指定します。省略すると、./reg.json に
-I, --ignoreChange：画像の変更が検出された場合、エラーが発生しないようにします。
-E, --extendedErrors：追加/削除された画像もエラーをスローするようにします。省略時は false
-R, --report：HTMLレポートを指定されたディレクトリに出力します。例: -R "report_$ts.html"
-P, --urlPrefix：すべての画像のsrcにプレフィックスを追加します。
-M, --matchingThreshold：一致しない場合のしきい値を設定します。0がデフォルトです。
-T, --thresholdRate：変更を検出するための比率のしきい値を設定します。
-S, --thresholdPixel：変更を検出するためのピクセル数のしきい値を設定します。画像の差分ピクセルが設定されたピクセル数よりも大きい場合、変更を検出します。この値は thresholdRate よりも優先されます。
-C, --concurrency：並列で実行するプロセス数を設定します。省略すると 4 になります。
-A, --enableAntialias：アンチエイリアスを有効にします。省略すると false になります。
-X, --additionalDetection：追加の差分検出を有効にします（高度な実験的機能）。 "none"または "client"を選択できます（デフォルトは"none"）。