browser-testing

ブラウザーテストスキル

Browser DevTools CLI を使用したブラウザーの自動テスト、操作の自動化、フォームテストです。

使用する場面

このスキルは、次のような場合に有効になります。

• ユーザーが Web ページまたはアプリケーションのテストを依頼した場合
• ユーザーがブラウザー操作の自動化を希望する場合
• ユーザーが UI の動作確認を必要としている場合
• ユーザーがフォーム送信の自動化を希望する場合
• ユーザーがフォームのバリデーションテストを必要としている場合
• ユーザーが複数ステップのフォームやウィザードに言及した場合
• ユーザーがログイン／サインアップのフローをテストしたい場合

機能

ナビゲーション

browser-devtools-cli navigation go-to --url "https://example.com"
browser-devtools-cli navigation go-back-or-forward --direction back
browser-devtools-cli navigation go-back-or-forward --direction forward
browser-devtools-cli navigation reload

操作

すべての操作では、ARIA スナップショットの CSS セレクターまたは ref（e1、@e1）を指定できます。

browser-devtools-cli interaction click --selector "#button"
browser-devtools-cli interaction click --selector "e1"   # ref from a11y take-aria-snapshot
browser-devtools-cli interaction fill --selector "#input" --value "text"
browser-devtools-cli interaction select --selector "#dropdown" --value "option"
browser-devtools-cli interaction hover --selector "#element"
browser-devtools-cli interaction press-key --key "Enter"
browser-devtools-cli interaction scroll --mode bottom
browser-devtools-cli interaction drag --source-selector "#drag" --target-selector "#drop"

コンテンツの取得

browser-devtools-cli content take-screenshot --name "screenshot"
browser-devtools-cli content get-as-html
browser-devtools-cli content get-as-text
browser-devtools-cli content save-as-pdf --name "page"

同期

browser-devtools-cli sync wait-for-network-idle

モックとスタブ

browser-devtools-cli stub mock-http-response --pattern "**/api/**" --response '{"status":200}'
browser-devtools-cli stub intercept-http-request --pattern "**/api/**" --modifications '{"headers":{}}'
browser-devtools-cli stub list
browser-devtools-cli stub clear

基本的なテストのワークフロー

1. 移動：テスト対象のページに移動します
2. 待機：ページが完全に読み込まれるまで待ちます
3. スナップショット（任意）：a11y take-aria-snapshot を実行して、要素を安定して指定するための ref（e1、e2）を取得します
4. 操作：クリック、入力、スクロールを行います（ref には --selector "e1"、または CSS セレクターを使用します）
5. 確認：ページの状態を確認し、スクリーンショットを撮影します
6. 記録：結果を報告します

フォーム自動化のパターン

基本的なフォーム入力

# Fill text input
browser-devtools-cli interaction fill \
  --selector "#email" \
  --value "[email protected]"

# Fill password
browser-devtools-cli interaction fill \
  --selector "#password" \
  --value "SecurePass123"

# Click submit
browser-devtools-cli interaction click \
  --selector "button[type=submit]"

ドロップダウンの選択

browser-devtools-cli interaction select \
  --selector "#country" \
  --value "US"

チェックボックス／ラジオボタン

# Check checkbox
browser-devtools-cli interaction click \
  --selector "#terms-checkbox"

# Select radio option
browser-devtools-cli interaction click \
  --selector "input[name=plan][value=premium]"

複数ステップのウィザード

SESSION="--session-id wizard-test"

# Step 1: Personal Info
browser-devtools-cli $SESSION interaction fill --selector "#name" --value "John Doe"
browser-devtools-cli $SESSION interaction fill --selector "#email" --value "[email protected]"
browser-devtools-cli $SESSION interaction click --selector "#next-step"

# Wait for step 2
browser-devtools-cli $SESSION sync wait-for-network-idle

# Step 2: Address
browser-devtools-cli $SESSION interaction fill --selector "#address" --value "123 Main St"
browser-devtools-cli $SESSION interaction select --selector "#state" --value "CA"
browser-devtools-cli $SESSION interaction click --selector "#next-step"

# Step 3: Confirm
browser-devtools-cli $SESSION sync wait-for-network-idle
browser-devtools-cli $SESSION interaction click --selector "#submit"

バリデーションテスト

必須フィールドのテスト

# Submit empty form
browser-devtools-cli interaction click --selector "button[type=submit]"

# Check for error messages
browser-devtools-cli content get-as-text --selector ".error-message"

無効な入力のテスト

# Invalid email
browser-devtools-cli interaction fill --selector "#email" --value "not-an-email"
browser-devtools-cli interaction click --selector "button[type=submit]"

# Check validation error
browser-devtools-cli content get-as-html --selector ".email-error"

セッションベースのテスト

SESSION="--session-id my-test"

# Navigate
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"

# Interact
browser-devtools-cli $SESSION interaction click --selector ".login-btn"
browser-devtools-cli $SESSION interaction fill --selector "#email" --value "[email protected]"

# Verify
browser-devtools-cli $SESSION content take-screenshot --name "after-login"

# Cleanup
browser-devtools-cli session delete my-test

ベストプラクティス

1. 複数ステップのフローにはセッションを使用します
2. ページ遷移や操作の後は、ネットワークがアイドル状態になるまで待機します
3. 確認のため、重要な操作の後にスクリーンショットを撮影します
4. 誤った要素を選択しないよう、具体的なセレクターを使用します
5. バリデーションテストでは、まず空のまま送信します
6. 入力前にフィールドをクリアします（最初にフィールドをクリアする interaction fill を使用します）
7. 待機方法を使って動的なフィールドに対応します
8. 記録用に、エラーの後にスクリーンショットを撮影します
9. 必要に応じて手順をまとめて実行します。長いフローでは、run execute --code "..." と callTool() を使うと、ラウンドトリップを減らせます（browser-devtools-cli の execute リファレンスを参照）。