mcpField
A
agent-browser-e2e

agent-browser-e2e

github.com/owenleezyテスト・品質456 回インストール31 週間前に更新
リポジトリ

agent-browser-e2e について

ウェブのエンドツーエンドワークフローを検証するagent-browser向けスキルです。操作前の確認、復旧手順、失敗や予期しない結果が起きた際のユーザー確認ポイントを示します。

主な機能

  1. 01アサーション前にネットワークアイドルを待機
  2. 02既存のJavaScriptエラーを確認
  3. 03遷移後に要素参照を取り直す
  4. 04モバイル表示とオフライン環境をテスト
  5. 05テスト後にオンライン状態へ戻す

活用シーン

  1. 01ウェブ操作フローを一通り検証
  2. 02モバイル表示でサイトをテスト
  3. 03オフラインやPWAの動作を確認
  4. 04アサーション失敗やページエラーを調査

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/owenleezy/agent-browser-skill --skill agent-browser-e2e

インストール後、Claude Code で/agent-browser-e2eを入力して読み込まれたか確認します。

詳細

E2E 検証 — 実行プロトコル

内部テンプレート。 エントリーポイント：agent-browser スキル。

禁止事項

NEVER assert state before `wait --load networkidle` — page may still be rendering
NEVER reuse refs after navigation — run `snapshot` again after every page change
NEVER leave `set offline on` after offline test — always restore with `set offline off`
NEVER skip `errors` check before test steps begin — pre-existing JS errors invalidate results

実行シーケンス

# 1. Open and wait for stable state
AGENT_BROWSER_NATIVE=1 agent-browser open <url>
AGENT_BROWSER_NATIVE=1 agent-browser wait --load networkidle

# 2. Check for errors before any interaction
AGENT_BROWSER_NATIVE=1 agent-browser errors          # → judgment gate if critical errors found
AGENT_BROWSER_NATIVE=1 agent-browser snapshot -i

# 3. Login — prefer Auth Vault over manual fill
#    First time: save credentials once
AGENT_BROWSER_NATIVE=1 agent-browser auth save myapp --url <login-url> --username admin --password secret
#    Every subsequent run: one command
AGENT_BROWSER_NATIVE=1 agent-browser auth login myapp
AGENT_BROWSER_NATIVE=1 agent-browser wait --load networkidle

# 4. Execute test steps (prefer semantic locators)
AGENT_BROWSER_NATIVE=1 agent-browser find label "Email" fill "[email protected]"
AGENT_BROWSER_NATIVE=1 agent-browser find role button click --name "Sign In"

# 5. After every navigation: re-snapshot + re-wait
AGENT_BROWSER_NATIVE=1 agent-browser wait --load networkidle
AGENT_BROWSER_NATIVE=1 agent-browser snapshot -i

# 6. Assert state
AGENT_BROWSER_NATIVE=1 agent-browser is visible @e3
AGENT_BROWSER_NATIVE=1 agent-browser is checked @e5
AGENT_BROWSER_NATIVE=1 agent-browser get text @e1

# 7. Capture evidence
AGENT_BROWSER_NATIVE=1 agent-browser screenshot --full result.png

復旧パターン

失敗復旧方法
要素の参照が古いsnapshot を再実行して、要素を再特定します
アサーションの内容が一致しないスクリーンショットを撮影して、判断ゲートを設けます
ページが読み込まれないwait --load networkidle を実行し、最大3回まで再試行します
ステージング環境の証明書エラー--ignore-https-errors を使用します（本番環境では使用しません）
ページの読み込みが遅いAGENT_BROWSER_DEFAULT_TIMEOUT=60000
大きなページで出力が切り詰められる--max-output <chars> で上限を引き上げます

判断ゲート

以下の場合は一時停止して、ユーザーに確認します。

  • テスト手順の開始前に JS エラーが見つかった
  • 期待されるコンテンツ ≠ 実際のコンテンツ（バグの可能性があります）
  • すべての再試行後もテスト手順が失敗する

デバイスと環境のバリエーション

# Mobile viewport
AGENT_BROWSER_NATIVE=1 agent-browser set device "iPhone 15 Pro"

# Offline / PWA
AGENT_BROWSER_NATIVE=1 agent-browser set offline
AGENT_BROWSER_NATIVE=1 agent-browser reload
# ... assert offline state ...
AGENT_BROWSER_NATIVE=1 agent-browser set offline off   # ALWAYS restore

# Geo-aware
AGENT_BROWSER_NATIVE=1 agent-browser set geo 31.2304 121.4737

注意点

間違い修正方法
ページの読み込み前にアサーションする最初に wait --load networkidle を実行します
ページ遷移後に参照が古くなるページ遷移のたびに snapshot を再実行します
set offline をオンのままにするオフラインテスト後は必ず set offline off を実行します
ステージング環境の証明書エラー--ignore-https-errors を使用します。本番環境では使用しません
find ref e3 fill "..."❌ ref は有効な find サブコマンドではありません。@ref を直接使用します：fill @e3 "text" / click @e3
ダイアログ内のラベルが曖昧モーダルが開いているとき、find label "X" はページ上で最初の要素に一致するため、ダイアログ内のフィールドではなく、背後のフィルターに一致する場合があります。find placeholder "..." を使うか、最初に snapshot -s ".dialog-class" で範囲を指定してください
アプリが新しいタブを開く（window.open）agent-browser は元のタブにとどまります。tab list で確認してから、tab 1（0始まりのインデックス）で切り替えます
javascript "..." が存在しないJS の実行には eval "JS code" を使います。javascript ではありません
ダイアログがクリックを妨げるdialog status で確認してから、dialog dismiss または dialog accept を実行します
ダウンロードを待機するダウンロードのトリガーをクリックした後に wait --download <path> を実行します。固定の wait 3000 に頼らないでください

コメント

Markdown 対応