2026/01/25
Playwright CLI と agent-browser のどちらがトークン消費量が少ないか比較検証してみた
設計思想の違いがもたらすコストへの影響。MicrosoftとVercelの最新ツールを徹底比較。
ブラウザ操作AIツールの進化
AIエージェントによるブラウザ操作技術は、トークン消費量の課題を解決するために急速に進化しています。
Playwright MCP公開
Microsoftが公開。スナップショット全体を送信するためトークン消費量が膨大になる課題があった。
agent-browser公開
Vercelが公開。独自の参照方式Refsを採用しトークン削減を実現。Playwright MCP比で約70%削減。
Playwright CLI公開
Microsoftが新たに公開。スナップショットをファイル出力してGrep検索する設計思想を採用。
設計思想の決定的違い
agent-browserは全要素をコンソールに出力するが、Playwright CLIはファイル化とGrep検索で必要な情報だけを抽出する。
agent-browser
スナップショット取得時に全要素をコンソールに直接出力するためコンテキストが増加する。
Playwright CLI
ファイルパスのみを返却しAIがGrep検索で必要な部分だけを取得するため無駄がない。
Grep検索による最適化
ファイル出力後に検索をかけることで、AIエージェントに渡すトークン量を最小限に抑えることができる。
Playwright CLIの処理フロー
Browser
Webページ
Snapshot
page.ymlへ出力
Agent
ファイルパス受取
Grep検索
必要な行のみ抽出
LLM
最小トークン送信
検証：Yahoo!ニュース取得
両ツールで全く同じ操作を行い、トークン消費量の差を検証しました。
サイトへアクセス
Yahoo! JAPANのトップページを開く
スナップショット
ページの状態を取得しニュースリンクを探す
記事をクリック
特定のrefを指定してニュース記事へ遷移
全文取得
evalコマンドでarticleタグ内のテキストを取得
検証結果：トークン削減効果
同じ操作を行った結果、Playwright CLIの方が圧倒的に効率的であることが判明しました。
トークン消費量の比較詳細
Playwright CLIはコンテキスト量を15%に抑え、コスト効率の高い運用を可能にします。
Playwright CLI
ファイルベースのアプローチで効率化
agent-browser
全要素出力により消費増
コスト効率の良いAI操作へ
Playwright CLIを活用して、トークンコストを抑えながら高度なブラウザ操作を実現しましょう。
導入のポイント
Playwright CLI導入
npm install -g @playwright/mcp@latest で今すぐインストール
Grep活用の意識
全量取得せずファイル検索を活用するようエージェントに指示する
ポイント: OSSの開発競争によりツールは日々進化しています。最新の設計思想を取り入れ、AIエージェントの運用コストを最適化していきましょう。
発展途上の技術を攻略していこう
sui Tech Blog