visual-check

name	visual-check
description	agent-browser でアクセシビリティツリーを取得し、UI 構造を機械的に検証する。 CLS 測定、アニメーション完了待ち、スナップショット比較。 Use when: "UI確認", "見た目チェック", "コンポーネント検証", "visual check", "accessibility tree", "CLS", "アクセシビリティ", "スナップショット".

Visual Component Check

Prerequisites

• Dev server 起動中 (http://localhost:5191)
• agent-browser インストール済み: npx agent-browser install

Instructions

Step 1: dev server 確認

curl -sf http://localhost:5191 || echo "dev server is not running on port 5191"

Step 2: アクセシビリティツリー取得

npx agent-browser open http://localhost:5191
npx agent-browser snapshot

snapshot 出力の読み方:

• @e1, @e2... = 要素参照。以降のコマンドで使える
• role=button, role=textbox 等で要素の意味を確認
• name 属性で表示テキストを確認

Step 3: インタラクション検証

npx agent-browser fill @e5 "test input"
npx agent-browser click @e7
npx agent-browser snapshot   # 操作後の状態確認

Step 4: CLS 測定

npx agent-browser eval "
  let cls = 0;
  new PerformanceObserver(l => {
    for (const e of l.getEntries()) { if (!e.hadRecentInput) cls += e.value; }
  }).observe({type:'layout-shift',buffered:true});
  await new Promise(r => setTimeout(r, 1000));
  cls;
"

目標: CLS < 0.1 (Good)

Step 5: アニメーション完了待ち

npx agent-browser eval