「見た目」と「意味」をAIが判定 ～ビジュアルアサーションで変わる テストの守備範囲～

2026年3月25日に開催したmablウェビナーのスライドです。
録画ビデオはこちらです https://mabl.wistia.com/medias/1uxtgi6h00

Transcript

1. 「見た目」と「意味」をAIが判定 ～ビジュアルアサーションで変わる テストの守備範囲～ 2026年3月25日(水) 13:00~14:00 | 舟木 将彦 (Sales Engineer, mabl)
2. 今日お伝えすること • 従来のアサーションが苦手だったこと • ビジュアルアサーションの３つの価値 ◦ 視覚的判定 (Visual Judgement): 見た目・状態を判定 ◦ 意味的分析 (Semantic Analysis): 文脈・言語・関連性を判定 ◦ ノーコード (Zero Code): すべてが自然言語で書ける • 具体的なユースケース４選とデモ • 信頼性を高めるベストプラクティス
3. 従来のアサーションが届かない領域 課題提起 • セレクタ・固定値依存 → UIの小変更で壊れやすい • DOM構造だけでは「見た目の崩れ」「デザインの違和感」は検出できない • 翻訳漏れ・検索結果の妥当性など「意味」は比較できない • グラフ・PDF・画像ファイルの内容確認は手動(目視)に頼っていた
4. ビジュアルアサーションとは 課題提起 • 自然言語プロンプトでページ・ダウンロードファイルの内容を検証 • 大規模言語モデル(LLM)が「判定」する → 意味・文脈・傾向を理解 • Google Cloud Vertex AI (Gemini) 基盤 (顧客データをトレーニングに不使用) • ルールベースのアサーションでは難しかったケースをAIで解決
5. Zero Code ー すべてが自然言語で書ける Zero Code: 共通メリット • コードを書かずに自然言語でアサーションを記述 • エンジニア以外もアサーションを作成・レビュー可能 • 「何を確認したいか」をそのまま書けばよい ◦ 例：「週次売り上げチャートが上昇傾向を示し、エラーアイコンがないこと」
6. デモ: アサーションを書いてみる Zero Code: 共通メリット • mablトレーナー上での操作 • テキストボックスに自然言語を入力 → 即時検証
7. DOM構造だけではわからない「見た目」を検証 Visual Judgement: 見た目の判定 • 画面の配置崩れ・デザインの違和感・UI状態を判定 • 「正しい値」ではなく「正しい状態・傾向」を確認 • canvas / SVG など従来セレクタが届かない要素も対象
8. ユースケース１：グラフ・チャートの検証 Visual Judgement: 見た目の判定 • 例：「週次売上チャートが月～金で上昇傾向を示し、エラーアイコンが表示されて いないこと」 • 従来：数値をAPIで取得・比較できるコードが必要 • 今は：スクリーンショットを自然言語で判定 • 活用シーン：ダッシュボード・レポート画面の回帰テスト
9. ユースケース２：エラー状態・UIの検証 Visual Judgement: 見た目の判定 • 例：「フォーム送信時にエラーメッセージが赤字で表示され、送信ボタンが無効化 されていること」 • 従来：個別要素ごとにアサーションを列挙 • 今は：画面の「状態」をまとめて１文で検証 • 活用シーン：バリデーション・空状態・ローディング状態の確認
10. 文脈・意味・言語をAIが理解して検証 Semantic Analysis: 意味の判定 • テキストの「値」ではなく「意味・関連性・言語」を判定 • 完全一致では検出できない問題を捉える • データの整合性・翻訳品質など「人が読んで判断していた」領域へ
11. ユースケース３：多言語対応の検証 Semantic Analysis: 意味の判定 • 例：「ブランド名・固有名詞・頭字語を除き、ページが日本語で表示されていること」 • 従来：全テキスト要素を個別チェック or 目視確認 • 今は：例外を含む自然言語ルールで一括判定 • 活用シーン：ローカライズリリース前の品質確認
12. 補足：例外を自然言語で指定できる強み Semantic Analysis: 意味の判定 • 「NEW」「webhook」「URL」「API」は英語のまま許可 • 「Submit」「Cancel」は日本語化が必要 • プロンプトに成功・失敗の具体例を付記することで精度が向上
13. ユースケース４：検索結果・データ整合性の検証 Semantic Analysis: 意味の判定 • 『東京 ホテル』の検索結果がすべて東京都内の宿泊施設であること • 従来：特定キーワードの部分一致チェックのみ • 今は：結果の「関連性・妥当性」を意味的に検証 • 活用シーン：検索・レコメンド・フィルタリングの品質保証
14. ダウンロードファイル検証 ２軸の統合例 • 対応形式：PDF, PNG, JPG, GIF, WEBP, BMP • Visual Judgment: 画像レイアウト・デザイン確認 • Semantic Analysis: 請求書の顧客名・金額・振込先の確認 • ここにもZero Code: 専用パーサー不要、自然言語で完結
15. 信頼性の高いアサーションを書く４つのポイント ベストプラクティス • 意図に焦点を当てる • 適切な厳密さを指示する • 例を追加する • 成功・失敗シナリオ両方でテストする
16. ポイント①：意図に焦点を当てる ベストプラクティス • ❌「月曜の売上バーの高さが200px以上」 • ✅「週次売上チャートが上昇傾向を示していること」
17. ポイント②：適切な厳密さを指示 ベストプラクティス • 曖昧過ぎ → 「ページが読み込まれた」(重要要素の欠落を見逃す) • 厳密すぎ → 条件が多すぎて評価困難 (複数アサーションに分割を) • 具体例：ソートされたテーブルの検証 ◦ ❌「テーブルが昇順にソートされていること」→ 重複値があるとFAIL ◦ ✅「テーブルが昇順にソートされていること（同じ値が連続する場合も許容）」 → PASS
18. ポイント③④：例を追加して成功・失敗でテスト ベストプラクティス • アサーション末尾に成功・失敗の例を付記 • Chrome DevToolsでページを手動編集し、失敗シナリオを再現 • 結果フィードバックをもとにプロンプトを反復改善
19. 知っておくべき制限事項 制限・注意事項 項目 内容 上限数 テスト当たり最大30個。 追加コスト クラウド実行で0.5クレジット/回。 非対応 パフォーマンステスト内では失敗。 結果の言語 英語で返る傾向あり。日本語で受け取るにはプロンプト末尾に「結果 を日本語で返してください」と追記。 評価範囲 ビューポート内の表示部分のみ。画面外の要素は評価されない。
20. ビジュアルアサーションで変わるテストの守備範囲 クロージング 従来のアサーション ビジュアルアサーション 見た目の崩れ ❌ ✅Visual Judgement 意味・翻訳品質 ❌ ✅Semantic Analysis ファイル内容 ❌ ✅両方の融合 実装コスト コード必要 ✅Zero Code
21. 次のステップ クロージング • mablトレーナーでビジュアルアサーションを追加してみる • 参考： ビジュアルアサーション作成 ベストプラクティス
22. Q&A