Playwright CLI v0.1.8 で普段使いの Chrome にそのまま attach できるようになりました

どうも！オペ部の西村祐二です！

Playwright CLI v0.1.8 が 2026-04-14 にリリースされました。今回、 playwright-cli attach --cdp=chrome で普段使っているローカルの Chrome / Edge にそのまま接続できるようになった点です。これまでのようにサンドボックス化された別ブラウザを起動する必要がなく、既存のログイン状態や拡張機能を持った Chrome をそのままエージェントや CLI から操作できます。

何がリリースされたか

• 概要: attach --cdp=<channel> でローカル起動済みの Chrome / Edge へ接続する Remote debugging mode が追加されました。あわせて CLI 終了後に残る Chrome プロセスの解消と、MCP server registry のクリーンアップ修正も入っています
• リリース日: 2026-04-14
• 公式リンク: Release v0.1.8 · microsoft/playwright-cli

注目ポイント

1. 既存 Chrome への attach（#358）

   • 提供状況: GA（v0.1.8）
   • playwright-cli attach --cdp=chrome でチャンネル名を解決して接続。chrome, chrome-beta, chrome-dev, chrome-canary, msedge, msedge-beta, msedge-dev, msedge-canary に対応
   • 対応 OS は Linux / macOS / Windows
   • 接続フローは Chrome 144 以降の chrome://inspect/#remote-debugging を使う仕組みです

2. CPU / メモリ肥大と CLI 終了後に残る Chrome プロセスの解消（#360）

   • 提供状況: GA（v0.1.8）
   • 長時間の CLI / エージェントセッション後にリソースを食い潰す Chrome プロセスや、手動 kill が必要だった残留プロセスが解消されました
   • 実装は launch options から CDP port を取り除く方向でクリーンアップされています（microsoft/playwright#40190）

3. MCP server registry のクリーンアップ修正

   • 提供状況: GA（v0.1.8）
   • browserToken 未指定時に 'chrome' がデフォルトになり、userDataDir パスに undefined という文字列が混入する問題が解消
   • delete-data 時のセッション停止に force を渡すよう変更（microsoft/playwright#40179）

attach --cdp=chrome の仕組み

Playwright 本体側の PR microsoft/playwright#40177 によると、connectOverCDP がチャンネル名（chrome、chrome-beta、msedge など）を受け取れるよう拡張されています。受け取ったチャンネル名から、ブラウザのユーザーデータディレクトリにある DevToolsActivePort ファイルを読み取って WebSocket エンドポイントを解決する流れです。

これまでも connectOverCDP 自体は存在しましたが、接続先の HTTP / WebSocket エンドポイントを呼び出し側で用意して渡す必要がありました。今回の変更で、エンドポイント URL を意識せずチャンネル名だけで接続できるようになっています。

試してみる

環境

• macOS 15.7.4
• Google Chrome 147.0.7727.57
• Node.js v25.8.2（最低要件は Node.js 18 以上）
• @playwright/cli 0.1.8

1. Playwright CLI を v0.1.8 にインストール

npm install -g @playwright/cli@0.1.8

バージョン確認します。

$ playwright-cli --version
0.1.8

2. Chrome 側でリモートデバッグを有効化

Chrome の新しいタブで chrome://inspect/#remote-debugging を開き、「Allow remote debugging for this browser instance」のトグルを ON にします。ON にすると次のような表示になります。

なお、この機能は Chrome 144 以降が必要です。手元の Chrome バージョンは chrome://settings/help で確認できます。

3. attach する

別ターミナルから次のコマンドで attach します。

playwright-cli attach --cdp=chrome

初回接続時は Chrome 側で接続許可のダイアログが出るので、許可します。

接続に成功するとコマンドの標準出力に開いているタブの一覧と現在のページ情報が表示されます。

