reg-suitとQA Wolfを活用したVisual Regression Test

reg-suitとQA Wolfを活用した
Visual Regression Test
エムスリー
阿部一幸

おはなし
❏ 自動E2Eテストの現実 -つらみ-
❏ 自動E2Eテストの現実に立ち向かう -目視確認-
❏ 目視確認のための自動化
❏ Visual Regression Testの世界へ
❏ reg-suitで手軽にVisual Regression Test
❏ QA Wolfでスクリーンショットを取得
❏ Unit Test同様にCIで実行
❏ 現場の声
❏ まとめ

自動E2Eテストの現実
-つらみ-

自動E2Eテストの現実 -つらみ-
❏ 自動E2Eテストの現実
❏ テストNGの時、自動テストの不備をまず疑う
❏ テストNGなのに、対象システムにバグがあると言いきれない
❏ 自動テストもプログラムに過ぎず、テスト自身のバグの可能性
❏ 自動テスト用環境が原因の可能性
❏ 自動テスト用技術が原因の可能性
❏ リトライしたら動いてしまうような、一時的な問題の可能性
❏ 保守が追いついておらず、常にNGとなる状態のままの可能性

❏ 暗黙で目視確認してるような観点は、自動テストで意外と漏れてる
❏ ログイン機能のテスト
❏ ID、パスワードを入力してログインできることを確認
❏ ログインできるとは？
❏ URLがログイン後ページのものになっているだけでいい？
❏ レイアウトが崩れていてもいい？
❏ 当然ダメだけど、プログラムで確認しろというのは辛い
❏ 自動テストは書いたことしかテストしない（自動化8原則の3）

❏ 自動テストが動かなくなったら、そのままになる
❏ 何よりリリース優先
❏ 開発者としてはテストしてもらえればよく、手段は手動自動を問わない
❏ 自動テストが動かない時は、動くように修正ではなく手動テストをする
❏ リリースを終えても次のリリース対応になり、修正しないままになる

❏ とはいえ、自動テストをまったくしないという選択肢はない
❏ 同じテストが繰り返し求められる
❏ 短期間で広範囲のテストを求められる
❏ 飽きやすい単調な定型テストをミスなく実施が求められる
❏ 影響がないと言いきれないところはテストが求められる
❏ 勤務時間内にこなせるテスト量が限られてしまう
❏ 上記状況に対して有用なのは間違いなく、現実的な手法ではある

自動E2Eテストの現実に立ち向かう
-目視確認-

自動E2Eテストの現実に立ち向かう -目視確認-
❏ 自動E2Eテストの現実に立ち向かう
❏ テストNGの時、自動テストの不備をまず疑う現実
❏ 暗黙で目視確認してるような観点は、自動テストで意外と漏れてる現実
❏ 自動テストが動かなくなったら、そのままになる現実

❏ 愚直に目視確認を追加した
❏ 修正影響を目視確認できる状態にするところまでを、自動化した
❏ もちろん、目視確認の追加が他2つの現実に直面しないようにした

❏ テストNGの時点で目視確認はできている
❏ 目視確認できる状態なら、自動化側の不備から疑うことはないはず
❏ 修正影響を目視確認できる状態にするところまでを、自動化する

❏ 目視確認できる状態なら、自動化側の不備から疑うことはないはず
❏ 修正影響を目視確認できる状態にするところまでを、自動化する
❏ 修正が行われればいい（それはそう）
❏ 修正影響を目視確認できる状態の維持を、開発者の責務とした
❏ すんなりと受け入れられた

❏ 目視確認テストを追加した
❏ 状態の維持実現のため、Unit Test同様にCIで実行されるようにした

目視確認のための自動化
Visual Regression Testの世界へ

❏ Visual Regression Testとは
❏ 視覚的な手法で行うRegression Test
❏ 修正前後を画像比較して差分がなければ、テストOKとなる
❏ 画像取得、画像比較、比較結果レポートができるツールを使う

❏ Visual Regression Testとは
❏ 視覚的な手法で行うRegression Test
❏ 修正前後を画像比較して差分がなければ、テストOKとなる
❏ 画像取得、画像比較、比較結果レポートができるツールを使って行う
❏ 修正影響を目視確認できる状態にするところまでの自動化に使った
❏ ツールのテストOK/NG判定は、差分なし/差分ありと読み替えた
❏ 修正により想定される差分なら、目視確認時にテストOKとした

