reg-suitでVisual Regression Testしてみた
↑のCI使わないver

CIを使わない理由

CI/CDを使うと、コードの変更が発生するたびに自動でテストが行われるので、テストの実行忘れや、環境依存のテストを失くすことでの品質を向上させることができる。
ただ今回はコード修正などのPR毎ではなくて、リリース時など大きなイベントが起こった際にUIのデグレを無くすために、ローカル環境でreg-suitを用いてビジュアルリグレッションテストを実行し、メンテナンスを行うことを想定した。

使用したリポジトリ

Add avatar by takahigu322 · Pull Request #2 · takahigu322/reg-suit-demo3

使うもの

reg-suit: Command line interface to visual regression testing. It only compares pictures, so we should prepare the pictures to test.
Puppeteer: Node.js library which provides a high-level API to control headless Chrome over the DevTools Protocol. We capture screenshot picture from out HTML using this.
AWS S3: We use a S3 bucket to put snapshot images and HTML reports

参考にしたリポジトリ

自動視覚的スナップショットテストを導入する方法

プロジェクトを作る

mkdir reg-puppeteer-demo
cd reg-puppeteer-demo
git init
npm init

スクリーンショットをキャプチャするためのスクリプトを作成する&CSSを適用しスクショ
```
npm install -D puppeteer mkdirp
yarn add semantic-ui-css 
```
```
node capture.js
```
AWS認証情報を準備する

後のステップでS3にアクセスするには、AWSアカウントが必要です。 AWSアクセスキーを取得して構成します（IAMユーザーのアクセスキーの管理もご覧ください）。
```
export AWS_ACCESS_KEY_ID=<your-access-key>
export AWS_SECRET_ACCESS_KEY=<your-secret-key>
```
reg-suitを構成する
```
npm install -D reg-suit
```
インストール後、以下を介してreg-suitの初期化サブコマンドを実行します。
```
npx reg-suit init
```
reg-keygen-git-hash-plugin

reg-notify-github-plugin

reg-publish-s3-plugin

reg-notify-slack-plugin

今回は上記をinstall

必要なのはGithubのClientIDとSlackのwebhokkURL
ここまでの変更をコミットする
```
# .gitignore

node_modules/
/screenshot/
.reg/
```
```
git add .
git commit -m "first commit"
```
npx reg-suit runを使用して視覚回帰テストを実行する

Comparison Report - REG

別ブランチに入れてみる
```
git checkout -b add-avatar
```
GitHubリポジトリでプルリクエストをコミット、プッシュ、PRオープンします。

その後reg-suit実行
```
npx reg-suit run
```
するとPRにbotが走る

これでローカル環境のみでreg-suitを実行しビジュアルリグレッションテストが可能になった。