| name | browser-agent |
| description | UI実装後の検証時に使用。agent-browser CLIでブラウザ上の動作を検証する。「UIを確認」「画面テスト」「E2Eテスト」と言われたら使用。 |
Browser Agent Skill - agent-browser CLIによるUI検証
前提条件
agent-browser がインストール済み(npm install -g agent-browser && agent-browser install)
- フロントエンドとバックエンドが起動済み(server-startupスキル参照)
Core Workflow
open → snapshot → screenshot → 操作 → snapshot → screenshot
必ず snapshot(構造確認)と screenshot(視覚確認)の両方 を取る。
Quick Reference
agent-browser open <url>
agent-browser snapshot
agent-browser screenshot
agent-browser screenshot --full
agent-browser screenshot --annotate
agent-browser fill <sel> "text"
agent-browser click <sel>
agent-browser select <sel> "option"
agent-browser press Enter
agent-browser wait --load networkidle
agent-browser wait <selector>
agent-browser wait --text "Welcome"
agent-browser get text <sel>
agent-browser get url
agent-browser errors
agent-browser find role button click --name "Submit"
agent-browser find text "Sign In" click
agent-browser find label "Email" fill "test@test.com"
agent-browser set viewport 375 812
agent-browser set viewport 768 1024
agent-browser set viewport 1280 720
agent-browser close
検証チェックリスト
1. 表示確認(必須)
agent-browser open <url>
agent-browser wait --load networkidle
agent-browser screenshot --full
agent-browser snapshot
agent-browser errors
agent-browser close
2. インタラクション検証(フォーム/ボタンがある場合)
agent-browser fill '[data-testid="email-input"]' "valid@example.com"
agent-browser click '[data-testid="submit-button"]'
agent-browser wait --load networkidle
agent-browser screenshot
agent-browser open <url>
agent-browser fill '[data-testid="email-input"]' "invalid"
agent-browser click '[data-testid="submit-button"]'
agent-browser screenshot
3. レスポンシブ確認(UIコンポーネントの場合)
agent-browser set viewport 375 812
agent-browser screenshot /tmp/mobile.png
agent-browser set viewport 1280 720
4. 終了(必須 - 全検証後に必ず実行)
agent-browser close
ブラウザプロセスを残すとプロセスが大量に残りCPUを消費する。
検証が正常終了・異常終了を問わず、必ず agent-browser close を実行すること。
ルール
- コードを読むな、画面を見ろ: ソースコード分析は最小限にし、ブラウザの結果に集中する
- screenshot必須: snapshotだけでは色・レイアウト・視覚的バグがわからない
- 正常系と異常系の両方をテスト: 正しい入力だけでなく、空入力・不正入力も試す
- refは再取得: ページ遷移やDOM変更後は必ず
snapshot を再実行
- errorsを確認: ページ表示後とインタラクション後に
errors でJSエラーを確認
- 本番環境に対するテスト実行禁止
- 必ずcloseする: 検証完了後、必ず
agent-browser close を実行