❏ Visual Regression Test用のツール
❏ Awesome Visual Regression Testing
❏ https://github.com/mojoaxel/awesome-regression-testing
❏ 3種類
❏ 画像取得、画像比較、比較結果レポート All-in-One
❏ BackstopJS (Star:5.6k)
❏ 画像比較、比較結果レポートのみ
❏ reg-suit (Star:0.7k)
❏ 画像比較のみ
❏ Resemble.js (Star:3.7k）

❏ BackstopJS（All-in-One）
❏ 利用できるブラウザが限定される
❏ 自分で用意した画像で画像比較ができない
❏ 画像取得の方法が独特で辛い
❏ URLを設定ファイルに記載するだけで完結するのがウリ
❏ スクリーンショットを取得するURLを記載
❏ Post処理が必要なURLの場合は、DSLで処理を記載
❏ ログインが必要なURLの場合は、DSLで処理を記載
❏ URLを設定ファイルに記載するだけで完結とは？

❏ Resemble.js（画像比較のみ）
❏ 目視確認できない

❏ reg-suit（画像比較、比較結果レポートのみ）
❏ 自分で用意した画像で画像比較ができた
❏ 見やすい比較結果レポートで目視確認ができた
❏ 画像取得はブラウザ操作ツールで自動化できる

reg-suitで手軽にVisual Regression Test

❏ reg-suitのコア機能
❏ 2つの画像（期待値と現在）を比較
❏ ピクセル単位の差分を検知
❏ 新規画像（現在のみ存在）、削除画像（期待値のみ存在）を認識
❏ 比較結果をHTML形式でレポート
❏ 差分あり一覧、差分なし一覧、新規一覧、削除一覧
❏ 差分の詳細
❏ プラグインで機能拡張できる

❏ 処理の流れ（コア機能）
画像（現在）
画像（期待値）
比較比較結果

❏ インストール
❏ package.jsonファイル
❏ "reg-suit": "x.xx.xx"
❏ npm install

❏ 初期設定
❏ npx reg-suit init
❏ 追加するプラグインの選択
❏ ワーキングディレクトリの指定
❏ 期待値画像を置くディレクトリなどが含まれる
❏ 現在画像を置くディレクトリの指定
❏ 比較の敏感さの指定
❏ 差分ありと判定する敏感さ
❏ ex.) 1ピクセルの差でも差分ありなのか

❏ 実行
❏ 画像を所定のディレクトリに置く
❏ npx reg-suit compare

❏ 比較結果（サマリー）

❏ 比較結果（詳細：2upモード）

❏ 比較結果（詳細：Diffモード）

❏ 比較結果（詳細：Slideモード）

❏ 比較結果（詳細：Blendモード）

❏ 比較結果（詳細：Toggleモード）

❏ 処理の流れ（コア機能）
画像（現在）
比較比較結果
自分で置く
自分で置く
自分でブラウザに表示する
npx reg-suit compare

❏ 処理の流れ（＋プラグイン機能）
画像（現在）
比較比較結果
ストレージ取得
保存
通知
自分で置く

❏ プラグインのインストール
❏ npx reg-suit init
❏ 追加するプラグインの選択
❏ 期待値画像を置くディレクトリなどが含まれる
❏ 現在画像を置くディレクトリの指定
❏ 比較の敏感さの指定
❏ 差分ありと判定する敏感さ
❏ ex.) 1ピクセルの差でも差分ありなのか

❏ プラグイン込みの実行
❏ npx reg-suit run（3コマンドを連続実行するコマンド）
❏ npx reg-suit sync-expected
❏ 期待値画像をストレージから取得
❏ npx reg-suit compare
❏ 比較
❏ npx reg-suit publish -n
❏ 比較結果、比較に使用した現在画像をストレージに保存
❏ 比較結果を通知

❏ 処理の流れ（＋プラグイン機能）
画像（現在）
画像（過去）
比較比較結果
保存
通知
自分で置く
npx reg-suit run

QA Wolfでスクリーンショットを取得

❏ QA Wolfとは
❏ ブラウザ操作コードの自動生成ツール
❏ ブラウザ操作を記録して、Playwright、Jestのコードを自動生成する
❏ エンジニアでなくてもブラウザ操作を自動化できる
❏ 保守性の高いコードは生成されない
❏ が、ブラウザ操作の一時的な自動化としては十分使える
❏ ex.) 今日1日同じ操作繰り返すから自動化しよう
❏ Chromium、Firefox、Webkitでの実行を1コマンドで行える

❏ Playwrightとは
❏ ブラウザ操作ツール
❏ ヘッドレス含むChromium、Firefox、Webkitに対応している
❏ WebDriverを利用していない
❏ スクリーンショットを取得できる
❏ クリックなどの操作ができるようになるまで自動で待つ
❏ ページ描画のための画像リクエストやjsリクエストを制御できる
❏ リクエスト停止、モック化、レスポンス受信まで待つ、etc.

❏ Playwrightとは
❏ プロキシを利用できる
❏ Shadow DOM、アップロード/ダウンロードなどにも対応できる
❏ デバイスをエミュレートできる
❏ UserAgent、Viewport、スケール、カラースキーム
❏ 座標、ロケール、オフラインモード
❏ モバイル端末モード、パーミッション（notificationsなど）
❏ etc.

❏ Jestとは
❏ JavaScript用のテストフレームワーク
❏ 挙動が想定通りかテストできる

