VisualRegressionTest実行をreg-suitからreg-cliへ移行

reg-cliへの移行を考えたきっかけ

現在チームではVisualRegressionTestを、CI(Bitrise)上のreg-suitで毎晩定期実行しています。
運用してから1年程度経過し、以下のような課題が出ました。

1. VRT対象画面がよく変更になるため、そこそこの頻度で正解データの変更をする必要があった(頻度的には平均すると10日に1回程度)
2. 実行時間がそこそこ長い(40枚程度をテスト完了するのに25分程度)
3. 稀に reg-suit run 実行後エラーが起きる(頻度的には平均すると週1回程度)

reg-suitからreg-cliへ移行した時のメリット

1. CI環境実行時正解データの変更が割と容易になる
   現在正解データ格納場所は所定のクラウドストレージ(GoogleCloudStorage or AWS S3)となっているため、GUIで手順通りにやれば誰でも正解データは入れ替え可能ですが、少々煩雑で操作が直感的ではない等の問題があります。
   reg-cliに移行すると、Github管理された場所に正解データを置くため、正解データのディレクトリごと置き換えるだけとなります

2. VRTとしての比較精度は変わらないままCI上の実行時間が短くなる
   reg-suit内ではreg-cliを実行しているため、一番大事な精度面の差分はありません。
   CIでの実行時は毎回 npm install reg-suit が走るためインストールコストもreg-cliに比べるとばかになりません
   また、クラウド上から正解データをDLする処理もなくなるため、現在も平均値を出すため中期で計測中ですが2~3割程度の高速化は見込めそうです(別途正解データを置く場所によってはDLは必要です)

3. ローカル環境でテスト実行から正解データ反映までが容易
   ローカル環境にreg-cliを入れる必要はありますが、ローカルでテスト実行から正解データ変更までを容易に行えます

reg-suitからreg-cliへ移行した時のデメリット

1. テスト結果の保存問題
   reg-suitではクラウド上に正解データ及びテスト結果が保存されるため、見たい時に結果を見返せるが、reg-cliへ移行と同時にテスト結果の保存については考える必要があります（正解データはGithub管理なので問題なし）
   Bitriseではテスト結果データを一時的に保存できるが1週間までのため、もしもそれが要件に合わないようであれば移行は考えたほうがよいです

2. テスト結果のSlack通知
   regconfig.jsonに書いておけばあとはCI上でreg-suitを実行するだけてSlackへの結果通知までやってくれていたのを、自前で実装する必要があります。

3. 運用・保守コスト
   上に上げた2点で問題が起きると、reg-suitの場合は識者が直してくれるかもしれませんがreg-cliの場合は自身でメンテする必要があります

実装比較

RegSuit_bitrise.yml

npm install -g reg-suit
npm install

# Pluginのインストール
npm i reg-notify-slack-plugin -D
echo N | reg-suit prepare -p notify-slack
npm i reg-publish-gcs-plugin -D
echo N | reg-suit prepare -p publish-gcs

npm i reg-simple-keygen-plugin -D
echo N | reg-suit prepare -p simple-keygen

export BUCKET_NAME=${BUCKET}
export EXPECTED_KEY=${DIRECTORY}/'expected'
export ACTUAL_KEY=${DIRECTORY}/${ACTUAL}
export ACTUAL_DIR=${SAVED_ACTUAL_DIR}
export SLACK_WEBHOOK_URL=${SLACK_WEBHOOK_URL}
export GOOGLE_APPLICATION_CREDENTIALS='/tmp/gcloud-service-account-key.json'

# テスト結果のスクショを所定の場所に移動してリネーム
mv ${VDTESTING_DOWNLOADED_FILES_DIR}/${IMAGE_PREFIX}*.png ./${SAVED_ACTUAL_DIR}/
cd ${SAVED_ACTUAL_DIR}
ls | sed -r "s/($IMAGE_PREFIX)(screenshottest[_a-z0-9]+)\.png/mv & \2.png/g" | bash
cd ..

# 実行
reg-suit run

RegCli_bitrise.yml

npm install -g reg-cli

# テスト結果のスクショを所定の場所に移動してリネーム
mv ${VDTESTING_DOWNLOADED_FILES_DIR}/${IMAGE_PREFIX}*.png ./${SAVED_ACTUAL_DIR}/
cd ${SAVED_ACTUAL_DIR}
ls | sed -r "s/($IMAGE_PREFIX)(screenshottest[_a-z0-9]+)\.png/mv & \2.png/g" | bash
cd ..

# 実行
reg-cli ./actual ./expected ./diff -R ./report.html

# 実行スクショの保存
tar zcvf actual.tar actual

# Slackへの通知(専用ワークフローがあり、それをafer_runで呼び出すだけのため割愛)