ウェブベースのデザインツールで行われたAI駆動のQA実行では、「すべての機能が動作中、合格（pass）」と報告されましたが、キャンバスには何も表示されていませんでした。この誤った合格判定は、モデルの推論ミスではなく、ブラウザが非表示のタブを処理する方法と、テストスクリプトが視覚的な出力ではなく「健全性（health）」を測定していたことによる副作用でした。

なぜAI QAエージェントは空白のキャンバスを見逃すのか

AIエージェントはJavaScriptを実行し、スクリーンショットをキャプチャし、機能が正しく動作したかどうかをモデルに推論させます。実際には、UIが実際には空であるにもかかわらず、2つの技術的な盲点が繰り返し「合格」を生成してしまいます。

非表示タブのスロットリングについて

Chrome MCPは、メインウィンドウを他の作業のために空けておくため、バックグラウンドタブでテストを実行することがよくあります。タブの document.visibilityState が hidden になると、ブラウザはレンダリングパイプラインをスロットリング（制限）します。

  • JavaScriptは実行され続けるため、ランタイムエラーは発生しません。
  • requestAnimationFrame のコールバックが停止し、アニメーションのフレームカウントがゼロのままになります。
  • タイマーの実行頻度が大幅に低下します。例えば、33ms間隔を想定していたテストが、わずか4回しか観測されないといったことが起こります。

AIエージェントは、クリーンなJSの結果とスクリーンショットを確認し、アニメーションが動作したと判断してしまいます。レンダリングループが一度もピクセルを生成しなかったため、視覚的な欠陥は隠れたままになります。

非表示タブの問題への対策

  • キャンバス、アニメーション、またはグラフィックスの検証を行う場合は、テストタブを表示状態に保ってください。
  • タブがフォアグラウンドにあることを確認してからインタラクションをトリガーしてください。
  • スクリーンショットをキャプチャする前に、短い待ち時間（数秒間）を挿入し、フレームバッファにデータが書き込まれていることを確認してください。
  • 非表示のタブを使用せざるを得ない場合は、レポートの冒頭に「レンダリングは視覚的に確認されていません」といった免責事項を追記してください。

コードの健全性 vs 機能の振る舞い

ほとんどのAI QAスクリプトは「コードの健全性（code health）」を評価します。つまり、クリックハンドラーが接続されているか、JavaScriptの例外が発生していないか、必要なライブラリがロードされているかを確認するものです。これらのシグナルは、コードが実行されたことを証明するものであり、UIが意図した通りに変更されたことを証明するものではありません。キャンバス要素が作成され、描画ルーチンが呼び出されたとしても、描画コマンドがサイズゼロのバッファや空のアセットを対象としている場合、何も描画されないことがあります。

コードのパスが健全であっても、視覚的なアーティファクト（描画結果）の欠落を隠してしまう可能性があるため、この区別は重要です。

振る舞いのチェックを追加する

  1. 動的要素の特定 – ソースをスキャンして、canvasタグ、file-inputフィールド、ダウンロードボタン、アニメーションループを特定します。
  2. 観測可能な結果の定義 – キャンバスの場合は、ビットマップが空でないことをピクセルレベルでチェックすることを要件とします。ファイル入力の場合は、プレビュー画像が表示されることを検証します。ダウンロードの場合は、ファイルシステムにファイルが作成されたことを確認します。アニメーションの場合は、追跡対象のプロパティが時間の経過とともに変化することをアサート（断言）します。
  3. カバレッジの報告 – QA出力に、各機能、コードの健全性ステータス、および振る舞いの検証結果をリストした表を添付します。振る舞いのチェックが欠けているものは、「合格（pass）」ではなく「未検証（unverified）」のままにします。

このルールを適用することで、著者のテストスイートにおける偽陽性（false positives）は劇的に減少し、スタイルシートで宣言された色と実際にレンダリングされたピクセルの色が異なるCSSの不一致も明らかになりました。

信頼性の高い視覚テストのための実践的なステップ

  • 表示されているタブでテストを実行してください。機能にレンダリングが含まれる場合は常にこれが必要です。
  • UIが安定するまで待機してください。数秒間の固定の遅延で十分なことが多いですが、より堅牢なアプローチは、getImageData を使用してキャンバスが空白でないことをポーリングすることです。
  • テストスクリプト内で、コードの健全性の検証と視覚的な検証を分離してください。AIモデルにそれぞれを独立して評価させます。
  • 診断出力の一部として、可視性状態（visibility state）とフレームカウンター（requestAnimationFrame の呼び出し回数）をログに記録してください。
  • 回避できない非表示タブでの実行については文書化し、明示的な警告を添えて、後続のレビュアーがその制限を理解できるようにしてください。

次に注目すべき点

AI支援QAツールが普及するにつれ、開発者はそれらを「判定者」ではなく「助手」として扱う必要があります。コードの健全性メトリクスは、ユーザーに面した振る舞いの代用としては、常に不完全なものです。教訓は単純です。AIモデルは、見えているものしか報告できません。タブが隠れているためにブラウザが描画しなかったり、テストスクリプトが「画面に何かが表示されたか？」と尋ねなかったりすれば、モデルは喜んで成功を宣言します。可視性の要件と振る舞いの検証ステップを追加することで、見かけ倒しの「合格」を、信頼できる結果へと変えることができます。