CIが分からない PE(SETエンジニア)1年生が VRT(ビジュアルリグレッションテスト)を ハードル低くCIを運用した

CIが分からない PE（SETエンジニア）１年生が VRT（ビジュアルリグレッションテスト）を ハードル低くCIを運用した STAC2022 りふ 2022.12.03

自己紹介 n 会社 ・ ウ イ ン グ ア ー ク １ st n 経験 ・PE：1年目（1年生） ・ QA ： 5 年 目 n 社外活動 りふ ・ JaSST N ii g ata 2 1 年 度 ： 実 行 委 員 と 登 壇 ： QA と し て の 事 例 発 表 2 2 年 度 ： 実 行 委 員 長 ： テ ー マ は 可 観 測 性 ・ O b s e r va b ili t y @reflex4qa 2

ご注意 n お話しすること ・導入事例 ・運用事例 ・どんなツールを使用したか？まで n お話ししないこと ・ツールの実装方法のこと 3

今回のお伝えしたいこと 一般的なやり方に捉われずに、自分のできることで、 ハードル低くやること VRTの導入事例 VRTの運用事例 4

VRT導入のお話し VRTの導入事例 5

VRT導入のお話の流れ 1. きっかけ 2. 検知対象 3. 対象形式 4. 手段(ツール) 5. 環境 6. トリガー 視覚変化 画像形式 BackstopJS Windows タイマー 連携する サービスの 設定画面の 項目変化を 検知 動作変化 ソースコード 形式 reg-suit Linux 前プロセス 終了 6

VRT導入のお話の流れ 1. きっかけ 2. 検知対象 3. 対象形式 4. 手段(ツール) 5. 環境 6. トリガー 視覚変化 画像形式 BackstopJS Windows タイマー 連携する サービスの 設定画面の 項目変化を 検知 動作変化 ソースコード 形式 reg-suit Linux 前プロセス 終了 選択肢が2つあり、どのような理由で1つに絞っていったのか？ 7

1. VRTを導入するきっかけを知る 1. きっかけ 2. 検知対象 3. 対象形式 4. ツール 5. 環境 6. トリガー 視覚変化 画像形式 BackstopJS Windows タイマー 連携する サービスの 設定画面の 項目変化を 検知 動作変化 ソースコード 形式 reg-suit Linux 前プロセス 終了 8

1. VRTを導入するきっかけを知る 前提 連携させるには？ 注意することは？ 注意しないと？ 外部サービスの 設定画面に 設定にずれが生じて 自プロダクトの 自プロダクトが停止 設定 担当プロダクトは 外部サービスの 外部サービス連携 設定画面の変化 連携の設定方法を サービスサイトに 画像付きで掲載 サービスサイトに 反映されずに ユーザーから 問い合わせ 9

1. VRTを導入するきっかけを知る 前提 連携させるには？ 注意することは？ 注意しないと？ 外部サービスの 設定画面に 設定にずれが生じて 自プロダクトの 自プロダクトが停止 設定 担当プロダクトは 外部サービスの 外部サービス連携 設定画面の変化 サービスサイトに 連携の設定方法を 反映されずに サービスサイトに ユーザーから 画像付きで掲載 問い合わせ ここを検知したい！ 10

2. どのような”変化”を検知したいか？を決める 1. きっかけ 連携する 2. 検知対象 3. 対象形式 4. ツール 5. 環境 6. トリガー 視覚変化 画像形式 BackstopJS Windows タイマー 外部 サービスの 設定画面の 項目変化を 検知 動作変化 ソースコード 形式 reg-suit Linux 前プロセス 終了 11

2. どのような”変化”を検知したいか？を決める 1. きっかけ 連携する 2. 検知対象 視覚変化 目的 採用理由 ブラウザに表示される コントロールを操作して コントロールの変化 外部サービスの動作の変化までは 外部 知る必要が無い サービスの 設定画面の 外部サービスの設定の変化によって 項目変化を 自プロダクトに影響があるか知りたい 検知 動作変化 ブラウザに表示された コントロールを操作しての変化 12

2. どのような”変化”を検知したいか？を決める 1. きっかけ 連携する 2. 検知対象 視覚変化 目的 採用理由 ブラウザに表示される コントロールを操作して コントロールの変化 外部サービスの動作の変化までは 外部 知る必要が無い サービスの 設定画面の 外部サービスの設定の変化によって 項目変化を 自プロダクトに影響があるか知りたい 検知 動作変化 ブラウザに表示された コントロールを操作しての変化 13

