browser-automation

ブラウザー自動化スキル

ページを対話的に探索し、再利用可能なフローを構築して、複数ユーザーのシナリオをテストします。

クイックスタート

# Start server
node .claude/skills/browser-automation/server.mjs &

# Check available profiles
curl http://localhost:9222/profiles

# Create a session
curl -X POST http://localhost:9222/sessions \
  -d '{"name": "test", "url": "http://localhost:3000", "profile": "member"}'

# Inspect the page
curl http://localhost:9222/inspect

# Execute code
curl -X POST http://localhost:9222/chunk \
  -d '{"label": "Click button", "code": "await page.click(\"button.submit\");"}'

# Shutdown
curl -X POST http://localhost:9222/exit

エンドポイント

エンドポイント	メソッド	説明
/profiles	GET	説明付きの認証プロファイルを一覧表示します
/sessions	GET	アクティブなセッションを一覧表示します
/sessions	POST	セッションを作成します { name, url, profile?, headless? }
/sessions/:name	DELETE	セッションを終了します
/flows	GET	保存済みフローを一覧表示します
/flows/:name/run	POST	フローを実行します { profile?, startUrl?, headless? }
/status	GET	セッションの状態
/inspect	GET	ページの状態とスクリーンショット。ページ全体のスクリーンショットを撮るには ?fullPage=true を追加します
/chunk	POST	コードを実行します { label, code }
/navigate	POST	移動します { url, fullPage? }。ページ全体のスクリーンショットを撮るには fullPage: true を設定します
/save-auth	POST	認証情報を保存します { profile, description }
/review	GET	記録されたチャンクを確認します
/exit	POST	サーバーをシャットダウンします

複数のセッションがアクティブな場合は、?session=name を使用します。

複数ユーザーのテスト

# Create two sessions with different profiles
curl -X POST http://localhost:9222/sessions \
  -d '{"name": "creator", "url": "http://localhost:3000", "profile": "creator"}'
curl -X POST http://localhost:9222/sessions \
  -d '{"name": "viewer", "url": "http://localhost:3000", "profile": "member"}'

# Creator does something
curl -X POST "http://localhost:9222/chunk?session=creator" \
  -d '{"label": "Publish", "code": "await page.click(\"button.publish\");"}'

# Viewer sees it
curl -X POST "http://localhost:9222/navigate?session=viewer" \
  -d '{"url": "http://localhost:3000/models"}'

プロファイル

# List profiles
curl http://localhost:9222/profiles

# Create new profile (description required)
curl -X POST http://localhost:9222/save-auth \
  -d '{"profile": "moderator", "description": "User with mod permissions"}'

# Refresh existing profile
curl -X POST http://localhost:9222/save-auth \
  -d '{"profile": "moderator"}'

プロファイル	説明
moderator	コンテンツレビュー用のモデレーター権限
creator	コンテンツを公開済みの利用歴の長いユーザー
member	標準のログイン済みユーザー
new-user	オンボーディングフロー用の新規アカウント

フロー

保存済みフローは再利用可能な Playwright スクリプトです。

# List flows
curl http://localhost:9222/flows

# Run a flow
curl -X POST http://localhost:9222/flows/my-flow/run \
  -d '{"profile": "member"}'

# Run with custom start URL
curl -X POST http://localhost:9222/flows/my-flow/run \
  -d '{"profile": "member", "startUrl": "http://localhost:3000"}'

フローは .browser/flows/*.js に保存されます。

Playwright コード

チャンクの実行時には page を使用できます。

await page.click('button.submit');
await page.fill('input[name="email"]', '[email protected]');
await page.waitForSelector('h1');
await page.goto('https://example.com');
const title = await page.textContent('h1');

モックアップとの比較

file:// URL でローカル HTML モックアップを開き、実際のページと比較します。

# 1. Open mockup and take full-page screenshot
curl -X POST http://localhost:9222/sessions \
  -d '{"name": "compare", "url": "file:///C:/path/to/mockup.html"}'
curl "http://localhost:9222/inspect?session=compare&fullPage=true"

# 2. Navigate to live page and screenshot
curl -X POST "http://localhost:9222/navigate?session=compare" \
  -d '{"url": "http://localhost:3000/page", "fullPage": true}'

# 3. Compare screenshots in session folder

ファイルの場所

• フロー：.browser/flows/*.js
• プロファイルのメタデータ：.browser/profiles/profiles.meta.json
• 認証状態：.browser/profiles/*.json（gitignore 対象）
• スクリーンショット：.browser/sessions/{id}/screenshots/