AIコーディングエージェントにブラウザを操作させると、トークンが想定外に大量消費されることがある。

この記事では、2026年初頭に登場した @playwright/cli を使ってAIエージェントがブラウザを操作する方法と、従来のPlaywright MCPと何が変わったかを解説します。

この記事でわかること：

  • Playwright MCPのトークン消費が多い理由
  • @playwright/cli のセットアップ手順
  • 主要なコマンドと実際の使用例
  • MCPとCLIの使い分けの基準

Playwright MCPとは何か

Playwright MCP | Playwright
playwright.dev

Playwright MCPは、Model Context Protocol（MCP）サーバーを通じてLLMがウェブページを操作できるようにするツールです。アクセシビリティツリーをスナップショットとしてAIのコンテキストに渡すことで、視覚モデルを使わずにナビゲーション、クリック、入力、スクリーンショット取得を自然言語で指示できます。

VS Code、Cursor、Windsurf、Claude Desktop、Claude Codeなど多くのMCPクライアントに対応しています。Claude Codeへのセットアップは1コマンドです。

claude mcp add playwright npx @playwright/mcp@latest

設定後に「playwright mcpを使ってexample.comを開いて」と伝えると、Claudeが実際のChromiumウィンドウを操作します。認証が必要なページには --headed モードで表示させて、自分でログインしてからAIに続きを任せることもできます。

MCPのどこが課題だったか

トークン消費の多さです。Playwrightチームの計測では、1つのブラウザ操作タスクで約114,000トークンを消費します。ページのアクセシビリティスナップショット全体をそのままモデルのコンテキストに流し込む設計のため、大規模なコードベースと並行して使うコーディングエージェントには負荷が大きい。

この問題を解決するために登場したのが @playwright/cli です。

@playwright/cli の設計

Introduction | Playwright
playwright.dev

MCPとの違いは、スナップショットの扱いにあります。MCPはスナップショットをAIのコンテキストに直接返しますが、CLIはYAMLファイルとしてディスクに保存します。AIはファイルパスだけを受け取り、必要なときだけ読みに行く設計です。

この変更により、同じタスクのトークン消費が約27,000まで落ちます。MCPの約114,000と比べると4分の1以下です。

他の設計上の特徴は以下のとおりです。

  • デーモンアーキテクチャ — ブラウザプロセスを永続させることで、コマンドごとの起動コストがない
  • Refベースの操作 — アクセシビリティスナップショットに要素refが含まれ、次のコマンドで確実に参照できる
  • クロスブラウザ対応 — Chrome、Firefox、WebKit、Edge に対応
  • セッション管理 — 複数の独立したブラウザインスタンスを状態ごとに管理できる

デフォルトはヘッドレスモードで動作するため、CI環境でも追加設定なしで使えます。

セットアップ

npm install -g @playwright/cli

グローバルインストールすると playwright-cli コマンドが利用できるようになります。Claude CodeやGitHub Copilotなどのコーディングエージェントは、インストール済みのスキルを自動で検出して利用します。

コマンドと使用例

TodoMVCでタスクを追加してチェックするまでの操作は以下です。

playwright-cli open https://demo.playwright.dev/todomvc --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli screenshot

各コマンドの実行後、現在のページ状態とスナップショットファイルのパスが返ります。スナップショットにはアクセシビリティツリーと次のコマンドで使う要素のrefが含まれています。

主なコマンドは用途別に整理されています。

ナビゲーション: open、goto、go-back、go-forward、reload

入力操作: click、fill、type、select、check、uncheck、hover、drag

状態確認: snapshot、screenshot、pdf、eval

タブ管理: tab-list、tab-new、tab-select、tab-close

キーボード・マウス: press、keydown、keyup、mousemove、mousedown

スクレイピングやフォーム入力の自動化であれば、goto でページに移動し、snapshot で構造を把握してから fill と click を組み合わせる流れが基本です。eval を使えば任意のJavaScriptも実行できます。

MCPとCLIの使い分け

項目 Playwright CLI Playwright MCP
トークン消費 少ない（約27,000） 多い（約114,000）
動作方式 シェルコマンド MCPツール呼び出し
デフォルトモード ヘッドレス ヘッドあり
向いている用途 コーディングエージェント 探索的自動化

大規模なコードベースを扱いながらブラウザも操作する場面ではCLIが適しています。コンテキストウィンドウに余裕が生まれるため、コードの読み込みとブラウザ操作を同じセッションで続けやすくなります。

一方、対話的な確認が必要な作業や、ブラウザの見た目を見ながら探索的に動かしたい場面はMCPが向いています。Playwrightチームは両方を用途で使い分ける構成を推奨しており、テストスイートと事前検証にMCP、日常の開発作業にCLIという組み合わせが現実的です。

まとめ

@playwright/cli はスナップショットをファイルに逃がすアーキテクチャにより、Playwright MCPの約4分の1のトークンでブラウザ自動化を実現します。コーディングエージェントが大きなコードベースを扱いながらブラウザも操作する用途では、コンテキスト消費の削減が直接的な効率改善につながります。

セットアップは npm install -g @playwright/cli の1行で完了し、Claude CodeやGitHub Copilotからすぐに使い始められます。