3. 視覚変化をどのような”形式”で検知するのか？を決める 1. きっかけ 2. 検知対象 3. 対象形式 4. 手段(ツール) 5. 環境 6. トリガー 視覚変化 画像形式 BackstopJS Windows タイマー 連携する サービスの 設定画面の 項目変化を 検知 動作変化 ソースコード 形式 reg-suit Linux 前プロセス 終了 14

3. 視覚変化をどのような”形式”で検知するのか？を決める 2. 検知対象 視覚変化 3. 対象形式 画像形式 目的 ブラウザに表示された画面を 画像 で取得して差分を検知する 採用理由 ソースコードだと、外部サービ スのコントロール影響しない変 化も、検知する ブラウザに画面を表示させるた ソースコード形式 めの ソースコード で取得して差 分を検知する 15

3. 視覚変化をどのような”形式”で検知するのか？を決める 2. 検知対象 視覚変化 3. 対象形式 画像形式 目的 ブラウザに表示された画面を 画像 で取得して差分を検知する 採用理由 ソースコードの場合 外部サービスの画面に影響しな い変化も検知する たとえば、内部的なID ブラウザに画面を表示させるた ソースコード形式 めの ソースコード で取得して差 分を検知する 16

3. 視覚変化をどのような”形式”で検知するのか？を決める 2. 検知対象 視覚変化 3. 対象形式 画像形式 目的 ブラウザに表示された画面を 画像 で取得して差分を検知する VRT：ビジュアルリグレッションテスト 採用理由 ソースコードの場合 外部サービスの画面に影響しな い変化も検知する たとえば、内部的なID ブラウザに画面を表示させるた ソースコード形式 めの ソースコード で取得して差 分を検知する 17

4. 画像変化検知をどのような”手段”で実現するのか？を決める 1. きっかけ 2. 検知対象 3. 対象形式 4. 手段(ツール) 5. 環境 6. トリガー 視覚変化 画像形式 BackstopJS Windows タイマー 連携する サービスの 設定画面の 項目変化を 検知 動作変化 ソースコード 形式 reg-suit 動作変化 前プロセス 終了 18

4. 画像変化検知をどのような”手段”で実現するのか？を決める 比較変数 3. 対象形式 画像形式 4. 形式(ツール) BackstopJS 必要な 画像形式の 検知結果の ハードスキル 取得機能 外部公開機能 JavaScript TypeScript 内包 採用理由 ハードルが 内包 低い サーバーを 立てれる reg-suit AW S S 3 GitHub 別ツール S3 bucket アップロード https://github.com/garris/BackstopJS https://github.com/reg-viz/reg-suit 19

• https://github.com/garris/BackstopJS
• https://github.com/reg-viz/reg-suit

4. 画像変化検知をどのような”手段”で実現するのか？を決める 比較変数 3. 対象形式 4. 形式(ツール) 必要な 画像形式の 検知結果の ハードスキル 取得機能 外部公開機能 採用理由 reg-suitと 画像形式 BackstopJS JavaScript TypeScript 内包 内包 サーバーを 立てれる reg-suit AWS S3 GitHub 別ツール 比較すると ハードルが 低い S3 bucket アップロード 20

5. 手段を動かすには”環境”はどうするか？を決める 1. きっかけ 2. 検知対象 3. 対象形式 4. 手段(ツール) 5. 環境 6. トリガー 視覚変化 画像形式 BackstopJS Windows タイマー 連携する サービスの 設定画面の 項目変化を 検知 動作変化 ソースコード 形式 reg-suit Linux 前プロセス 終了 21

5. 手段を動かすには”環境”はどうするか？を決める 4. 手段(ツール) BackstopJS 5. 環境 Windows 採用理由 採用理由 普段から使用している 普段から使用している ハードルが低い ハードルが低い Linux 22

5. 手段を動かすには”環境”はどうするか？を決める 4. 手段(ツール) BackstopJS 5. 環境 Windows 採用理由 採用理由 普段から使用していて 普段から使用している ハードルが低い ハードルが低い Linux 23

6. 環境で手段を動かす”トリガー”を決める 1. きっかけ 2. 検知対象 3. 対象形式 4. 手段(ツール) 5. 環境 6. トリガー 視覚変化 画像形式 BackstopJS Windows タイマー 連携する サービスの 設定画面の 項目変化を 検知 動作変化 ソースコード 形式 reg-suit Linux 前プロセス 終了 24

6. 環境で手段を動かす”トリガー”を決める 5. 環境 6. トリガー 採用理由 採用理由 前プロセス終了は検知が難しい Windows タイマー タイマーはタスクスケジューラ で実現できハードルが低い 前プロセス 終了 25

6. 環境で手段を動かす”トリガー”を決める 5. 環境 6. トリガー 採用理由 前プロセス終了は検知が難しい Windows タイマー タイマーはタスクスケジューラ で実現できてハードルが低い 採用理由 外部サービスなので 前プロセス終了の検知が難しい タイマーはタスクスケジューラ で実現できるので ハードルが低い 前プロセス 終了 26

