注意：reg-suitの概要は把握している前提で執筆する

目的

reg-suitでビジュアルリグレッションテストしてみてざっくり導入出来そうか検討する

前提条件

今回はHTML&CSSからスクショして簡単な画像比較を行う
- 参考にしたreg-suitの公式リポジトリ

ソフト	バージョン
OS	macOS Catalina
Chrome	83.0.4103.116

使ったツール

GitHub
AWS
CircleCI

作業ログ

cloneしてきたリポジトリ
- https://github.com/reg-viz/reg-puppeteer-demo
- こちらのReadmeを参考にreg-suit使ってみる
自分でテストしたリポジトリ
- https://github.com/takahigu322/reg-suit-demo2

1. project作成

はじめに project directoryを作成.

mkdir reg-puppeteer-demo
cd reg-puppeteer-demo
// ここにclone
git init
npm init

2. HTML と CSS作成

サンプルのHTMLとスタイルを配置します。 reg-suitを使用してこのHTMLをテストします。
yarn add semantic-ui-css でcss適用←公式リポジトリのReadmeにないので注意

3. スクリーンショットをキャプチャするためのスクリプトを作成する

index.htmlのスクリーンショット画像を視覚回帰テストのreg-suitに提供する必要があります。そこで、ヘッドレスChromeのNode.jsプログラマブルインターフェイスであり、スクリーンショットAPIを提供するPuppeteerをインストールします。

npm install -D puppeteer mkdirp

次のスクリプトを使用すると、HTMLファイルをキャプチャできます。

capture.js

const puppeteer = require('puppeteer');
const mkdirp = require('mkdirp');

async function main() {
  const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
  let page = await browser.newPage();

  await page.setViewport({ width: 640, height: 680 });
  await page.goto(`file://${__dirname}/index.html`);
  await new Promise(res => setTimeout(() => res(), 300));
  await page.screenshot({ path: 'screenshot/index.png' });

  await page.close();
  await browser.close();
}

mkdirp.sync('screenshot');
main();

node capture.js でスクショ→screenshot/index.pngを開く

4. AWS credentialsを準備

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

5. reg-suitを構成する

npm install -D reg-suitでreg-suitをインストール

npx reg-suit init　or reg-suit init

インストールするプラグインを尋ねます。今回は以下の4つ
1. reg-keygen-git-hash-plugin
2. reg-notify-github-plugin
3. reg-publish-s3-plugin
4. reg-notify-slack-plugin
「作業ディレクトリ」と「しきい値」で「はい」を渡します。「ディレクトリに実際の画像が含まれています」という質問では、上記の手順で準備したスクリーンショットディレクトリを指定する必要があります。
```
? Working directory of reg-suit. .reg
? Directory contains actual images. screenshot
? Threshold, ranges from 0 to 1. Smaller value makes the comparison more sensitive. 0
```

S3バケットの場所を指定します

[reg-suit] info version: 0.8.6
[reg-suit] info Set up reg-publish-s3-plugin:
? reg-publish-s3-plugin has been already configured. Override this configuration Yes
? Create a new S3 bucket Yes
[reg-publish-s3-plugin] info Create new S3 bucket

githubのclientID
- リポジトリのClientIDを聞かれるので予め作っておく
slackのwebhookURL
- webhookURLを設定したらtest messageが飛んできた

最後に、設定を確認します。したがって、設定ファイルはregconfig.jsonに作成されます。

[reg-suit] info Configuration:
[reg-suit] info {...}
? Update configuration file Yes
? Copy sample images to working dir No
[reg-suit] info Initialization ended successfully ✨

変更をcommitして npx reg-suit run or reg-suit run

commit c8f99eb1a5c6abb64d67d9277d29b71bbf18c986 (origin/master, origin/HEAD, master)
Author: takahigu322 <takahigu642@gmail.com>
Date:   Fri Jun 19 11:56:21 2020 +0900

    first commit

6. Create build script for CircleCI

Project Setting → Organization Settings → Contexts　にAWS認証情報を追加

7. 通知を構成する

この機能をオンにするには、reg-notify-github-pluginをインストールします。

npm install -D reg-notify-github-plugin

Antは、次のコマンドを使用してこのプラグインを構成します。

もし5.reg-suitを構成するでプラグインを選んでたらスルー

npx reg-suit prepare --plugin notify-github

8. レポートをプレビュー

新しいブランチを作成します。

git checkout -b add-avatar2

index.html fileを書き換える

GitHubリポジトリでプルリクエストをコミット、プッシュ、add-avatar2からmasterへプルリクオープンします。

reg-suit botが出るまで10分少々かかった

reg-suit run　

this reportクリック
↓が結果
Comparison Report - REG

導入検討

reg-suit使ってみた感想
導入することによるメリデメ

正しく検出しないと誤解を招く
改修した部分を確認は出来る
ビジュアルリグレッションテストとしては足りない所がある
前回と比べて変わった所を把握した上で判断した
意図せず変わった所を検出できるのは良い
何か必要？
差が出てるだけ
- これを誰かが判断しないと、この結果を受けて。これを自動でできるのかが分からない
正しい使用方法との認識のズレがある可能性もある
開発者が変化に気付ける
reg-suitは1px単位のズレを検出
運用としては軽い
テストとは言えない、ただの通知でしかない
今回はHTMLで比較
今回のをきっかけに付随するものを検出
capture.jsで複数画面を取得する→すごい手間になる
前回と今回の比較になる
境界値的なものを把握した前提
storybookにカタログを使う
そもそもどこからこのテストを導入することに
- ECサイトのリグレッションテスト
- うちで言う動画700種類、footerの内容で使える
Misocaは日毎にやってて良さそう
- Capybaraのスクリーンショット
RRRSpecで分散実行
全部Vueに実行
CIじゃなくてよくね？
定期的に実行される→自動化したい
component単位で確認したい→reg-suit出来るの？
- reg-suitは単純な画像比較

参考資料

Misocaにおけるビジュアルテストへの取り組み

1px の変化も見逃さない！ビジュアルリグレッションテスト導入で快適フロントエンド開発 - クラシル開発ブログ

Percy + CypressでVisual Regression Test - kenfdev's blog

reg-suitでVisual Regression Testしてみた

目的