Frontend Verify

Frontend Verify

agent-browserを使用してローカル開発サーバーのフロントエンドを検証するスキル。

前提条件

• 開発サーバーが起動していること（pnpm dev）
• agent-browser がインストール済み

基本ワークフロー

1. サーバー接続確認

agent-browser open http://localhost:3000

接続エラー時は開発サーバーの起動を促す。

2. スナップショット取得

agent-browser snapshot -i

インタラクティブ要素のアクセシビリティツリーを取得。出力例：

@e1 button "ログイン"
@e2 input[type="email"] placeholder="メールアドレス"
@e3 input[type="password"] placeholder="パスワード"

3. スクリーンショット取得

agent-browser screenshot --full /tmp/verify-$(date +%s).png

4. インタラクション実行

refを使って操作：

agent-browser fill @e2 "test@example.com"
agent-browser fill @e3 "password123"
agent-browser click @e1

5. 結果確認

agent-browser wait --load networkidle
agent-browser snapshot -i
agent-browser screenshot /tmp/result.png

使用シナリオ

基本検証（引数なし）

/frontend-verify

1. http://localhost:3000 へアクセス
2. スナップショット取得
3. フルページスクリーンショット取得
4. 結果を報告

パス指定検証

/frontend-verify /auth/signup

1. http://localhost:3000/auth/signup へアクセス
2. スナップショット取得
3. スクリーンショット取得
4. フォーム要素を特定して報告

インタラクティブ検証

/frontend-verify --interact

1. ページへアクセス
2. スナップショットから操作可能な要素を特定
3. ユーザーに操作シナリオを確認
4. シナリオを実行（例：フォーム入力→送信→結果確認）
5. 各ステップでスクリーンショット取得

主要コマンド（クイックリファレンス）

詳細は references/agent-browser-commands.md を参照。

セッション管理

複数ステップの検証では同一セッションを維持：

export AGENT_BROWSER_SESSION="verify-session"
agent-browser open http://localhost:3000/auth/login
agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # ログイン後の状態を確認

エラーハンドリング

/rams との使い分け

UI実装後は両方を実行することを推奨：

1. /frontend-verify で動作確認
2. /rams でデザイン・アクセシビリティレビュー