2025_10_22_交流座談会

Transcript

1. Playwright × 生成AI でVRTのバグ報告を 自然言語化してみたら実用的だった話 QAエンジニア 株式会社IVRy Ryoma Seki 2025/10/22
2. 2017年~ 建設業の建具工として独立 同年にパーソナルトレーナーとしても独立し、二足のわらじで活動 2021年~ キャリアチェンジをし、学習塾事業の事業責任者を務める 2022年1月~ - IVRyに入社し、QAエンジニアとしてのキャリアをスタート - 現在はアイブリーのプロダクト全般の QAを担当 趣味 - 筋トレやフットサルなど 2 Event Name 2025 2025/06/01 株式会社IVRy QAエンジニア 関 凌麻 (@IvryQa)
3. 3 アイブリーとは 最短5分で登録可能。月2,980円から電話業務を自動化・効率化することができるサービス ボタンプッシュによる自動応答 /SMS送信/電話転送に加えて、 AI音声対話など様々な機能が利用可能
4. 1. Visual Regression Testing (VRT) とは 2. 導入しての課題感と検証方針 3. 実際にやってみて詰まったこと 4. これらを通して学んだこと 5. まとめ 本編記事 hps://zenn.dev/ivry/articles/41d81e1d7448cc 4 今日話すこと
5. UIの見た目の変化を自動で検知するテスト手法 Playwrightで簡単に導入できて、直感的に書ける フロントエンドのライブラリ更新時などで、意図してない変更がないかを 従来は全ページ目視で確認していたが、自動で検証できるようになるので結構嬉しい 5 Visual Regression Testing （VRT） とは 差分があると自動検知される サンプルコード
6. “課題感” ・差分は検知できても、ノイズが多く重要な変化が埋もれ やすい ・結局 “どこがどう変わったか ” がわかりにくい ・“本当にバグなのか？ ” は人間の判断がしないといけない -> 単に差分を出すだけでなく、「どの部分がどう変化し たのか」まで分かると助かる ... 6 導入して見えてきた課題 差分検知後に出力される差分ハイライトのキャプチャ
7. 7 従来のVRTでは“差分の検出”まではできるが、それが本当に問題なのかを判断するには 解 釈（意味づけ） が必要になる。 そこで、差分の ”見た目” ではなく ”意味” を捉える必要があると考え、生成 AIを使えばこの “意味づけ”ができるのではないかという仮説を立て、その可能性を検証することにしました。 課題を踏まえた検証方針
8. 8 設計① 差分を“意味化”するための全体フロー 全体フロー ・差分画像をもとに、生成 AIが“変化の内容”を解析 ・JSON形式で構造化し、重要な変更点だけを抽出 ・最終的に自然言語レポートとして Slackに通知
9. 9 設計② 生成AIに見てほしい観点の言語化（プロンプト設計） プロンプト設計 ・差分の“種類”を分類できるよう、ERROR／WARN／無視 の3段階に整理 ・生成AIには「何を見つけてほしいか」を具体的に指示して ノイズを削減
10. 10 実際にやってみて詰まったこと
11. AIの回答が “狙った内容 ”にならない 最初は“間違い探し”のように、差分を生成 AIに直接見つけ させていた 抽象的な表現だったり、そこじゃないんだよな ...みたいな出 力内容になっていた 改善したこと Before：AIが画像を見て自由に説明 ↓ After：差分検出 + 生成AIで分類・説明 11 詰まったポイント① 狙った出力にならない
12. 差分画像に引っ張られてAIの回答が“狙った内容”にならない ・基準となるスナップショット ・取得したスナップショット ・差分がハイライトされたスナップショット ・座標や差分率などの比較ログデータ これら全てをLLMに入力して差分説明を生成していた 起きたこと AIが“目立つ見た目の変化 ”を優先的に拾ってしまう → 色の変化など表層的な出力が増え、重要な差分が埋もれる 改善したこと 差分がハイライトされたスナップショット と 座標や差分率などの比較ログデー タを与えない方針に変更。精度も良くなっていきました 12 詰まったポイント② 情報を与えすぎてノイズに溺れる 通知結果 左からベース画像、取得した画像、差分がハイライトされた画像
13. 13 精度をさらに高めるためにモデルごとの出力傾向を比較も実施 モデル比較 ・Gemini 2.5 Flash と GPT-4.1 mini は、期待に近い精度で変化 を検知 ・GPT-4o mini はテキスト変更の分類は正確だったが、レイアウ ト 検知が弱め ・モデルごとに得意・不得意があり、用途に応じた選定が重要 複数ページで検証したところ GPT-4.1 mini の出力が最も安定して いたため、現在は GPT-4.1 mini を使用しています 詰まったポイントを改善したあと、さらに精度を高められないかを確認するため、 モデルごとの出力傾向を比較検証しました
14. 14 生成AIを用いて差分の“意味”を説明できるようにしたことで、変更の意図・影響をすぐに判 断できる状態を実現 これにより、レビュー時の判断コストを削減し、運用効率が向上 結果として “理解できる差分 ” へ “見た目の変化 ”を人が読めるレポートとして Slackに出力 比較した画像
15. • 入力情報を“全部盛り”にするほど精度が上がるわけではなく、不要な情報を削る方がモデルの判 断精度が上がる • 精度はモデル性能よりも、 どこを見る／どこを無視するかを明確にしたプロンプト設計 の方が重 要だったりする • 差分をどう検出するかではなく、差分の “意味”をどう扱うか に “視点を切り替える ” ことで打ち手が 生まれた 15 これらを学んだこと
16. • 実際やってみた結果、自然言語で説明される VRT は想像以上に実用的でした！ • いろんな学びはありつつ、アプローチの仕方や視点の変え方は特に学びになりました こうした取り組みを通じて、より効率的に品質を保つ仕組みを作っていきたいと思っています 16 まとめ
17. We are Hiring! X カジュ面