browsing-with-playwright
Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction. NOT when only fetching static content (use curl/wget instead).
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o browsing-with-playwright.zip https://jpskill.com/download/17283.zip && unzip -o browsing-with-playwright.zip && rm browsing-with-playwright.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17283.zip -OutFile "$d\browsing-with-playwright.zip"; Expand-Archive "$d\browsing-with-playwright.zip" -DestinationPath $d -Force; ri "$d\browsing-with-playwright.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
browsing-with-playwright.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
browsing-with-playwrightフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 6
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
ブラウザ自動化
Playwright MCPサーバーを介してブラウザのインタラクションを自動化します。
サーバーのライフサイクル
サーバーの起動
# ヘルパースクリプトを使用 (推奨)
bash scripts/start-server.sh
# または手動で
npx @playwright/mcp@latest --port 8808 --shared-browser-context &
サーバーの停止
# ヘルパースクリプトを使用 (最初にブラウザを閉じます)
bash scripts/stop-server.sh
# または手動で
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_close -p '{}'
pkill -f "@playwright/mcp"
停止のタイミング
- タスクの終了時: ブラウザの作業が完了したら停止します。
- 長時間セッション: 複数のブラウザタスクを実行する場合は、実行し続けます。
- エラー: ブラウザが応答しなくなった場合は、停止して再起動します。
重要: 複数の mcp-client.py 呼び出し間でブラウザの状態を維持するには、--shared-browser-context フラグが必要です。 これがないと、各呼び出しは新しいブラウザコンテキストを取得します。
クイックリファレンス
ナビゲーション
# URLへ移動
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate \
-p '{"url": "https://example.com"}'
# 戻る
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate_back -p '{}'
ページの状態の取得
# アクセシビリティスナップショット (クリック/入力用の要素参照を返します)
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_snapshot -p '{}'
# スクリーンショット
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_take_screenshot \
-p '{"type": "png", "fullPage": true}'
要素の操作
スナップショット出力の ref を使用して要素をターゲットにします。
# 要素をクリック
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_click \
-p '{"element": "Submit button", "ref": "e42"}'
# テキストを入力
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_type \
-p '{"element": "Search input", "ref": "e15", "text": "hello world", "submit": true}'
# フォームへの入力 (複数のフィールド)
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_fill_form \
-p '{"fields": [{"ref": "e10", "value": "john@example.com"}, {"ref": "e12", "value": "password123"}]}'
# ドロップダウンの選択
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_select_option \
-p '{"element": "Country dropdown", "ref": "e20", "values": ["US"]}'
条件の待機
# テキストが表示されるまで待機
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \
-p '{"text": "Success"}'
# 時間 (ミリ秒) 待機
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \
-p '{"time": 2000}'
JavaScript の実行
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_evaluate \
-p '{"function": "return document.title"}'
複数ステップの Playwright コード
複雑なワークフローの場合は、browser_run_code を使用して、1 回の呼び出しで複数のアクションを実行します。
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_run_code \
-p '{"code": "async (page) => { await page.goto(\"https://example.com\"); await page.click(\"text=Learn more\"); return await page.title(); }"}'
ヒント: browser_run_code は、アトミック (すべて成功またはすべて失敗) であるべき複雑な複数ステップの操作に使用します。
ワークフロー: フォームの送信
- ページへ移動
- スナップショットを取得して要素の参照を見つける
- 参照を使用してフォームフィールドに入力
- 送信をクリック
- 確認を待つ
- 結果のスクリーンショットを撮る
ワークフロー: データ抽出
- ページへ移動
- スナップショットを取得 (テキストコンテンツを含む)
- 複雑な抽出には browser_evaluate を使用
- 結果を処理
検証
実行: python3 scripts/verify.py
期待される結果: ✓ Playwright MCP server running
検証に失敗した場合
- 診断を実行:
pgrep -f "@playwright/mcp" - 確認: サーバープロセスがポート 8808 で実行されているか
- 試す:
bash scripts/start-server.sh - それでも失敗する場合は停止して報告してください - ダウンストリームの手順に進まないでください
ツールのリファレンス
完全なツールのドキュメントについては、references/playwright-tools.md を参照してください。
トラブルシューティング
| 問題 | 解決策 |
|---|---|
| 要素が見つからない | 最初に browser_snapshot を実行して現在の参照を取得します |
| クリックが失敗する | 最初に browser_hover を試してから、クリックします |
| フォームが送信されない | browser_type で "submit": true を使用します |
| ページがロードされない | 待機時間を増やすか、browser_wait_for を使用します |
| サーバーが応答しない | 停止して再起動: bash scripts/stop-server.sh && bash scripts/start-server.sh |
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Browser Automation
Automate browser interactions via Playwright MCP server.
Server Lifecycle
Start Server
# Using helper script (recommended)
bash scripts/start-server.sh
# Or manually
npx @playwright/mcp@latest --port 8808 --shared-browser-context &
Stop Server
# Using helper script (closes browser first)
bash scripts/stop-server.sh
# Or manually
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_close -p '{}'
pkill -f "@playwright/mcp"
When to Stop
- End of task: Stop when browser work is complete
- Long sessions: Keep running if doing multiple browser tasks
- Errors: Stop and restart if browser becomes unresponsive
Important: The --shared-browser-context flag is required to maintain browser state across multiple mcp-client.py calls. Without it, each call gets a fresh browser context.
Quick Reference
Navigation
# Go to URL
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate \
-p '{"url": "https://example.com"}'
# Go back
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_navigate_back -p '{}'
Get Page State
# Accessibility snapshot (returns element refs for clicking/typing)
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_snapshot -p '{}'
# Screenshot
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_take_screenshot \
-p '{"type": "png", "fullPage": true}'
Interact with Elements
Use ref from snapshot output to target elements:
# Click element
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_click \
-p '{"element": "Submit button", "ref": "e42"}'
# Type text
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_type \
-p '{"element": "Search input", "ref": "e15", "text": "hello world", "submit": true}'
# Fill form (multiple fields)
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_fill_form \
-p '{"fields": [{"ref": "e10", "value": "john@example.com"}, {"ref": "e12", "value": "password123"}]}'
# Select dropdown
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_select_option \
-p '{"element": "Country dropdown", "ref": "e20", "values": ["US"]}'
Wait for Conditions
# Wait for text to appear
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \
-p '{"text": "Success"}'
# Wait for time (ms)
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_wait_for \
-p '{"time": 2000}'
Execute JavaScript
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_evaluate \
-p '{"function": "return document.title"}'
Multi-Step Playwright Code
For complex workflows, use browser_run_code to run multiple actions in one call:
python3 scripts/mcp-client.py call -u http://localhost:8808 -t browser_run_code \
-p '{"code": "async (page) => { await page.goto(\"https://example.com\"); await page.click(\"text=Learn more\"); return await page.title(); }"}'
Tip: Use browser_run_code for complex multi-step operations that should be atomic (all-or-nothing).
Workflow: Form Submission
- Navigate to page
- Get snapshot to find element refs
- Fill form fields using refs
- Click submit
- Wait for confirmation
- Screenshot result
Workflow: Data Extraction
- Navigate to page
- Get snapshot (contains text content)
- Use browser_evaluate for complex extraction
- Process results
Verification
Run: python3 scripts/verify.py
Expected: ✓ Playwright MCP server running
If Verification Fails
- Run diagnostic:
pgrep -f "@playwright/mcp" - Check: Server process running on port 8808
- Try:
bash scripts/start-server.sh - Stop and report if still failing - do not proceed with downstream steps
Tool Reference
See references/playwright-tools.md for complete tool documentation.
Troubleshooting
| Issue | Solution |
|---|---|
| Element not found | Run browser_snapshot first to get current refs |
| Click fails | Try browser_hover first, then click |
| Form not submitting | Use "submit": true with browser_type |
| Page not loading | Increase wait time or use browser_wait_for |
| Server not responding | Stop and restart: bash scripts/stop-server.sh && bash scripts/start-server.sh |
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (4,983 bytes)
- 📎 references/playwright-tools.md (21,155 bytes)
- 📎 scripts/mcp-client.py (17,263 bytes)
- 📎 scripts/start-server.sh (669 bytes)
- 📎 scripts/stop-server.sh (897 bytes)
- 📎 scripts/verify.py (552 bytes)