❏ インストール
❏ npm init qawolf
❏ QA Wolf、Playwright、Jestのインストール
❏ 設定ファイルの作成

❏ コード自動生成
❏ https://time.is/Tokyo にアクセスするコードを生成
❏ npx qawolf create https://time.is/Tokyo xxxx
❏ xxxx.test.jsというファイルが生成される
❏ 指定のURLでブラウザが立ち上がる
❏ ブラウザ操作するとコードが追加される

❏ コード自動生成
❏ https://time.is/Tokyo にアクセスするコードを生成
❏ npx qawolf create --device="iPhone 8" https://time.is/Tokyo xxxx

❏ 生成されたコード（抜粋）
test("timeis", async () => {
const page = await context.newPage();
await page.goto("https://time.is/Tokyo", { waitUntil: "domcontentloaded" });
行った操作
});

❏ スクリーンショット取得処理を自分で追加
test("timeis", async () => {
const page = await context.newPage();
await page.goto("https://time.is/Tokyo", { waitUntil: "domcontentloaded" });
行った操作
await page.screenshot({
path: 'directory_contains_actual_images/timeis.png',
fullPage: true
});
});

❏ 実行
❏ npx qawolf test xxxx

❏ 処理の流れ（+ QA Wolf）
画像（現在）
画像（過去）
比較比較結果
保存
通知
QA Wolfでスクリーンショット保存
npx qawolf test xxxx
npx reg-suit run

Unit Test同様にCIで実行

❏ 目視確認テストを追加した
❏ 状態の維持実現のため、Unit Test同様にCIで実行されるようにした
おさらい

❏ 開発の流れ
❏ 開発者がコードをcommitする
❏ CIにより様々な処理が行われる
❏ 利用ライブラリの脆弱性チェック
❏ 静的コード解析
❏ Unit Test実行
❏ etc.
❏ 問題がなければコードレビューを依頼
❏ 問題がなければテストを依頼

❏ 開発の流れ
❏ 開発者がコードをcommitする
❏ CIにより様々な処理が行われる
❏ 利用ライブラリの脆弱性チェック
❏ 静的コード解析
❏ Unit Test実行
❏ Visual Regression Test実行
❏ etc.
❏ 問題がなければコードレビューを依頼
❏ 問題がなければテストを依頼

❏ CIへの組込
❏ Dockerイメージの準備
❏ CI組込用のQA Wolf公式Dockerイメージを使う
❏ https://hub.docker.com/r/qawolf/playwright-ci
❏ 日本語フォントが含まれず、日本語サイトの表示が文字化けする
❏ 特定フォントが必要ならそれを、ないならNotoなどをインストール
❏ Notoフォントファミリー
❏ Googleが提供しているフォントファミリー
❏ 世界中の言語サポートを目標としている

❏ CIへの組込
❏ Dockerイメージの準備

❏ CIへの組込
❏ コードがcommitされた時などに実行されるようにする
❏ 日本語フォントが含まれるDockerコンテナを起動
❏ reg-suit、QA Wolfをインストール
❏ QA Wolfを実行
❏ reg-suitを実行

❏ 処理の流れ（+ QA Wolf）
画像（現在）
画像（過去）
比較比較結果
保存
通知
QA Wolfでスクリーンショット保存
npx qawolf test xxxx
npx reg-suit run
CIにて実行

現場の声
❏ 目視確認を追加したことで。。
❏ 開発者
❏ 想定する影響/想定外の影響があるか目視確認できるようになった
❏ 最低限、画面が表示されることを保証できるようになった
❏ 負債コードの改修に対する精神的負荷を、減らせるようになった
❏ 目視確認用コードの保守は、画面表示だけなので苦労しなかった
❏ コードレビュアー
❏ 画面変化を目視確認でき、良し悪しを判断しやすくなった
❏ 画面変化を目視確認でき、コードが頭に入りやすくなった

現場の声
❏ 目視確認を追加したことで。。
❏ QA
❏ 画面変化を目視確認でき、テスト対象をイメージしやすくなった
❏ テスト開始時点で、画面を表示できることが保証された
❏ 開発者がテストの保守をすることで、開発者を当事者に巻き込めた
❏ CIのテスト環境ネットワークの整備が大変だった
❏ 今まではUnit Testできればよかった
❏ 他システムとの通信が発生するようになった

まとめ
❏ 暗黙で目視確認してるような観点は、愚直に目視確認がいい
❏ 目視確認するための土台作りは自動化できる
❏ スクリーンショット取得はQA Wolfおすすめ
❏ 画像比較、比較結果レポートはreg-suitおすすめ
❏ 開発フェーズの画像比較は、3者にメリットがあって良いもの
❏ 開発者
❏ コードレビュアー
❏ QA

reg-suitとQA Wolfを活用したVisual Regression Test

More Related Content

What's hot

Similar to reg-suitとQA Wolfを活用したVisual Regression Test

reg-suitとQA Wolfを活用したVisual Regression Test