### Browser `default` opened with pid 13889.
### Open tabs
- 0: (current) [AI Starter](https://prd.ai-starter.classmethod.info/chat/85sxfxmy1T3k)
- 1: [Inspect with Chrome Developer Tools](chrome://inspect/#remote-debugging)
### Page
- Page URL: https://prd.ai-starter.classmethod.info/chat/85sxfxmy1T3k
- Page Title: AI Starter
- Console: 4 errors, 1 warnings
### Snapshot
- [Snapshot](.playwright-cli/page-2026-04-18T13-54-35-953Z.yml)

ログイン済みのタブがそのまま見えており、サンドボックスではなく実際に開いていた Chrome のセッションに繋がっていることが分かります。

4. 接続後の動作確認

セッション一覧を確認します。browser-type: chrome (attached) と表示され、新規起動ではなく attach された Chrome であることが分かります。

$ playwright-cli list
### Browsers
- default:
  - status: open
  - browser-type: chrome (attached)

スナップショットを取ると、ログイン済みページの DOM と一緒に 1Password などの拡張機能が認識している要素も拾えています。

$ playwright-cli snapshot --depth=2
### Snapshot
- generic [ref=e1]:
  - generic [ref=e2]:
    - generic [ref=e3]
    - region "Notifications alt+T"
  - status [ref=e1025]: 1Password menu is available. Press down arrow to select.

実ページのコンソールログも取れます。

$ playwright-cli console
[ERROR] Failed to load resource: the server responded with a status of 404 () @ https://prd.ai-starter.classmethod.info/locales/en-US/common.json:0
[ERROR] Failed to load resource: the server responded with a status of 404 () @ https://prd.ai-starter.classmethod.info/locales/en-US/error.json:0
...

5. デタッチ

close で attach 状態のセッションを閉じます。手元で試した範囲では、Chrome 本体は起動したまま、CLI 側のセッションだけが切れる挙動でした。

$ playwright-cli close
Browser 'default' closed

$ playwright-cli list
  (no browsers)

AI エージェントから使う（Skills のインストールと更新）

手元で試す分には問題ないですが、実際のユースケースとしては Claude Code や GitHub Copilot などのコーディングエージェントから playwright-cli を呼んでもらう形が主になりそうです。Playwright CLI にはエージェント向けの Skill ファイルが同梱されていて、インストールしておくとエージェントが CLI の使い方を把握したうえで必要なコマンドだけを呼び出してくれるようになります。

Skill のインストール

# Claude Code 向け（デフォルト）
playwright-cli install --skills

# 他エージェント向け
playwright-cli install --skills=agents

公式 README によると、Skill 方式は「大きなツールスキーマやアクセシビリティツリーをモデルコンテキストに読み込ませずに済む」ためトークン効率が良く、コーディングエージェントとの相性が良いとされています（Playwright CLI vs Playwright MCP）。

Skill の更新

Playwright CLI 本体をバージョンアップしたあとに同じコマンドを実行すると、Skill ファイルも最新版で上書きされます。今回の v0.1.8 で追加された attach --cdp=chrome のような新コマンドをエージェントに使ってもらうには、本体のアップデート後に install --skills を再実行しておくのが良さそうです。

npm install -g @playwright/cli@latest
playwright-cli install --skills

実際に試すと、install --skills 直後の Skill ファイル（.claude/skills/playwright-cli/SKILL.md）には v0.1.8 の attach --cdp=chrome / attach --cdp=msedge / attach --cdp=http://localhost:9222 の記述がすでに含まれていました。本体のバージョンアップ + install --skills だけでエージェント側も追従できる流れになっています。

Skill を入れずに使う場合

Skill をインストールしない運用でも、playwright-cli --help を読めるエージェントならその場で使い方を把握して動いてくれます。プロンプトに「playwright-cli --help を確認してから使ってほしい」と添えておくだけで動くケースもあるので、試用フェーズではこの方法も選択肢になりそうです。

Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.

詳細は 公式 README の Installing skills を参考にしてください。

Chrome DevTools MCP autoConnect との使い分け

似た仕組みとして Chrome DevTools MCP server の --autoConnect があります。両者は同じ chrome://inspect/#remote-debugging の新フローに乗っているため、「既存ブラウザセッションを再利用する」体験はかなり近いです。

ただし用途と強みは少し違うので、次のように使い分けると良さそうです。

Edge を含めて自動化したい場合や、その後 Playwright のテストコード化に持っていきたい場合は Playwright CLI 側、いま見ている DevTools の状態をそのまま AI に引き継ぎたい場合は Chrome DevTools MCP 側、というのが現時点での自然な棲み分けかなと思います。

セキュリティ面の注意

Chrome は 2025-03-17 のアナウンスで、Chrome 136 以降は --remote-debugging-port / --remote-debugging-pipe を既定のユーザーデータディレクトリで使うと無視するよう変更しました。背景は、リモートデバッグポート経由で Cookie や認証情報を抜き取る攻撃手法が広がってきたためです。

今回の chrome://inspect/#remote-debugging を使うフローは、起動オプションではなくユーザー操作で明示的に有効化する方式で、接続要求のたびに Chrome が許可ダイアログを出します。さらに接続中は「Chrome is being controlled by automated test software」のバナーが常時表示されます。従来の「ポートを開けっぱなし」よりは安全寄りな印象です。

試してみた感想

ログイン済み・拡張機能入りの普段使い Chrome をそのまま操作できるのはかなり便利でした。SSO や 2FA を毎回突破する必要がなくなり「いつものブラウザ」で動作確認できる感覚に近いです。

まとめ

Playwright CLI v0.1.8 では attach --cdp=chrome でローカルの Chrome / Edge にそのまま接続できるようになり、ログイン済みのブラウザを使った検証やエージェント操作がしやすくなりました。Chrome DevTools MCP autoConnect とは似た仕組みですが用途が少し違うので、自動化寄りなら Playwright、デバッグ文脈の引き継ぎなら Chrome DevTools MCP と使い分ける形が良さそうです。

誰かの参考になれば幸いです。

関連リンク:

• Release v0.1.8 · microsoft/playwright-cli
• microsoft/playwright-cli README
• microsoft/playwright#40177 feat(chromium): resolve channel names in connectOverCDP
• microsoft/playwright-cli#358 feat: add remote debugging mode to playwright
• Let your Coding Agent debug your browser session with Chrome DevTools MCP
• Changes to remote debugging switches to improve security