レベル5: 決定論的 + 視覚的検証

算出スタイルのチェックとビジュアルスクリーンショットを組み合わせた最大カバレッジ。

レベル5がテストするもの

レベル5は決定論的な算出スタイルのアサーションと視覚的なスクリーンショット検証を組み合わせて、すべての下位レベルが見逃すバグをキャッチします。UI/CSS作業における最も信頼度の高い検証方法です。

2つの補完的なツール：

• verify-ui — 実行中のページから算出CSS値を抽出し、正確な値をアサート（LLMの解釈なし）
• headless-browser — 視覚的な比較とインタラクションテスト用のスクリーンショットを撮影

両方が必要な理由

算出スタイルのチェックだけでは、要素間のインタラクション（重なり、スタッキングコンテキスト）から生じる視覚的な問題を見逃す可能性があります。スクリーンショットだけでは、確証バイアスの可能性があるLLMの解釈に依存します。組み合わせることで以下を提供します：

verify-uiの例

# Check computed styles of an element
verify-ui --url http://localhost:3000 \
  --selector ".hero-title" \
  --check "font-size: 48px" \
  --check "color: rgb(255, 255, 255)" \
  --check "display: block"

# Verify visibility
verify-ui --url http://localhost:3000 \
  --selector ".notification-banner" \
  --check "display: block" \
  --check "opacity: 1" \
  --check "visibility: visible"

このレベルがキャッチする典型的な失敗

典型的なシナリオを考えてみます：

1. AIエージェントが通知バナーコンポーネントを追加する
2. ユニットテストでコンポーネントがレンダリングされることを確認する（レベル1パス）
3. DOMテストで要素がツリーに存在することを確認する（レベル2パス）
4. しかし親コンテナに overflow: hidden と height: 0 がある
5. バナーはDOMに存在するが完全に非表示

レベル5ならこれをキャッチします：

# verify-ui would reveal:
# .notification-banner parent has height: 0px, overflow: hidden
verify-ui --url http://localhost:3000 \
  --selector ".notification-container" \
  --check "height: auto" \
  --check "overflow: visible"

headless-browserのスクリーンショットにより、バナーが表示されていないことを視覚的に確認できます。

headless-browserによる視覚的検証

# Full-page screenshot
node headless-check.js --url http://localhost:3000 --screenshot --full-page

# Screenshot of specific viewport
node headless-check.js --url http://localhost:3000 \
  --screenshot --width 375 --height 812  # iPhone viewport

統合されたワークフロー

UI/CSSの変更に対する推奨検証ワークフロー：

1. CSS/レイアウトの変更を行う
2. verify-uiを実行して正確な算出値をアサートする
3. headless-browserでスクリーンショットを撮影して視覚的に確認する
4. verify-uiがパスしてもスクリーンショットが正しくない場合、スタッキング/コンポジションの問題を調査する
5. スクリーンショットが正しいがverify-uiが失敗する場合、期待値を更新する

ブラインドスポット

レベル5のブラインドスポットは最小限ですが、いくつか残ります：

• OSごとのフォントレンダリングの違い
• サブピクセルレンダリングのバリエーション
• アニメーションのタイミング（フレーム途中の状態）
• テストブラウザに存在しないブラウザ固有の癖

レベル5を使用するタイミング