Claude Code でブラウザ操作を自動化するなら、Playwright CLI を使うとトークン消費を MCP よりも大きく抑えられるようになります。この記事では、Claude Code で同一タスクを MCP と CLI の両方で実際に実行し、/context の使用量と実行ログを採取して比較しています。
Playwright CLI とは
Playwright CLI は、Microsoft が AI コーディングエージェント向けに開発した CLI インターフェース。2026 年 1 月末に v0.0.58 がリリースされました。従来の Playwright MCP とは異なり、トークン効率を重視した設計が特徴となります。詳しくは Playwright CLI 公式リポジトリ を参照してください。
Playwright MCP とは
Playwright MCP は、MCP を通じて AI エージェントからブラウザを操作できるツールです。browser_navigate や browser_click などのツールでページ遷移や要素クリックを実行できます。
ただし、トークン消費に課題があります。接続時のツールスキーマで約 4,000 トークンに加え、browser_snapshot が返すページ状態が 1 回あたり 10k から 20k トークンに達することもあり、数ページ遷移するだけでコンテキストウィンドウの上限を超過してしまうことがあります。
Playwright MCP と CLI を比較
同一タスク（playwright.dev を開き、各言語の Locators ドキュメントをスクリーンショット撮影）を MCP と CLI の両方で実行し、トークン消費の傾向を比較します。比較軸は、セッション開始時の /context、同一操作での 1 アクションあたりレスポンス規模、auto-compact 発生有無の 3 つに揃えます。
検証環境
両方とも同じ DevContainer 環境で実行します。この環境は Chromium がプリインストールされており、ヘッドレスブラウザの動作検証に適しています。
{
"name": "Playwright Dev Container",
"image": "mcr.microsoft.com/playwright:v1.58.0-noble",
"remoteEnv": {
"PATH": "${containerEnv:PATH}:/root/.local/bin"
},
"postCreateCommand": "curl -fsSL https://claude.ai/install.sh | bash && claude --version"
}
MCP での実行
MCP サーバーを追加します。
claude mcp add --scope project --transport stdio playwright -- npx -y @playwright/mcp@latest --browser chromium --executable-path /ms-playwright/chromium-1208/chrome-linux/chrome --headless --isolated --no-sandbox
生成される .mcp.json は次のとおりです。
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest",
"--browser",
"chromium",
"--executable-path",
"/ms-playwright/chromium-1208/chrome-linux/chrome",
"--headless",
"--isolated",
"--no-sandbox"
],
"env": {}
}
}
}
MCP を追加すると、セッション開始時点で Playwright の 24 個のツール定義（3.9k トークン）を消費します。
MCP tools: 3.9k tokens (1.9%)
❯ /context
⎿ Context Usage
⛁ ⛀ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ claude-opus-4-6 · 24k/200k tokens (12%)
⛁ ⛁ ⛀ ⛀ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ Estimated usage by category
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ System prompt: 3.1k tokens (1.5%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ System tools: 16.7k tokens (8.3%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ MCP tools: 3.9k tokens (1.9%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ Skills: 61 tokens (0.0%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ Messages: 8 tokens (0.0%)
⛶ ⛶ ⛶ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛶ Free space: 143k (71.6%)
⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ Autocompact buffer: 33k tokens (16.5%)
MCP tools · /mcp
└ mcp__ide__getDiagnostics: 112 tokens
└ mcp__ide__executeCode: 183 tokens
└ mcp__playwright__browser_close: 76 tokens
└ mcp__playwright__browser_resize: 125 tokens
└ mcp__playwright__browser_console_messages: 176 tokens
└ mcp__playwright__browser_handle_dialog: 129 tokens
└ mcp__playwright__browser_evaluate: 174 tokens
└ mcp__playwright__browser_file_upload: 129 tokens
└ mcp__playwright__browser_fill_form: 279 tokens
└ mcp__playwright__browser_install: 94 tokens
└ mcp__playwright__browser_press_key: 123 tokens
└ mcp__playwright__browser_type: 228 tokens
└ mcp__playwright__browser_navigate: 101 tokens
└ mcp__playwright__browser_navigate_back: 84 tokens
└ mcp__playwright__browser_network_requests: 165 tokens
└ mcp__playwright__browser_run_code: 167 tokens
└ mcp__playwright__browser_take_screenshot: 335 tokens
└ mcp__playwright__browser_snapshot: 112 tokens
└ mcp__playwright__browser_click: 253 tokens
└ mcp__playwright__browser_drag: 212 tokens
└ mcp__playwright__browser_hover: 136 tokens
└ mcp__playwright__browser_select_option: 184 tokens
└ mcp__playwright__browser_tabs: 155 tokens
└ mcp__playwright__browser_wait_for: 153 tokens
Skills · /skills
MCP で実行すると、実行中に 17.0k ~ 19.4k トークンの警告が繰り返し出ます。これは browser_navigate がページの DOM スナップショット全体を返し、browser_screenshot が画像を Base64 エンコードして返すためです。
❯ playwright.dev を開き、locators を検索して、各言語ごとにドキュメントが用意されているか確認する
。各言語のドキュメントのスクリーンショットを撮る。
● Playwright のドキュメントサイトを開いて、Locators について調べます。
● playwright - Navigate to a URL (MCP)(url: "https://playwright.dev")
⎿ ### Ran Playwright code
````js
await page.goto('https://playwright.dev');
… +239 lines (ctrl+o to expand)
● トップページが表示されました。対応言語は TypeScript, JavaScript, Python, .NET, Java
であることがわかります。Locators のドキュメントページに直接アクセスします。
● playwright - Navigate to a URL (MCP)(url: "https://playwright.dev/docs/locators")
⎿ ⚠ Large MCP response (~17.0k tokens), this can fill up context quickly
⎿ ### Ran Playwright code
```js
await page.goto('https://playwright.dev/docs/locators');
… +1321 lines (ctrl+o to expand)
● TypeScript/JavaScript の Locators
ページが表示されました。これはデフォルト（Node.js）版です。次に、ナビゲーションバーに言語切り替え
あるか確認し、各言語のドキュメントにアクセスしてスクリーンショットを撮ります。
まず、TypeScript/JavaScript
版のスクリーンショットを撮り、同時に他の言語のページにもアクセスしていきます。
● playwright - Take a screenshot (MCP)(filename: "locators-typescript.png", type: "png")
⎿ ⚠ Large MCP response (~12.1k tokens), this can fill up context quickly
⎿ ### Result
- Screenshot of viewport
### Ran Playwright code
… +776 lines (ctrl+o to expand)
⎿ [Image]
● TypeScript/JavaScript のスクリーンショットを保存しました。次に Python 版のページに移動します。
● playwright - Navigate to a URL (MCP)(url: "https://playwright.dev/python/docs/locators")
⎿ ⚠ Large MCP response (~19.4k tokens), this can fill up context quickly
⎿ ### Ran Playwright code
```js
await page.goto('https://playwright.dev/python/docs/locators');
… +1519 lines (ctrl+o to expand)
● Python 版のドキュメントも確認できました。「Playwright for Python」というタイトルで、Python
の構文（page.get_by_role() など
snake_case）でコードサンプルが表示されています。スクリーンショットを撮ります。
● playwright - Take a screenshot (MCP)(filename: "locators-python.png", type: "png")
⎿ ⚠ Large MCP response (~12.1k tokens), this can fill up context quickly
⎿ ### Result
- Screenshot of viewport
### Ran Playwright code
… +776 lines (ctrl+o to expand)
⎿ [Image]
● Python のスクリーンショットを保存しました。次に .NET と Java のドキュメントも確認します。
● playwright - Navigate to a URL (MCP)(url: "https://playwright.dev/dotnet/docs/locators")
⎿ ⚠ Large MCP response (~17.5k tokens), this can fill up context quickly
⎿ ### Ran Playwright code
```js
await page.goto('https://playwright.dev/dotnet/docs/locators');
… +1347 lines (ctrl+o to expand)
● .NET 版も確認できました。「Playwright for .NET」というタイトルで、C#
の構文（Page.GetByRole(AriaRole.Button, new() { Name = "Sign in" }) など
PascalCase）で表示されています。スクリーンショットを撮ります。
● playwright - Take a screenshot (MCP)(filename: "locators-dotnet.png", type: "png")
⎿ ⚠ Large MCP response (~12.1k tokens), this can fill up context quickly
⎿ ### Result
- Screenshot of viewport
### Ran Playwright code
… +776 lines (ctrl+o to expand)
⎿ [Image]
● 最後に Java 版のドキュメントに移動してスクリーンショットを撮ります。
● playwright - Navigate to a URL (MCP)(url: "https://playwright.dev/java/docs/locators")
⎿ ⚠ Large MCP response (~17.4k tokens), this can fill up context quickly
⎿ ### Ran Playwright code
```js
await page.goto('https://playwright.dev/java/docs/locators');
… +1340 lines (ctrl+o to expand)
● Java 版のドキュメントも確認できました。「Playwright for Java」で、Java
の構文（page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Sign in"))
など）で表示されています。
● playwright - Take a screenshot (MCP)(filename: "locators-java.png", type: "png")
⎿ ⚠ Large MCP response (~12.1k tokens), this can fill up context quickly
⎿ ### Result
- Screenshot of viewport
### Ran Playwright code
… +776 lines (ctrl+o to expand)
⎿ [Image]
· Compacting conversation… (54s · ↑ 113 tokens)
⎿ Tip: Run /install-github-app to tag @claude right from your Github issues and PRs
MCP では途中でコンテキストが溢れ、auto-compact が発動しました。
CLI での実行
次に同じタスクを Playwright CLI で実行します。CLI はファイルシステムを活用し、スクリーンショットや DOM スナップショットをディスクに保存します。LLM にはファイルパスのみを返すため、トークン消費を抑えられます。
まず CLI をインストールし、スキルをセットアップします。
npm i -g @playwright/cli@latest
playwright-cli install
playwright-cli install --skills
playwright-cli install でワークスペースを初期化し、Chromium ブラウザをダウンロードします。--skills オプションを追加すると、.claude/skills/playwright-cli/ にスキルファイルが生成され、Claude Code から Playwright CLI を使えるようになります。SKILL.md を見てみると、playwright-cli の各種コマンドが羅列されています。Claude Code は Skill を発行すると、この文章を読みタスクを実行していきます。
実行例は次のとおりです。
# npm i -g @playwright/cli@latest
added 4 packages in 2s
1 package is looking for funding
run `npm fund` for details
# playwright-cli install
✅ Workspace initialized at `/workspaces/playwright-cli`.
Removing unused browser at /ms-playwright/chromium-1208
Removing unused browser at /ms-playwright/chromium_headless_shell-1208
Removing unused browser at /ms-playwright/webkit-2248
Downloading Chrome for Testing 145.0.7632.26 (playwright chromium v1210) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1210/chromium-linux-arm64.zip
179.6 MiB [====================] 100% 0.0s
Chrome for Testing 145.0.7632.26 (playwright chromium v1210) downloaded to /ms-playwright/chromium-1210
✅ Created default config for chromium at .playwright/cli.config.json.
# playwright-cli install --skills
✅ Workspace initialized at `/workspaces/playwright-cli`.
✅ Skills installed to `.claude/skills/playwright-cli`.
# find .claude/
.claude/
.claude/skills
.claude/skills/playwright-cli
.claude/skills/playwright-cli/references
.claude/skills/playwright-cli/references/test-generation.md
.claude/skills/playwright-cli/references/video-recording.md
.claude/skills/playwright-cli/references/running-code.md
.claude/skills/playwright-cli/references/storage-state.md
.claude/skills/playwright-cli/references/tracing.md
.claude/skills/playwright-cli/references/request-mocking.md
.claude/skills/playwright-cli/references/session-management.md
.claude/skills/playwright-cli/SKILL.md
スキルの特性上、初期状態ではフロントマターのみを読み込むため、コンテキスト消費は非常に少なくなります。初期コンテキスト使用量は次のとおりです。
❯ /context
⎿ Context Usage
⛁ ⛀ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ claude-opus-4-6 · 20k/200k tokens (10%)
⛀ ⛀ ⛀ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ Estimated usage by category
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ System prompt: 3.1k tokens (1.5%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ System tools: 16.6k tokens (8.3%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ MCP tools: 295 tokens (0.1%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ Skills: 129 tokens (0.1%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ Messages: 153 tokens (0.1%)
⛶ ⛶ ⛶ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛶ Free space: 147k (73.3%)
⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ Autocompact buffer: 33k tokens (16.5%)
MCP tools · /mcp
└ mcp__ide__getDiagnostics: 112 tokens
└ mcp__ide__executeCode: 183 tokens
Skills · /skills
Project
└ playwright-cli: 68 tokens
それでは MCP と同じタスクを実行します。
❯ playwright.dev を開き、locators を検索して、各言語ごとにドキュメントが用意されているか確認する
。各言語のドキュメントのスクリーンショットを撮る。
● I'll use the playwright-cli skill to navigate to playwright.dev, search for locators, and take
screenshots of documentation for each language.
● Skill(playwright-cli)
⎿ Successfully loaded skill · 1 tool allowed
● playwright.dev を開いて、locators のドキュメントを各言語で確認し、スクリーンショットを撮ります。
● Bash(playwright-cli open https://playwright.dev)
⎿ ### Browser `default` opened with pid 56019.
- default:
- browser-type: chromium
… +12 lines (ctrl+o to expand)
● Bash(playwright-cli snapshot)
⎿ ### Page
- Page URL: https://playwright.dev/
- Page Title: Fast and reliable end-to-end testing for modern web apps | Playwright
… +2 lines (ctrl+o to expand)
● Read 1 file (ctrl+o to expand)
● ホームページが表示されました。まず、Locators のドキュメントページに直接アクセスします。各言語のURL
パターンが分かったので、順番にアクセスしてスクリーンショットを撮ります。
● Bash(playwright-cli goto https://playwright.dev/docs/locators)
⎿ ### Ran Playwright code
```js
await page.goto('https://playwright.dev/docs/locators');
… +6 lines (ctrl+o to expand)
● Node.js 版の Locators ページが開きました。スクリーンショットを撮ります。
● Bash(playwright-cli screenshot --filename=locators-nodejs.png)
⎿ ### Result
- [Screenshot of viewport](locators-nodejs.png)
### Ran Playwright code
… +14 lines (ctrl+o to expand)
● Read 1 file (ctrl+o to expand)
● Node.js 版を確認しました。次に Python 版に移動します。
● Bash(playwright-cli goto https://playwright.dev/python/docs/locators)
⎿ ### Ran Playwright code
```js
await page.goto('https://playwright.dev/python/docs/locators');
… +6 lines (ctrl+o to expand)
● Bash(playwright-cli screenshot --filename=locators-python.png)
⎿ ### Result
- [Screenshot of viewport](locators-python.png)
### Ran Playwright code
… +14 lines (ctrl+o to expand)
● Read 1 file (ctrl+o to expand)
● Python 版も確認できました。次は Java 版です。
● Bash(playwright-cli goto https://playwright.dev/java/docs/locators)
⎿ ### Ran Playwright code
```js
await page.goto('https://playwright.dev/java/docs/locators');
… +6 lines (ctrl+o to expand)
● Bash(playwright-cli screenshot --filename=locators-java.png)
⎿ ### Result
- [Screenshot of viewport](locators-java.png)
### Ran Playwright code
… +14 lines (ctrl+o to expand)
● Read 1 file (ctrl+o to expand)
● Java 版も確認できました。最後に .NET 版です。
● Bash(playwright-cli goto https://playwright.dev/dotnet/docs/locators)
⎿ ### Ran Playwright code
```js
await page.goto('https://playwright.dev/dotnet/docs/locators');
… +6 lines (ctrl+o to expand)
● Bash(playwright-cli screenshot --filename=locators-dotnet.png)
⎿ ### Result
- [Screenshot of viewport](locators-dotnet.png)
### Ran Playwright code
… +14 lines (ctrl+o to expand)
● Read 1 file (ctrl+o to expand)
● 全4言語のスクリーンショットを撮り終えました。ブラウザを閉じます。
● Bash(playwright-cli close)
⎿ Browser 'default' closed
● 結果まとめ
Playwright の Locators ドキュメントは 4つの言語すべて で個別に用意されていることを確認しました。
言語: Node.js (TypeScript/JavaScript)
URL: playwright.dev/docs/locators
スクリーンショット: locators-nodejs.png
API スタイル: page.getByRole()
────────────────────────────────────────
言語: Python
URL: playwright.dev/python/docs/locators
スクリーンショット: locators-python.png
API スタイル: page.get_by_role()
────────────────────────────────────────
言語: Java
URL: playwright.dev/java/docs/locators
スクリーンショット: locators-java.png
API スタイル: Page.getByRole()
────────────────────────────────────────
言語: .NET
URL: playwright.dev/dotnet/docs/locators
スクリーンショット: locators-dotnet.png
API スタイル: Page.GetByRole()
各言語のドキュメントは同じ構成（Introduction → Quick Guide → Locating elements → Filtering Locators
→ Locator operators）ですが、コード例はそれぞれの言語の命名規則に合わせて記載されています（例:
Python は snake_case、.NET は PascalCase）。
✻ Worked for 56s
| 指標 | MCP | CLI |
|---|---|---|
セッション開始時の /context
|
24k/200k (12%)、MCP tools: 3.9k
|
20k/200k (10%)、MCP tools: 295
|
| 同一操作での 1 アクションあたりレスポンス規模 |
navigate で 17.0k から 19.4k 警告、take_screenshot で 12.1k 警告 |
goto / screenshot はファイル保存中心で返却は短い結果とパス、Large response 警告なし |
| セッション終盤の状態 | auto-compact 発動。最終総使用量は確定不可 | 31k/200k (16%) で完了。auto-compact 発動なし |
CLI はスクリーンショットや DOM スナップショットをディスクに保存し、必要時だけ Read で読み込むため、1 操作あたりのコンテキスト増加が小さくなります。
❯ /context
⎿ Context Usage
⛁ ⛀ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ claude-opus-4-6 · 31k/200k tokens (16%)
⛀ ⛀ ⛁ ⛁ ⛁ ⛁ ⛁ ⛁ ⛶ ⛶
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ Estimated usage by category
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ System prompt: 3.1k tokens (1.5%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ System tools: 16.6k tokens (8.3%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ MCP tools: 295 tokens (0.1%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ Skills: 129 tokens (0.1%)
⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛶ ⛁ Messages: 12.6k tokens (6.3%)
⛶ ⛶ ⛶ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛶ Free space: 134k (67.1%)
⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ ⛝ Autocompact buffer: 33k tokens (16.5%)
MCP tools · /mcp
└ mcp__ide__getDiagnostics: 112 tokens
└ mcp__ide__executeCode: 183 tokens
Skills · /skills
Project
└ playwright-cli: 68 tokens
なぜ CLI はトークン効率が良いのか
MCP は navigate や screenshot を実行すると、結果をすべて LLM のコンテキストに返します。
-
browser_navigate: アクセシビリティスナップショット全体が返る -
browser_take_screenshot: 画像バイトが Base64 で LLM へ返され、画像トークンとしてカウントされる
対して CLI は次のように動作します。
-
playwright-cli goto URL→ DOM スナップショットをディスクに保存、LLM にはファイルパスのみ返す -
playwright-cli screenshot --filename=file.png→ 画像をディスクに保存、LLM にはファイルパスのみ返す - コーディングエージェントが必要に応じて Read で読む
つまり、LLM が実際に必要としないデータはコンテキストに入りません。コーディングエージェントがファイルを読むかどうかを判断できるため、無駄なトークン消費を回避できます。
使い分けの方針
Claude Code で Playwright を使うなら CLI を使うのが良いと思います。今回の検証でも、CLI は 31k/200k で完了したのに対し、MCP は同一操作あたり 12k から 19k 規模の応答が続いて auto-compact に到達してしまいました。CLI はローカルファイル連携を前提に設計されており、トークン効率が高く、デフォルトで使用できる機能も多いです。
逆に MCP を検討すべき場合は下記のような時かなと思います。
- ファイルシステムへのアクセスが限定的な AI エージェントから使う
- MCP プロトコルの標準化されたツールセットが必要
- 独自のエージェントループを構築している