VRTの導入の手段が決定した 1. きっかけ 2. 検知対象 3. 対象形式 4. 手段(ツール) 5. 環境 6. トリガー 視覚変化 画像形式 BackstopJS Windows タイマー 連携する サービスの 設定画面の 項目変化を 検知 動作変化 ソースコード 形式 reg-suit Linux 前プロセス 終了 27

VRT運用のお話し VRTの運用事例 28

ある外部サービスの設定画面の画像を取得した 前提 BackstopJSの機能 課題 ❶ clickSelector ❷ ❸ ラジオボタンをクリックして画像取得 https://www.dropbox.com/ 29

• https://www.dropbox.com/

項目にアニメーションが発生して誤判定された 前提 BackstopJSの機能 ❶ 課題 ❶ clickSelector アニメーションする ❷ ❷ ❸ ラジオボタンをクリックして画像取得 色に濃淡が発生して差分があると誤判定 30

誤判定には許容範囲を設定することで対応した 誤判定への対策 BackstopJSの機能 課題 misMatchThreshold 誤差の許容範囲を設定 誤差の許容範囲を設定 31

許容範囲のしきい値の調整が難しかった 誤判定への対策 BackstopJSの機能 課題 misMatchThreshold 誤差の許容範囲を設定 誤差の許容範囲を設定 しきい値調整が難しい 大きくすると検知すべきことがされない 32

誤判定する項目は検知対象外なので対象外とした しきい値調整への対策 BackstopJSの機能 効果 hideSelectors 検知対象外にした 誤検知する項目は検知対象ではない 検知すべき対象を表示させる経由項目 33

検知対象外にすることで誤判定がなくなった しきい値調整への対策 BackstopJSの機能 効果 hideSelectors 検知対象外にした 誤検知する項目は検知対象ではない 誤検知することがなくなった 検知すべき対象を表示させる経由項目 34

業務の経験からわかったこと 業務の経験からわかったこと 35

導入のハードルが低いことを採用した 採用したこと 採用した理由 わたしの目的 楽だとどうなる？ ハードルが低い 楽したい 導入が早くなる BackstopJS Windows タイマー 36

導入のハードルが低いと導入も早くなる 採用したこと 採用した理由 わたしの目的 楽だとどうなる？ ハードルが低い 楽したい 導入期間が短い BackstopJS Windows タイマー 37

導入が早くなると運用期間が長くなる 導入期間 導入期間が短い 導入期間が長い ↓ ↓ 運用期間が長い 運用期間の短い 運用期間 導入期間 運用期間 38

運用期間が長いと検知できる変化が多くなる 導入期間が早い 導入期間が遅い ↓ ↓ 運用期間が長い 運用期間の短い 導入期間 変化 運用期間 変化 導入期間 変化 変化 運用期間 変化 変化 検知できる 検知できる 期間 期間 39

運用期間が長いと検知できる変化が多くなる 導入期間が早い 導入期間が遅い ↓ ↓ 運用期間が長い 運用期間の短い 導入期間 運用期間 導入期間 運用期間 V RT を 導 入 す る 目 的 変化 変化 変化 ↓ 変化 変化 変化 価値提供ができる 検知できる 検知できる 期間 期間 40

ハードルが高くなる原因は一般的なやり方に捉われる 導入が遅くなる原因は？ 例えば？ なぜ？ 5. 環境 ハードルが高い 一般的なやり方に 捉われる Linux CI 6. トリガー 前プロセス 終了 41

CIの一般的なやり方の例 導入が遅くなる原因は？ 例えば？ なぜ？ 5. 環境 ハードルが高い 一般的なやり方に 捉われる Linux CI 6. トリガー 前プロセス 終了 42

ハードルが低くなる要因は一般的なやり方に捉われない 導入が早くなる要因は？ ハードルが低い 例えば？ なぜ？ 一般的なやり方に 捉われない 5. 環境 Windows 6. トリガー タイマー CI 43

目的を早く達成できて価値が提供できる 導入が早くなる要因は？ 例えば？ なぜ？ 5. 環境 Windows 6. トリガー タイマー 早く導入できる ハードルが低い 一般的なやり方に 捉われない ↓ CI 目的を早く達成できる ↓ 価値が早く提供できる 44

早く価値を提供する（デリバリー）のはPEの役割 価値が早く提供できる ↓ デリバリーを早くする ↓ “継続的デリバリー” は ”PE（SET）”の役割 Continuous Delivery（CD） 45

以上です STAC2022 りふ 2022.12.03