jpskill.com
🛠️ 開発・MCP コミュニティ

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.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
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
🪟 Windows (PowerShell)
$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. 1. 下の青いボタンを押して patchright-skill.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → patchright-skill フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

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:

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` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。