CIが分からない PE（SETエンジニア）１年生が VRT（ビジュアルリグレッションテスト）をハードル低くCIを運用した
•
0 likes•1,832 views
ソフトウェアテスト自動化カンファレンス2022 | 2022.12.03 STAC2022 https://testautomationresearch.connpass.com/event/262132/ ある課題解決に対して、なぜ、VRTという画像差分検知を手段として選んだのか？ またなぜ、手段を実現するために、他のツールと比較してbackstopJSを選んだのか？ そして、運用したときに困ったことをお話しします。 ※ツールの機能はお話ししません。
Recommended
More Related Content
What's hot
What's hot (20)
Similar to CIが分からない PE（SETエンジニア）１年生が VRT（ビジュアルリグレッションテスト）をハードル低くCIを運用した
Similar to CIが分からない PE（SETエンジニア）１年生が VRT（ビジュアルリグレッションテスト）をハードル低くCIを運用した (20)
CIが分からない PE（SETエンジニア）１年生が VRT（ビジュアルリグレッションテスト）をハードル低くCIを運用した
- 2. 自己紹介 2 n 会社 ・ウイングアーク１st n 経験 ・PE：1年目（1年生） ・QA：5年目 n 社外活動 ・JaSST Niigata 21年度：実行委員と登壇：QAとしての事例発表 22年度：実行委員長：テーマは可観測性・Observability @reflex4qa りふ
- 6. VRT導入のお話の流れ 6 1 . き っ か け 2 . 検 知 対 象 連 携 す る サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 3 . 対 象 形 式 画 像 形 式 ソ ー ス コ ー ド 形 式 4 . 手 段 ( ツ ー ル ) B a c k s t o p J S re g - s u i t 5 . 環 境 W i n d o w s L i n u x 6 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了
- 7. VRT導入のお話の流れ 7 1 . き っ か け 2 . 検 知 対 象 連 携 す る サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 3 . 対 象 形 式 画 像 形 式 ソ ー ス コ ー ド 形 式 4 . 手 段 ( ツ ー ル ) B a c k s t o p J S r e g - s u i t 5 . 環 境 W i n d o w s L i n u x 6 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了 選 択 肢 が 2 つ あ り 、 ど の よ う な 理 由 で 1 つ に 絞 っ て い っ た の か ？
- 8. 1. VRTを導入するきっかけを知る 8 1 . き っ か け 2 . 検 知 対 象 連 携 す る サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 3 . 対 象 形 式 画 像 形 式 ソ ー ス コ ー ド 形 式 4 . ツ ー ル B a c kst o p J S r e g - s u i t 5 . 環 境 W i n d o w s L i n u x 6 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了
- 9. 1. VRTを導入するきっかけを知る 9 前 提 担 当 プ ロ ダ ク ト は 外 部 サ ー ビ ス 連 携 連 携 さ せ る に は ？ 注 意 す る こ と は ？ 注 意 し な い と ？ 外 部 サ ー ビ ス の 設 定 画 面 に 自 プ ロ ダ ク ト の 設 定 外 部 サ ー ビ ス の 設 定 画 面 の 変 化 設 定 に ず れ が 生 じ て 自 プ ロ ダ ク ト が 停 止 連 携 の 設 定 方 法 を サ ー ビ ス サ イ ト に 画 像 付 き で 掲 載 サ ー ビ ス サ イ ト に 反 映 さ れ ず に ユ ー ザ ー か ら 問 い 合 わ せ
- 10. 1. VRTを導入するきっかけを知る 10 前 提 担 当 プ ロ ダ ク ト は 外 部 サ ー ビ ス 連 携 連 携 さ せ る に は ？ 注 意 す る こ と は ？ 注 意 し な い と ？ 外 部 サ ー ビ ス の 設 定 画 面 に 自 プ ロ ダ ク ト の 設 定 外 部 サ ー ビ ス の 設 定 画 面 の 変 化 設 定 に ず れ が 生 じ て 自 プ ロ ダ ク ト が 停 止 連 携 の 設 定 方 法 を サ ー ビ ス サ イ ト に 画 像 付 き で 掲 載 サ ー ビ ス サ イ ト に 反 映 さ れ ず に ユ ー ザ ー か ら 問 い 合 わ せ こ こ を 検 知 し た い ！
- 11. 2. どのような”変化”を検知したいか？を決める 11 1 . き っ か け 2 . 検 知 対 象 連 携 す る 外 部 サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 3 . 対 象 形 式 画 像 形 式 ソ ー ス コ ー ド 形 式 4 . ツ ー ル B a c k s t o p J S r e g - s u i t 5 . 環 境 W i n d o w s L i n u x 6 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了
- 12. 2. どのような”変化”を検知したいか？を決める 12 1 . き っ か け 2 . 検 知 対 象 目 的 採 用 理 由 連 携 す る 外 部 サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 ブ ラ ウ ザ に 表 示 さ れ る コ ン ト ロ ー ル の 変 化 ブ ラ ウ ザ に 表 示 さ れ た コ ン ト ロ ー ル を 操 作 し て の 変 化 コ ン ト ロ ー ル を 操 作 し て 外 部 サ ー ビ ス の 動 作 の 変 化 ま で は 知 る 必 要 が 無 い 外 部 サ ー ビ ス の 設 定 の 変 化 に よ っ て 自 プ ロ ダ ク ト に 影 響 が あ る か 知 り た い
- 13. 2. どのような”変化”を検知したいか？を決める 13 1 . き っ か け 2 . 検 知 対 象 目 的 採 用 理 由 連 携 す る 外 部 サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 ブ ラ ウ ザ に 表 示 さ れ る コ ン ト ロ ー ル の 変 化 ブ ラ ウ ザ に 表 示 さ れ た コ ン ト ロ ー ル を 操 作 し て の 変 化 コ ン ト ロ ー ル を 操 作 し て 外 部 サ ー ビ ス の 動 作 の 変 化 ま で は 知 る 必 要 が 無 い 外 部 サ ー ビ ス の 設 定 の 変 化 に よ っ て 自 プ ロ ダ ク ト に 影 響 が あ る か 知 り た い
- 14. 3. 視覚変化をどのような”形式”で検知するのか？を決める 14 1 . き っ か け 2 . 検 知 対 象 連 携 す る サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 3 . 対 象 形 式 画 像 形 式 ソ ー ス コ ー ド 形 式 4 . 手 段 ( ツ ー ル ) B a c k s t o p J S re g - s u i t 5 . 環 境 W i n d o ws L i n u x 6 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了
- 15. 3. 視覚変化をどのような”形式”で検知するのか？を決める 15 2 . 検 知 対 象 3 . 対 象 形 式 目 的 採 用 理 由 視 覚 変 化 画 像 形 式 ソ ー ス コ ー ド 形 式 ブ ラ ウ ザ に 表 示 さ れ た 画 面 を 画 像 で 取 得 し て 差 分 を 検 知 す る ブ ラ ウ ザ に 画 面 を 表 示 さ せ る た め の ソ ー ス コ ー ド で 取 得 し て 差 分 を 検 知 す る ソ ー ス コ ー ド だ と 、 外 部 サ ー ビ ス の コ ン ト ロ ー ル 影 響 し な い 変 化 も 、 検 知 す る
- 16. 3. 視覚変化をどのような”形式”で検知するのか？を決める 16 2 . 検 知 対 象 3 . 対 象 形 式 目 的 採 用 理 由 視 覚 変 化 画 像 形 式 ソ ー ス コ ー ド 形 式 ソ ー ス コ ー ド の 場 合 外 部 サ ー ビ ス の 画 面 に 影 響 し な い 変 化 も 検 知 す る た と え ば 、 内 部 的 な I D ブ ラ ウ ザ に 表 示 さ れ た 画 面 を 画 像 で 取 得 し て 差 分 を 検 知 す る ブ ラ ウ ザ に 画 面 を 表 示 さ せ る た め の ソ ー ス コ ー ド で 取 得 し て 差 分 を 検 知 す る
- 17. 3. 視覚変化をどのような”形式”で検知するのか？を決める 17 2 . 検 知 対 象 3 . 対 象 形 式 目 的 採 用 理 由 視 覚 変 化 画 像 形 式 ソ ー ス コ ー ド 形 式 ソ ー ス コ ー ド の 場 合 外 部 サ ー ビ ス の 画 面 に 影 響 し な い 変 化 も 検 知 す る た と え ば 、 内 部 的 な I D ブ ラ ウ ザ に 表 示 さ れ た 画 面 を 画 像 で 取 得 し て 差 分 を 検 知 す る ブ ラ ウ ザ に 画 面 を 表 示 さ せ る た め の ソ ー ス コ ー ド で 取 得 し て 差 分 を 検 知 す る VRT：ビジュアルリグレッションテスト
- 18. 4. 画像変化検知をどのような”手段”で実現するのか？を決める 18 1 . き っ か け 2 . 検 知 対 象 連 携 す る サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 3 . 対 象 形 式 画 像 形 式 ソ ー ス コ ー ド 形 式 4 . 手 段 ( ツ ー ル ) B a c k s t o p J S re g - s u i t 5 . 環 境 W i n d o ws 動 作 変 化 6 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了
- 19. 4. 画像変化検知をどのような”手段”で実現するのか？を決める 19 3 . 対 象 形 式 4 . 形 式 ( ツ ー ル ) 必 要 な ハ ー ド ス キ ル 画 像 形 式 B a c k s t o p J S re g - s u i t J a v a S c r i p t T y p e S c r i p t 画 像 形 式 の 取 得 機 能 検 知 結 果 の 外 部 公 開 機 能 AWS S 3 G i t H u b 内 包 別 ツ ー ル S 3 b u c k e t ア ッ プ ロ ー ド 採 用 理 由 ハ ー ド ル が 低 い 比 較 変 数 内 包 サ ー バ ー を 立 て れ る https://github.com/garris/BackstopJS https://github.com/reg-viz/reg-suit
- 20. 4. 画像変化検知をどのような”手段”で実現するのか？を決める 20 3 . 対 象 形 式 4 . 形 式 ( ツ ー ル ) 必 要 な ハ ー ド ス キ ル 画 像 形 式 B a c kst o p J S r e g - s u i t J a v a S c r i p t T y p e S c r i p t 画 像 形 式 の 取 得 機 能 検 知 結 果 の 外 部 公 開 機 能 A W S S 3 G i t H u b 内 包 別 ツ ー ル 内 包 S 3 b u c k e t ア ッ プ ロ ー ド 採 用 理 由 r e g - s u i t と 比 較 す る と ハ ー ド ル が 低 い サ ー バ ー を 立 て れ る 比 較 変 数
- 21. 5. 手段を動かすには”環境”はどうするか？を決める 21 1 . き っ か け 2 . 検 知 対 象 連 携 す る サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 3 . 対 象 形 式 画 像 形 式 ソ ー ス コ ー ド 形 式 4 . 手 段 ( ツ ー ル ) B a c k s t o p J S r e g - s u i t 5 . 環 境 W i n d o ws L i n u x 6 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了
- 22. 5. 手段を動かすには”環境”はどうするか？を決める 22 4 . 手 段 ( ツ ー ル ) 5 . 環 境 採 用 理 由 採 用 理 由 B a c k s t o p J S W i n d o ws L i n u x 普 段 か ら 使 用 し て い る ハ ー ド ル が 低 い 普 段 か ら 使 用 し て い る ハ ー ド ル が 低 い
- 23. 5. 手段を動かすには”環境”はどうするか？を決める 23 4 . 手 段 ( ツ ー ル ) 5 . 環 境 採 用 理 由 B a c k s t o p J S W i n d o w s L i n u x 普 段 か ら 使 用 し て い る ハ ー ド ル が 低 い 採 用 理 由 普 段 か ら 使 用 し て い て ハ ー ド ル が 低 い
- 24. 6. 環境で手段を動かす”トリガー”を決める 24 1 . き っ か け 2 . 検 知 対 象 連 携 す る サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 3 . 対 象 形 式 画 像 形 式 ソ ー ス コ ー ド 形 式 4 . 手 段 ( ツ ー ル ) B a c k s t o p J S r e g - s u i t 5 . 環 境 W i n d o w s L i n u x 6 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了
- 25. 6. 環境で手段を動かす”トリガー”を決める 25 5 . 環 境 6 . ト リ ガ ー 採 用 理 由 採 用 理 由 W i n d o ws タ イ マ ー 前 プ ロ セ ス 終 了 前 プ ロ セ ス 終 了 は 検 知 が 難 し い タ イ マ ー は タ ス ク ス ケ ジ ュ ー ラ で 実 現 で き ハ ー ド ル が 低 い
- 26. 6. 環境で手段を動かす”トリガー”を決める 26 5 . 環 境 6 . ト リ ガ ー 採 用 理 由 採 用 理 由 W i n d o w s タ イ マ ー 前 プ ロ セ ス 終 了 前 プ ロ セ ス 終 了 は 検 知 が 難 し い タ イ マ ー は タ ス ク ス ケ ジ ュ ー ラ で 実 現 で き て ハ ー ド ル が 低 い 外 部 サ ー ビ ス な の で 前 プ ロ セ ス 終 了 の 検 知 が 難 し い タ イ マ ー は タ ス ク ス ケ ジ ュ ー ラ で 実 現 で き る の で ハ ー ド ル が 低 い
- 27. VRTの導入の手段が決定した 27 1 . き っ か け 2 . 検 知 対 象 連 携 す る サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 3 . 対 象 形 式 画 像 形 式 ソ ー ス コ ー ド 形 式 4 . 手 段 ( ツ ー ル ) B a c k s t o p J S r e g - s u i t 5 . 環 境 W i n d o w s L i n u x 6 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了
- 29. ある外部サービスの設定画面の画像を取得した 29 前 提 B a c kst o p J S の 機 能 課 題 c l i c k S e l e c t o r ❶ ❷ ❸ ラ ジ オ ボ タ ン を ク リ ッ ク し て 画 像 取 得 https://www.dropbox.com/
- 30. 項目にアニメーションが発生して誤判定された 30 前 提 B a c k s t o p J S の 機 能 課 題 c l i c k S e l e c t o r ア ニ メ ー シ ョ ン す る ラ ジ オ ボ タ ン を ク リ ッ ク し て 画 像 取 得 色 に 濃 淡 が 発 生 し て 差 分 が あ る と 誤 判 定 ❶ ❷ ❸ ❶ ❷
- 31. 誤判定には許容範囲を設定することで対応した 31 誤 判 定 へ の 対 策 B a c k s t o p J S の 機 能 課 題 m i s M a t c h T h r e s h o l d 誤 差 の 許 容 範 囲 を 設 定 誤 差 の 許 容 範 囲 を 設 定
- 32. 許容範囲のしきい値の調整が難しかった 32 誤 判 定 へ の 対 策 B a c k s t o p J S の 機 能 課 題 m i s M a t c h T h r e s h o l d 誤 差 の 許 容 範 囲 を 設 定 誤 差 の 許 容 範 囲 を 設 定 大 き く す る と 検 知 す べ き こ と が さ れ な い し き い 値 調 整 が 難 し い
- 33. 誤判定する項目は検知対象外なので対象外とした 33 し き い 値 調 整 へ の 対 策 B a c k s t o p J S の 機 能 効 果 h i d e S e l e c t o r s 検 知 対 象 外 に し た 誤 検 知 す る 項 目 は 検 知 対 象 で は な い 検 知 す べ き 対 象 を 表 示 さ せ る 経 由 項 目
- 34. 検知対象外にすることで誤判定がなくなった 34 し き い 値 調 整 へ の 対 策 B a c k s t o p J S の 機 能 効 果 h i d e S e l e c t o r s 検 知 対 象 外 に し た 誤 検 知 す る 項 目 は 検 知 対 象 で は な い 検 知 す べ き 対 象 を 表 示 さ せ る 経 由 項 目 誤 検 知 す る こ と が な く な っ た
- 36. 導入のハードルが低いことを採用した 36 B a c kst o p J S W i n d o w s タ イ マ ー 採 用 し た こ と ハ ー ド ル が 低 い 採 用 し た 理 由 わ た し の 目 的 楽 し た い 楽 だ と ど う な る ？ 導 入 が 早 く な る
- 37. 導入のハードルが低いと導入も早くなる 37 B a c k s t o p J S W i n d o w s タ イ マ ー 採 用 し た こ と ハ ー ド ル が 低 い 採 用 し た 理 由 わ た し の 目 的 楽 し た い 楽 だ と ど う な る ？ 導 入 期 間 が 短 い
- 38. 導入が早くなると運用期間が長くなる 38 導 入 期 間 が 短 い ↓ 運 用 期 間 が 長 い 導 入 期 間 が 長 い ↓ 運 用 期 間 の 短 い 導 入 期 間 運 用 期 間 導 入 期 間 運 用 期 間
- 39. 検 知 で き る 期 間 検 知 で き る 期 間 運用期間が長いと検知できる変化が多くなる 39 導 入 期 間 が 早 い ↓ 運 用 期 間 が 長 い 導 入 期 間 が 遅 い ↓ 運 用 期 間 の 短 い 導 入 期 間 運 用 期 間 変化 導 入 期 間 運 用 期 間 変化 変化 変化 変化 変化
- 40. 検 知 で き る 期 間 検 知 で き る 期 間 運用期間が長いと検知できる変化が多くなる 40 導 入 期 間 が 早 い ↓ 運 用 期 間 が 長 い 導 入 期 間 が 遅 い ↓ 運 用 期 間 の 短 い 導 入 期 間 運 用 期 間 変化 導 入 期 間 運 用 期 間 変化 変化 変化 変化 変化 VRTを導入する目的 ↓ 価値提供ができる
- 41. ハードルが高くなる原因は一般的なやり方に捉われる 41 ハ ー ド ル が 高 い 導 入 が 遅 く な る 原 因 は ？ 一 般 的 な や り 方 に 捉 わ れ る な ぜ ？ 例 え ば ？ 5 . 環 境 C I L i n u x 6 . ト リ ガ ー 前 プ ロ セ ス 終 了
- 42. CIの一般的なやり方の例 42 ハ ー ド ル が 高 い 導 入 が 遅 く な る 原 因 は ？ 一 般 的 な や り 方 に 捉 わ れ る な ぜ ？ 例 え ば ？ 5 . 環 境 C I L i n u x 6 . ト リ ガ ー 前 プ ロ セ ス 終 了
- 43. ハードルが低くなる要因は一般的なやり方に捉われない 43 ハ ー ド ル が 低 い 導 入 が 早 く な る 要 因 は ？ 一 般 的 な や り 方 に 捉 わ れ な い な ぜ ？ 例 え ば ？ 5 . 環 境 C I W i n d o ws 6 . ト リ ガ ー タ イ マ ー
- 44. 目的を早く達成できて価値が提供できる 44 ハ ー ド ル が 低 い 導 入 が 早 く な る 要 因 は ？ 一 般 的 な や り 方 に 捉 わ れ な い な ぜ ？ 例 え ば ？ 5 . 環 境 C I W i n d o w s 6 . ト リ ガ ー タ イ マ ー 早く導入できる ↓ 目的を早く達成できる ↓ 価値が早く提供できる