Claude Codeでブラウザ操作するならPlaywright CLI + skills一択だった

皆さん、こんにちは。普段 Claude Code で色んな自動化を書いているのですが、最近 Playwright MCP を卒業して、Playwright CLI + 公式 skills に乗り換えました。

結論から言うと、トークン消費は減る・普段使い Chrome のログイン状態を引き継げる・スキルの書きやすさも段違いで、もう MCP には戻れないです。今回は何にハマって、どう変えたのかをまとめます。

そもそも Playwright MCP で何が辛かったか

Playwright MCP は @playwright/mcp を Claude Code の MCP サーバーとして登録するタイプ。browser_navigate / browser_click / browser_snapshot みたいな専用 tool がエージェントから使える仕組みです。

悪くはないんですが、運用してて引っかかる点がいくつかあって:

• tool スキーマでコンテキストを食う。これ系の MCP は tool 定義が長いので、会話の最初から数千トークン持っていかれる
• 普段使い Chrome に繋ぐのが面倒。--extension モード＋専用拡張という組み合わせでは繋がるものの、ブリッジタブを誤操作で吹っ飛ばすと接続死ぬ。仕様が微妙
• ログイン情報を毎回入れ直す必要がある。サイト側でBot検知のリスクもあるし、単純に手間

「もっと軽くて、普通のブラウザのログインをそのまま使える仕組みないの？」と思っていたら、良いのが出てた。

Playwright CLI v0.1.8 の attach --cdp=chrome

公式のPlaywright CLIという別パッケージがあって、この v0.1.8 でついに「普段使い Chrome にアタッチする」機能が来ました。

playwright-cli attach --cdp=chrome

これだけで、自分が開いてるChromeに接続できる。仕組みは Chrome 144+ の新しい権限フローを使ってて:

1. Chrome で chrome://inspect/#remote-debugging を開く
2. 「Allow remote debugging for this browser instance」を ON
3. CLI から attach すると Chrome 側で承認ダイアログが出る → 許可

これで、自分のログイン済みセッションをそのまま Claude に操作させる運用ができます。Cookieを持ってるからGoogleもTwitterもnoteもログイン不要で作業開始。

ちなみに承認は Chrome を閉じるまで維持される ので、1回だけクリックすれば、その日の残りは完全にノークリック運用です。

playwright-cli install --skills で Claude 用スキルが降ってくる

さらに良いのが、CLI に agent 最適化された skill ファイルを自動配置する機能 があること:

playwright-cli install --skills

これを叩くと ~/.claude/skills/playwright-cli/SKILL.md と references/ が展開されて、Claude Code が自動で読み込める skill になります。

MCP と違って、これは toolスキーマを常駐させない んですよね。skill は「必要な時に読む Markdown ドキュメント」扱いなので、使わないセッションでは一切コンテキストを消費しない。これが本記事タイトル通り「トークン効率の差」。Anthropic 公式ドキュメントにも「大きなtoolスキーマがコンテキストに乗らない分だけ効率的」と明記されてます。

乗り換え手順（5 分で完了）

1. Playwright MCP を削除

~/.claude.json の mcpServers.playwright エントリを消すだけ。（Claude Codeに頼めばOK）

2. Playwright CLI をグローバルインストール

npm install -g @playwright/cli

3. Skills を展開

playwright-cli install --skills

ホームディレクトリで叩くと ~/.claude/skills/playwright-cli/ に配置されます。Claude Code を再起動すると skill 一覧に playwright-cli が出てくる。

4. Chrome 側のトグル ON

chrome://inspect/#remote-debugging で「Allow remote debugging」にチェック。これは プロファイル毎に記憶される ので 1 回だけ。

既存のスキルを CLI ベースに書き換える

自分の場合、/note-new とか /gas-new みたいな自作スキルが browser_navigate 系 MCP tool を前提に書かれてたので、ここを playwright-cli コマンドに置換する作業が発生しました。

変換表はだいたいこんな感じ:

• browser_navigate(url) → playwright-cli goto <url>
• browser_snapshot → playwright-cli snapshot
• browser_click(ref) → playwright-cli click <ref>
• browser_fill(ref, val) → playwright-cli fill <ref> "<val>"
• browser_press_key(key) → playwright-cli press <key>
• browser_evaluate(js) → playwright-cli eval "<js>"

各スキルの冒頭には既存 attach セッションを再利用する分岐を入れておくと、連続実行時に承認ダイアログが出なくて楽です:

if ! playwright-cli list 2>&1 | grep -q "browser-type: chrome (attached)"; then
  playwright-cli attach --cdp=chrome
fi

ついでに 自動ログイン用の credentials.json 読み取りを削除 できます。普段使い Chrome にログイン済み前提にしてしまえば、パスワードをスクリプトから触らなくていい。セキュリティ的にも精神衛生的にも良い。

実際に試して感じたメリット

乗り換え後、Claude 経由で note.com の下書き投稿を走らせてみたんですが、体感が全然違う:

• 速い — クリーンブラウザ起動がなくて即座にアタッチ
• 静か — 日常の Chrome のタブがそのまま見える (タブ切替は手動なのでむしろ安全)
• 事故が少ない — 自分がログイン済みの状態を Claude が使うので、認証エラーで止まる心配なし
• ログ出力が綺麗 — CLI の標準出力だけなので、何をしたか後から追いやすい

注意点

いいことばかり書いたけど、気を付けるポイントもあります:

• 権限スコープが広い — attach した Chrome は Claude から完全に制御可能。保存データ・Cookie・任意 URL への遷移も含む。信用できるタスクだけに使う。
• 機密情報が乗ってるタブを開いた状態は避ける — 銀行とかパスワード管理ツールのタブは閉じておく。
• スキルの書き換えは要確認。既存の MCP ベースのスキルは一度棚卸しして確認したほうが安心です。

まとめ

Playwright を Claude から使うなら、今のデフォルト選択肢は CLI + skills。MCP のほうが筋が通る用途もまだ残ってるとは思うんですが、日常の自動化用途としては CLI 側に完全に軍配が上がりました。

トークン消費が減ってるのも地味に嬉しくて、朝から晩まで Claude Code 起動しっぱなしにしてる身からすると、このベースライン削減は効きます。

同じく Playwright MCP で消耗してる人、ぜひ乗り換えてみてください。5分で終わります。

技術スタック

• @playwright/cli v0.1.8
• Claude Code (CLI 版)
• Chrome 147+ (remote debugging 許可フロー対応)