playwright-cdp-skill は何をしますか？
Playwright を CDP 経由で既存の Chrome/Chromium ブラウザに接続します。Pi、Claude Code、OpenCode、またはスキルをサポートする任意のエージェントで動作します。
概要
このスキルは、AI エージェント（Claude Code など）が、Chrome DevTools Protocol (CDP) を使用して既存の Chrome または Chromium ブラウザインスタンスに接続できるようにします。これにより、Playwright を設定して使用し、手動テストやデバッグセッションなど、すでに開いているブラウザとやり取りできます。
必要条件
- Node.js: バージョン 16 以上
- Playwright:
npm install playwrightでインストール済みであること - Chrome/Chromium: リモートデバッグポートで起動していること（例:
--remote-debugging-port=9222）
使用方法
ステップ 1: Chrome/Chromium をリモートデバッグ付きで起動する
まず、Chrome または Chromium をデバッグポートを有効にして起動します:
# 例: macOS"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222
ステップ 2: スキルを使用する
AI エージェントが設定されたら、既存のブラウザに接続するよう指示できます:
既存のブラウザに接続して、URL http://localhost:3000 を開いてください。接続には CDP 経由で Playwright を使用してください。
ステップ 3: エージェントがブラウザを制御する
エージェントは自動的に Playwright を使用して以下の処理を行います:
chrome://versionページから WebSocket デバッグ URL を特定する- その WebSocket URL を使って既存のブラウザインスタンスに接続する
- ページの操作、スクリーンショットの撮影、データの抽出などを行う
設定
リモートデバッグ用のデフォルトのポートは 9222 です。必要に応じて --remote-debugging-port=<port> で変更できます。
トラブルシューティング
- 接続エラー: Chrome がリモートデバッグを有効にして起動していることを確認してください。
- アクセス拒否: ブラウザを閉じて、リモートデバッグフラグを付けて再起動してください。
- ファイアウォール: リモート接続を使用する場合、ファイアウォールがデバッグポートを許可していることを確認してください。
ライセンス
MIT