patchright-skill
Patchright-based browser automation with bot detection bypass. Use when Claude needs to interact with local web applications, test localhost/dev servers, take screenshots, or perform UI interactions on private networks. Ideal for QA automation, frontend debugging, E2E testing, and pre-deployment verification on local development environments.
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o patchright-skill.zip https://jpskill.com/download/20837.zip && unzip -o patchright-skill.zip && rm patchright-skill.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/20837.zip -OutFile "$d\patchright-skill.zip"; Expand-Archive "$d\patchright-skill.zip" -DestinationPath $d -Force; ri "$d\patchright-skill.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
patchright-skill.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
patchright-skillフォルダができる - 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
- 同梱ファイル
- 8
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Patchright - ブラウザ自動化スキル
Patchrightベースのブラウザ自動化で、ボット検出を回避します。localhost、開発サーバー、ウェブアプリのテスト、スクリーンショット、UI操作にご利用ください。
トリガー
URL/ネットワーク:
- localhost (http://localhost:, http://127.0.0.1:)
- ローカルIP (192.168.x.x, 10.x.x.x, 172.16-31.x.x)
- 開発サーバーポート (3000, 5173, 8080, 4200, 5000など)
ウェブアプリのテスト:
- "test the app", "check the site"
- "open localhost", "view in browser"
- "take screenshot", "capture screen"
- "check UI", "view page"
- QA、E2Eテスト、開発ビルドの検証
ブラウザ操作:
- "click", "press button"
- "type", "fill form"
- "login", "sign up"
- "open menu", "click tab"
- "scroll", "navigate"
視覚的検証:
- "how does it look?", "is it working?"
- "check design", "verify layout"
- "responsive test", "screen size"
- "check rendering", "verify component"
開発ワークフロー:
- コード編集後の変更検証
- フロントエンドのデバッグ
- リアルタイムの開発フィードバック
- デプロイ前のチェック
コア: サーバーモード (セッション永続化!)
問題: scripts/executor.py は呼び出しごとにプロセスを終了させるため、ブラウザセッションが失われます。 解決策: scripts/server.py はバックグラウンドサーバーを実行し、セッションを永続化させます。
サーバーの起動 (必須!)
cd ~/.claude/skills/patchright-skill
python scripts/server.py start &
サーバーコマンド
# ステータスの確認
python scripts/server.py status
# サーバーの停止
python scripts/server.py stop
# ツールの呼び出し
python scripts/server.py call '{"tool": "...", "args": {...}}'
使用方法
1. ナビゲート + スクリーンショット (最も一般的なパターン)
cd ~/.claude/skills/patchright-skill
# サーバーの起動 (実行中でない場合)
python scripts/server.py start &
sleep 2
# ページへナビゲート
python scripts/server.py call '{"tool": "navigate", "args": {"url": "http://localhost:3000"}}'
# スクリーンショットの撮影
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "screenshot.png", "full_page": true}}'
2. クリック + インタラクション
# 要素のクリック
python scripts/server.py call '{"tool": "click", "args": {"selector": "button.submit"}}'
python scripts/server.py call '{"tool": "click", "args": {"selector": "#menu-btn"}}'
python scripts/server.py call '{"tool": "click", "args": {"selector": "body"}}' # どこでもクリック
# テキストの入力
python scripts/server.py call '{"tool": "type", "args": {"selector": "#email", "text": "test@test.com"}}'
python scripts/server.py call '{"tool": "type", "args": {"selector": "input[name=password]", "text": "password123"}}'
3. 情報の取得
# 現在のURL
python scripts/server.py call '{"tool": "get_url"}'
# ページタイトル
python scripts/server.py call '{"tool": "get_title"}'
# 要素のテキスト
python scripts/server.py call '{"tool": "get_text", "args": {"selector": ".error-message"}}'
4. 待機
# 要素が表示されるまで待機
python scripts/server.py call '{"tool": "wait_for", "args": {"selector": ".loading-complete", "timeout": 10000}}'
ツールリファレンス
| Tool | Description | Args |
|---|---|---|
| launch | ブラウザを起動します | headless: bool (デフォルト: false) |
| close | ブラウザを閉じます | - |
| navigate | URLへ移動します | url: string (必須) |
| screenshot | ファイルに保存します | path: string, full_page: bool |
| click | 要素をクリックします | selector: string (必須) |
| type | テキストを入力します | selector: string, text: string |
| get_text | 要素のテキストを取得します | selector: string |
| wait_for | 要素を待機します | selector: string, timeout: int |
| get_url | 現在のURLを取得します | - |
| get_title | ページタイトルを取得します | - |
例
ログインテスト
cd ~/.claude/skills/patchright-skill
python scripts/server.py start &
sleep 2
# ログインページへナビゲート
python scripts/server.py call '{"tool": "navigate", "args": {"url": "http://localhost:3000/login"}}'
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "login_page.png"}}'
# フォームの入力
python scripts/server.py call '{"tool": "type", "args": {"selector": "#email", "text": "admin@test.com"}}'
python scripts/server.py call '{"tool": "type", "args": {"selector": "#password", "text": "admin123"}}'
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "login_filled.png"}}'
# 送信
python scripts/server.py call '{"tool": "click", "args": {"selector": "button[type=submit]"}}'
sleep 2
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "login_result.png"}}'
アプリのナビゲーション
# アプリに入る
python scripts/server.py call '{"tool": "navigate", "args": {"url": "http://localhost:3000"}}'
python scripts/server.py call '{"tool": "click", "args": {"selector": "body"}}' # クリックして入る
sleep 2
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "app_main.png", "full_page": true}}'
# 機能を探索
python scripts/server.py call '{"tool": "click", "args": {"selector": ".create-btn"}}'
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "after_action.png"}}'
セレクターのヒント
/* ID */
#submit-btn
/* Class */
.nav-menu
button.primary
/* Attribute */
input[type=email]
button[data-testid="login"]
a[href="/about"]
/* Text content */
text=Login
text=Submit
/* Combined */
form#login button[type=submit]
.sidebar .menu-item:first-child
技術仕様
- エンジン: patchright (検出されないplaywrightのフォーク)
- ブラウザ: Google Chrome (チャンネル: 'chrome')
- ボット検出回避: はい (Cloudflare、reCAPTCHAなど)
- Localhostサポート: はい
- プライベートIPサポート: はい
- サーバーポート: 9222
トラブルシューティング
"Server not running" エラー:
python scripts/server.py start &
sleep 2
ブラウザが表示されない:
- headless=False がデフォルトなので、ブラウザウィンドウが表示されるはずです。
- サーバーモードでは、ブラウザはバックグラウンドで永続化されます。
セッションが切断された:
- scripts/executor.py の代わりに scripts/server.py を使用してください。
- サーバーは一度起動するとセッションを維持します。
要素が見つからない:
- まず wait_for を使用して待機してください。
- DevToolsでセレクターを確認してください。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Patchright - Browser Automation Skill
Patchright-based browser automation with bot detection bypass. Use for localhost, dev servers, web app testing, screenshots, and UI interactions.
Triggers
URL/Network:
- localhost (http://localhost:, http://127.0.0.1:)
- Local IPs (192.168.x.x, 10.x.x.x, 172.16-31.x.x)
- Dev server ports (3000, 5173, 8080, 4200, 5000, etc.)
Web App Testing:
- "test the app", "check the site"
- "open localhost", "view in browser"
- "take screenshot", "capture screen"
- "check UI", "view page"
- QA, E2E testing, dev build verification
Browser Interaction:
- "click", "press button"
- "type", "fill form"
- "login", "sign up"
- "open menu", "click tab"
- "scroll", "navigate"
Visual Verification:
- "how does it look?", "is it working?"
- "check design", "verify layout"
- "responsive test", "screen size"
- "check rendering", "verify component"
Development Workflow:
- Verify changes after code edits
- Frontend debugging
- Real-time dev feedback
- Pre-deployment checks
Core: Server Mode (Session Persistence!)
Problem: scripts/executor.py terminates process on each call -> browser session lost Solution: scripts/server.py runs background server -> session persists
Start Server (Required!)
cd ~/.claude/skills/patchright-skill
python scripts/server.py start &
Server Commands
# Check status
python scripts/server.py status
# Stop server
python scripts/server.py stop
# Call tool
python scripts/server.py call '{"tool": "...", "args": {...}}'
Usage
1. Navigate + Screenshot (Most Common Pattern)
cd ~/.claude/skills/patchright-skill
# Start server (if not running)
python scripts/server.py start &
sleep 2
# Navigate to page
python scripts/server.py call '{"tool": "navigate", "args": {"url": "http://localhost:3000"}}'
# Take screenshot
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "screenshot.png", "full_page": true}}'
2. Click + Interaction
# Click element
python scripts/server.py call '{"tool": "click", "args": {"selector": "button.submit"}}'
python scripts/server.py call '{"tool": "click", "args": {"selector": "#menu-btn"}}'
python scripts/server.py call '{"tool": "click", "args": {"selector": "body"}}' # Click anywhere
# Type text
python scripts/server.py call '{"tool": "type", "args": {"selector": "#email", "text": "test@test.com"}}'
python scripts/server.py call '{"tool": "type", "args": {"selector": "input[name=password]", "text": "password123"}}'
3. Get Information
# Current URL
python scripts/server.py call '{"tool": "get_url"}'
# Page title
python scripts/server.py call '{"tool": "get_title"}'
# Element text
python scripts/server.py call '{"tool": "get_text", "args": {"selector": ".error-message"}}'
4. Wait
# Wait for element to appear
python scripts/server.py call '{"tool": "wait_for", "args": {"selector": ".loading-complete", "timeout": 10000}}'
Tool Reference
| Tool | Description | Args |
|---|---|---|
| launch | Start browser | headless: bool (default: false) |
| close | Close browser | - |
| navigate | Go to URL | url: string (required) |
| screenshot | Save to file | path: string, full_page: bool |
| click | Click element | selector: string (required) |
| type | Type text | selector: string, text: string |
| get_text | Get element text | selector: string |
| wait_for | Wait for element | selector: string, timeout: int |
| get_url | Get current URL | - |
| get_title | Get page title | - |
Examples
Login Test
cd ~/.claude/skills/patchright-skill
python scripts/server.py start &
sleep 2
# Navigate to login page
python scripts/server.py call '{"tool": "navigate", "args": {"url": "http://localhost:3000/login"}}'
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "login_page.png"}}'
# Fill form
python scripts/server.py call '{"tool": "type", "args": {"selector": "#email", "text": "admin@test.com"}}'
python scripts/server.py call '{"tool": "type", "args": {"selector": "#password", "text": "admin123"}}'
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "login_filled.png"}}'
# Submit
python scripts/server.py call '{"tool": "click", "args": {"selector": "button[type=submit]"}}'
sleep 2
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "login_result.png"}}'
App Navigation
# Enter app
python scripts/server.py call '{"tool": "navigate", "args": {"url": "http://localhost:3000"}}'
python scripts/server.py call '{"tool": "click", "args": {"selector": "body"}}' # Click to enter
sleep 2
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "app_main.png", "full_page": true}}'
# Explore features
python scripts/server.py call '{"tool": "click", "args": {"selector": ".create-btn"}}'
python scripts/server.py call '{"tool": "screenshot", "args": {"path": "after_action.png"}}'
Selector Tips
/* ID */
#submit-btn
/* Class */
.nav-menu
button.primary
/* Attribute */
input[type=email]
button[data-testid="login"]
a[href="/about"]
/* Text content */
text=Login
text=Submit
/* Combined */
form#login button[type=submit]
.sidebar .menu-item:first-child
Technical Specs
- Engine: patchright (undetected playwright fork)
- Browser: Google Chrome (channel: 'chrome')
- Bot Detection Bypass: YES (Cloudflare, reCAPTCHA, etc.)
- Localhost Support: YES
- Private IP Support: YES
- Server Port: 9222
Troubleshooting
"Server not running" error:
python scripts/server.py start &
sleep 2
Browser not visible:
- headless=False is default, browser window should appear
- In server mode, browser persists in background
Session disconnected:
- Use scripts/server.py instead of scripts/executor.py
- Server keeps session alive once started
Element not found:
- Use wait_for to wait first
- Verify selector in DevTools
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (6,414 bytes)
- 📎 LICENSE.txt (1,097 bytes)
- 📎 scripts/executor.py (8,044 bytes)
- 📎 scripts/google_debug.py (1,883 bytes)
- 📎 scripts/google_extract_results.py (1,959 bytes)
- 📎 scripts/google_search.py (5,091 bytes)
- 📎 scripts/README.md (2,481 bytes)
- 📎 scripts/server.py (7,696 bytes)