reg-suitを使ってみた( CI使わないver)

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

参考にしたリポジトリ

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

1. プロジェクトを作る

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

2. スクリーンショットをキャプチャするためのスクリプトを作成する&CSSを適用しスクショ

   npm install -D puppeteer mkdirp
   yarn add semantic-ui-css 
   

   node capture.js
   

3. AWS認証情報を準備する

   後のステップでS3にアクセスするには、AWSアカウントが必要です。 AWSアクセスキーを取得して構成します（IAMユーザーのアクセスキーの管理もご覧ください）。

   export AWS_ACCESS_KEY_ID=<your-access-key>
   export AWS_SECRET_ACCESS_KEY=<your-secret-key>
   

4. 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を実行しビジュアルリグレッションテストが可能になった。