O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

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

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio

Confira estes a seguir

1 de 46 Anúncio

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

Baixar para ler offline

ソフトウェアテスト自動化カンファレンス2022 | 2022.12.03

STAC2022

https://testautomationresearch.connpass.com/event/262132/

ある課題解決に対して、なぜ、VRTという画像差分検知を手段として選んだのか?
またなぜ、手段を実現するために、他のツールと比較してbackstopJSを選んだのか?
そして、運用したときに困ったことをお話しします。
※ツールの機能はお話ししません。

ソフトウェアテスト自動化カンファレンス2022 | 2022.12.03

STAC2022

https://testautomationresearch.connpass.com/event/262132/

ある課題解決に対して、なぜ、VRTという画像差分検知を手段として選んだのか?
またなぜ、手段を実現するために、他のツールと比較してbackstopJSを選んだのか?
そして、運用したときに困ったことをお話しします。
※ツールの機能はお話ししません。

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Mais recentes (20)

Anúncio

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

  1. 1. STAC2022 りふ 2022.12.03 CIが分からない PE(SETエンジニア)1年生が VRT(ビジュアルリグレッションテスト)を ハードル低くCIを運用した
  2. 2. 自己紹介 2 n 会社 ・ウイングアーク1st n 経験 ・PE:1年目(1年生) ・QA:5年目 n 社外活動 ・JaSST Niigata 21年度:実行委員と登壇:QAとしての事例発表 22年度:実行委員長:テーマは可観測性・Observability @reflex4qa りふ
  3. 3. ご注意 3 n お話しすること ・導入事例 ・運用事例 ・どんなツールを使用したか?まで n お話ししないこと ・ツールの実装方法のこと
  4. 4. 今回のお伝えしたいこと 4 一般的なやり方に捉われずに、自分のできることで、 ハードル低くやること VRTの導入事例 VRTの運用事例
  5. 5. VRT導入のお話し 5 VRTの導入事例
  6. 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. 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. 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. 9. 1. VRTを導入するきっかけを知る 9 前 提 担 当 プ ロ ダ ク ト は 外 部 サ ー ビ ス 連 携 連 携 さ せ る に は ? 注 意 す る こ と は ? 注 意 し な い と ? 外 部 サ ー ビ ス の 設 定 画 面 に 自 プ ロ ダ ク ト の 設 定 外 部 サ ー ビ ス の 設 定 画 面 の 変 化 設 定 に ず れ が 生 じ て 自 プ ロ ダ ク ト が 停 止 連 携 の 設 定 方 法 を サ ー ビ ス サ イ ト に 画 像 付 き で 掲 載 サ ー ビ ス サ イ ト に 反 映 さ れ ず に ユ ー ザ ー か ら 問 い 合 わ せ
  10. 10. 1. VRTを導入するきっかけを知る 10 前 提 担 当 プ ロ ダ ク ト は 外 部 サ ー ビ ス 連 携 連 携 さ せ る に は ? 注 意 す る こ と は ? 注 意 し な い と ? 外 部 サ ー ビ ス の 設 定 画 面 に 自 プ ロ ダ ク ト の 設 定 外 部 サ ー ビ ス の 設 定 画 面 の 変 化 設 定 に ず れ が 生 じ て 自 プ ロ ダ ク ト が 停 止 連 携 の 設 定 方 法 を サ ー ビ ス サ イ ト に 画 像 付 き で 掲 載 サ ー ビ ス サ イ ト に 反 映 さ れ ず に ユ ー ザ ー か ら 問 い 合 わ せ こ こ を 検 知 し た い !
  11. 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. 12. 2. どのような”変化”を検知したいか?を決める 12 1 . き っ か け 2 . 検 知 対 象 目 的 採 用 理 由 連 携 す る 外 部 サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 ブ ラ ウ ザ に 表 示 さ れ る コ ン ト ロ ー ル の 変 化 ブ ラ ウ ザ に 表 示 さ れ た コ ン ト ロ ー ル を 操 作 し て の 変 化 コ ン ト ロ ー ル を 操 作 し て 外 部 サ ー ビ ス の 動 作 の 変 化 ま で は 知 る 必 要 が 無 い 外 部 サ ー ビ ス の 設 定 の 変 化 に よ っ て 自 プ ロ ダ ク ト に 影 響 が あ る か 知 り た い
  13. 13. 2. どのような”変化”を検知したいか?を決める 13 1 . き っ か け 2 . 検 知 対 象 目 的 採 用 理 由 連 携 す る 外 部 サ ー ビ ス の 設 定 画 面 の 項 目 変 化 を 検 知 視 覚 変 化 動 作 変 化 ブ ラ ウ ザ に 表 示 さ れ る コ ン ト ロ ー ル の 変 化 ブ ラ ウ ザ に 表 示 さ れ た コ ン ト ロ ー ル を 操 作 し て の 変 化 コ ン ト ロ ー ル を 操 作 し て 外 部 サ ー ビ ス の 動 作 の 変 化 ま で は 知 る 必 要 が 無 い 外 部 サ ー ビ ス の 設 定 の 変 化 に よ っ て 自 プ ロ ダ ク ト に 影 響 が あ る か 知 り た い
  14. 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. 15. 3. 視覚変化をどのような”形式”で検知するのか?を決める 15 2 . 検 知 対 象 3 . 対 象 形 式 目 的 採 用 理 由 視 覚 変 化 画 像 形 式 ソ ー ス コ ー ド 形 式 ブ ラ ウ ザ に 表 示 さ れ た 画 面 を 画 像 で 取 得 し て 差 分 を 検 知 す る ブ ラ ウ ザ に 画 面 を 表 示 さ せ る た め の ソ ー ス コ ー ド で 取 得 し て 差 分 を 検 知 す る ソ ー ス コ ー ド だ と 、 外 部 サ ー ビ ス の コ ン ト ロ ー ル 影 響 し な い 変 化 も 、 検 知 す る
  16. 16. 3. 視覚変化をどのような”形式”で検知するのか?を決める 16 2 . 検 知 対 象 3 . 対 象 形 式 目 的 採 用 理 由 視 覚 変 化 画 像 形 式 ソ ー ス コ ー ド 形 式 ソ ー ス コ ー ド の 場 合 外 部 サ ー ビ ス の 画 面 に 影 響 し な い 変 化 も 検 知 す る た と え ば 、 内 部 的 な I D ブ ラ ウ ザ に 表 示 さ れ た 画 面 を 画 像 で 取 得 し て 差 分 を 検 知 す る ブ ラ ウ ザ に 画 面 を 表 示 さ せ る た め の ソ ー ス コ ー ド で 取 得 し て 差 分 を 検 知 す る
  17. 17. 3. 視覚変化をどのような”形式”で検知するのか?を決める 17 2 . 検 知 対 象 3 . 対 象 形 式 目 的 採 用 理 由 視 覚 変 化 画 像 形 式 ソ ー ス コ ー ド 形 式 ソ ー ス コ ー ド の 場 合 外 部 サ ー ビ ス の 画 面 に 影 響 し な い 変 化 も 検 知 す る た と え ば 、 内 部 的 な I D ブ ラ ウ ザ に 表 示 さ れ た 画 面 を 画 像 で 取 得 し て 差 分 を 検 知 す る ブ ラ ウ ザ に 画 面 を 表 示 さ せ る た め の ソ ー ス コ ー ド で 取 得 し て 差 分 を 検 知 す る VRT:ビジュアルリグレッションテスト
  18. 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. 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. 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. 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. 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. 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. 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. 25. 6. 環境で手段を動かす”トリガー”を決める 25 5 . 環 境 6 . ト リ ガ ー 採 用 理 由 採 用 理 由 W i n d o ws タ イ マ ー 前 プ ロ セ ス 終 了 前 プ ロ セ ス 終 了 は 検 知 が 難 し い タ イ マ ー は タ ス ク ス ケ ジ ュ ー ラ で 実 現 で き ハ ー ド ル が 低 い
  26. 26. 6. 環境で手段を動かす”トリガー”を決める 26 5 . 環 境 6 . ト リ ガ ー 採 用 理 由 採 用 理 由 W i n d o w s タ イ マ ー 前 プ ロ セ ス 終 了 前 プ ロ セ ス 終 了 は 検 知 が 難 し い タ イ マ ー は タ ス ク ス ケ ジ ュ ー ラ で 実 現 で き て ハ ー ド ル が 低 い 外 部 サ ー ビ ス な の で 前 プ ロ セ ス 終 了 の 検 知 が 難 し い タ イ マ ー は タ ス ク ス ケ ジ ュ ー ラ で 実 現 で き る の で ハ ー ド ル が 低 い
  27. 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 . ト リ ガ ー タ イ マ ー 前 プ ロ セ ス 終 了
  28. 28. VRT運用のお話し 28 VRTの運用事例
  29. 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. 項目にアニメーションが発生して誤判定された 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. 誤判定には許容範囲を設定することで対応した 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. 許容範囲のしきい値の調整が難しかった 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. 誤判定する項目は検知対象外なので対象外とした 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. 検知対象外にすることで誤判定がなくなった 34 し き い 値 調 整 へ の 対 策 B a c k s t o p J S の 機 能 効 果 h i d e S e l e c t o r s 検 知 対 象 外 に し た 誤 検 知 す る 項 目 は 検 知 対 象 で は な い 検 知 す べ き 対 象 を 表 示 さ せ る 経 由 項 目 誤 検 知 す る こ と が な く な っ た
  35. 35. 業務の経験からわかったこと 35 業務の経験からわかったこと
  36. 36. 導入のハードルが低いことを採用した 36 B a c kst o p J S W i n d o w s タ イ マ ー 採 用 し た こ と ハ ー ド ル が 低 い 採 用 し た 理 由 わ た し の 目 的 楽 し た い 楽 だ と ど う な る ? 導 入 が 早 く な る
  37. 37. 導入のハードルが低いと導入も早くなる 37 B a c k s t o p J S W i n d o w s タ イ マ ー 採 用 し た こ と ハ ー ド ル が 低 い 採 用 し た 理 由 わ た し の 目 的 楽 し た い 楽 だ と ど う な る ? 導 入 期 間 が 短 い
  38. 38. 導入が早くなると運用期間が長くなる 38 導 入 期 間 が 短 い ↓ 運 用 期 間 が 長 い 導 入 期 間 が 長 い ↓ 運 用 期 間 の 短 い 導 入 期 間 運 用 期 間 導 入 期 間 運 用 期 間
  39. 39. 検 知 で き る 期 間 検 知 で き る 期 間 運用期間が長いと検知できる変化が多くなる 39 導 入 期 間 が 早 い ↓ 運 用 期 間 が 長 い 導 入 期 間 が 遅 い ↓ 運 用 期 間 の 短 い 導 入 期 間 運 用 期 間 変化 導 入 期 間 運 用 期 間 変化 変化 変化 変化 変化
  40. 40. 検 知 で き る 期 間 検 知 で き る 期 間 運用期間が長いと検知できる変化が多くなる 40 導 入 期 間 が 早 い ↓ 運 用 期 間 が 長 い 導 入 期 間 が 遅 い ↓ 運 用 期 間 の 短 い 導 入 期 間 運 用 期 間 変化 導 入 期 間 運 用 期 間 変化 変化 変化 変化 変化 VRTを導入する目的 ↓ 価値提供ができる
  41. 41. ハードルが高くなる原因は一般的なやり方に捉われる 41 ハ ー ド ル が 高 い 導 入 が 遅 く な る 原 因 は ? 一 般 的 な や り 方 に 捉 わ れ る な ぜ ? 例 え ば ? 5 . 環 境 C I L i n u x 6 . ト リ ガ ー 前 プ ロ セ ス 終 了
  42. 42. CIの一般的なやり方の例 42 ハ ー ド ル が 高 い 導 入 が 遅 く な る 原 因 は ? 一 般 的 な や り 方 に 捉 わ れ る な ぜ ? 例 え ば ? 5 . 環 境 C I L i n u x 6 . ト リ ガ ー 前 プ ロ セ ス 終 了
  43. 43. ハードルが低くなる要因は一般的なやり方に捉われない 43 ハ ー ド ル が 低 い 導 入 が 早 く な る 要 因 は ? 一 般 的 な や り 方 に 捉 わ れ な い な ぜ ? 例 え ば ? 5 . 環 境 C I W i n d o ws 6 . ト リ ガ ー タ イ マ ー
  44. 44. 目的を早く達成できて価値が提供できる 44 ハ ー ド ル が 低 い 導 入 が 早 く な る 要 因 は ? 一 般 的 な や り 方 に 捉 わ れ な い な ぜ ? 例 え ば ? 5 . 環 境 C I W i n d o w s 6 . ト リ ガ ー タ イ マ ー 早く導入できる ↓ 目的を早く達成できる ↓ 価値が早く提供できる
  45. 45. 価値が早く提供できる ↓ デリバリーを早くする ↓ “継続的デリバリー” は ”PE(SET)”の役割 早く価値を提供する(デリバリー)のはPEの役割 45 Continuous Delivery(CD)
  46. 46. STAC2022 りふ 2022.12.03 以上です

×