はじめに

Claude Code でブラウザを操作するとき、地味につらいことが3つありました。

1. MCP の設定が面倒。playwright MCP や chrome-devtools MCP を使うには、それぞれ接続設定を書かないといけない。複数の AI コーディングエージェント（Claude Code、Codex、Bob など）を使い分けていると、エージェントごとにも設定が必要になって管理が大変になる。
2. 認証セッションが引き継げない。ログインが必要なサービスは、毎回ログインし直しになる。
3. ログイン情報を保存したい場合は、ポート 9222 でブラウザを別途起動することになる。--remote-debugging-port=9222 をつけて特定のプロファイルで Chrome を起動するか、常駐させておく必要があり、その分セットアップが増える。

playwright-cli v0.1.8 で普段使いの Chrome にそのまま attach できるようになりました という記事を読んで試してみたら、この3つがまとめて解消されました。

自分の中で運用が固まってきたので整理しておきます。

やりたいこと

playwright-cli attach --cdp=chrome で、今開いている Chrome にそのまま接続する。

これだけです。別のブラウザを起動する必要も、MCP サーバーを設定する必要もなく、Claude Code の Bash ツールから直接操作できるようになります。

セットアップ

1. インストール

volta を使っている場合：

volta install @playwright/cli

npm でもOKです：

npm install -g @playwright/cli

確認：

playwright-cli --version
# 0.1.13

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

Chrome で chrome://inspect/#remote-debugging を開いて、"Allow remote debugging for this browser instance" にチェックを入れます。

Chrome を再起動するとリセットされるので、接続できないときはここを確認するといいです。

3. attach して接続確認

playwright-cli attach --cdp=chrome

成功すると、今開いているタブ一覧が出てきます。

### Session `chrome` created, attached to `chrome`.
Run commands with: playwright-cli -s=chrome <command>

### Open tabs
- 0: (current) [GitHub - some-repo](https://github.com/...)
- 1: [Google 検索](https://www.google.com/...)
- 2: [ログインが必要なサービス](https://example.com/dashboard)

ログインが必要なページにも、ログインし直しなしでアクセスできます。これが一番うれしいところです。

-s=chrome はセッション名の指定です。attach --cdp=chrome で作られたセッションが chrome という名前で管理されるので、以降のコマンドはこれをつけて実行します。

以降は -s=chrome をつけてコマンドを実行します（実際には Claude が選んで実行してくれるので、個々のコマンドを覚える必要はありません）：

# 現在のページのスナップショット（スクリーンショットより情報量が多くて速い）
playwright-cli -s=chrome snapshot

# タブを切り替える
playwright-cli -s=chrome tab-select 2

# URL に移動
playwright-cli -s=chrome goto https://example.com

# 要素をクリック（スナップショットで取得した ref を使う）
playwright-cli -s=chrome click e15

playwright-cli install --skills で Claude に操作を任せる

playwright-cli には、Claude Code 向けの SKILL.md を生成する機能があります。

playwright-cli install --skills

実行すると .claude/skills/playwright-cli/SKILL.md が生成されます。

Claude は必要なコマンドを自分で調べて実行してくれますが、SKILL.md に明示しておくと、毎回 --help を見に行かなくても「このページの〇〇ボタンを押して」と指示するだけで、スナップショットを取って要素を特定してクリックする、という流れをやってくれます。

ただし、SKILL.md のクイックスタートは playwright-cli open（新規ブラウザ起動）から始まっています。attach --cdp=chrome で既存 Chrome を使うという方針は SKILL.md には書かれていないので、次の CLAUDE.md の設定はセットで必要です。

CLAUDE.md に書いておくと毎回 attach しなくて済む

CLAUDE.md にブラウザ操作の方針を書いておくと、Claude が自動で判断して使ってくれます：

## ブラウザ操作

- ブラウザ操作は `playwright-cli` CLI を使う（Bash 経由で実行）
- 普段使いの Chrome に接続する場合は `playwright-cli attach --cdp=chrome` でセッションを作成し、
  以降は `playwright-cli -s=chrome <command>` で操作する
- 接続できない場合は Chrome で `chrome://inspect/#remote-debugging` を開いてリモートデバッグを有効化してもらう
- ページの内容を確認する時は、スクリーンショットより先に `playwright-cli snapshot` を試す

MCP と比べてどうか

使ってみた感触として、普段使いの Chrome を操作したい場面では playwright-cli の方が向いていそうです。

ただ、MCP の方が合う場面もあると思います。クリーンな状態で動かしたいテストや、CI 上での自動化みたいな用途では、別インスタンスで制御できる MCP の方がやりやすそうです。

自分は今のところ、普段の調査や確認作業は playwright-cli、ちゃんとした自動化は MCP、という方向で考えています。MCP の設定は残したまま、デフォルトだけ切り替えた状態にしています。

おわりに

playwright-cli に切り替えてから、「ブラウザ操作のたびに認証し直す」がなくなってかなり楽になりました。MCP の管理コストも下がっています。

まだ MCP と完全に置き換えるかは決めていなくて、しばらくは両方を手元に置きながら使い分けていくつもりです。

間違いや「こっちのほうがいい」があれば教えてください。

参考

playwright-cli の npm パッケージ。

https://www.npmjs.com/package/@playwright/cli

playwright-cli v0.1.8 の紹介記事。attach --cdp=chrome の追加と背景が書かれています。

https://dev.classmethod.jp/articles/playwright-cli-attach-local-chrome/