Staff Blog

株式会社エドムインクリメントのスタッフブログ

agent-browser vs Playwright CLI ── AI時代のブラウザ自動化CLIを比較してみた


Claude CodeやCodexのようなAIコーディングエージェントが、コードを書くだけでなくブラウザまで操作する時代になってきた。Search Consoleのデータを取ってきて、axe-coreでアクセシビリティを検証して、SaaSにログインして情報を引っ張ってくる。そういう「ブラウザを目として使う」操作を、AIエージェントにどうやらせるか。

そのバックエンドとなるCLIツールが2つ出揃っている。MicrosoftのPlaywright陣営からは「Playwright CLI」、Vercel Labsからは「agent-browser」。どちらもAIコーディングエージェントから呼ばれることを前提に設計されたCLIだ。

コンセプトは同じ。snapshotでページの構造をツリー形式で取得し、AIが画面の意味構造を読んで次のアクションを判断する。CSSセレクタを調べてコードを書く必要がない。

# どちらもほぼ同じコマンド体系
agent-browser open https://example.com
agent-browser snapshot
agent-browser click @e3

playwright-cli open https://example.com
playwright-cli snapshot
playwright-cli click e3

コマンドが同じなら、何が違うのか。Claude CodeのAgent機能やMCP連携で使うことを想定しつつ、同じタスクを両方でやって比較した。

テスト環境

– macOS (Apple Silicon)

– agent-browser 0.24.0(Rust製、Chrome for Testing使用)

– Playwright CLI 0.1.5(Node.js製、システムのGoogle Chromeを使用)

– axe-core 4.10.3

– いずれもデフォルト設定で比較

– 想定ユースケース: AIコーディングエージェントがCLI経由でブラウザを操作するワークフロー

なお、agent-browserはChrome for Testingをバンドルして使い、Playwright CLIはシステムにインストールされたGoogle Chromeをheadlessモードで使う。ブラウザ自体はどちらも正規Chrome系だ。

Round 1: bot対策サイト(X)

bot対策が厳しいことで知られるX(旧Twitter)で、@AnthropicAI のポストを取得する。

agent-browserPlaywright CLI
結果ポスト4件取得ポスト6件取得
判定成功成功

どちらも成功。 参考までに、素のPlaywright(Pythonスクリプトでセレクタ指定する方式)ではarticle要素が0件だった。headless Chromiumのブラウザ指紋がbot判定された可能性があるが、原因は特定できていない。CLI版はどちらもsnapshotでポストデータをツリー構造として読み取れた。

到達可否ではどちらも成功。ただし取得件数ではPlaywright CLIが6件でagent-browserの4件を上回った。

Round 2: 構造化データの抽出

テーブルや定義リストで情報が整理されたDBサイトから、名称・金額・条件・期限をJSON形式で抽出する。

agent-browserPlaywright CLI
eval実行0.18秒1.68秒
結果同一JSON同一JSON

同じデータが取れるが、agent-browserの方が9倍速い。速度差の原因はRound 4で詳しく分析する。

Round 3: アクセシビリティテスト(axe-core)

とあるコーポレートサイトにaxe-coreを流してWCAG準拠チェックを行った。

agent-browserPlaywright CLI
axe-core実行0.45秒2.87秒
violations4件4件
passes23件23件

検出結果は完全一致。

深刻度内容該当要素数
criticalARIAロールの子要素不足1
criticalARIAロールの親要素不足4
seriousコントラスト比不足11
seriousリスト要素の意味的な問題4

結果は同じだが、実行速度はagent-browserが6倍速い。axe-coreの実行自体はブラウザ内で同じ時間がかかるので、差はCLI側のオーバーヘッドだ。

Round 4: 速度ベンチマーク

同一サイトで6つの操作を計測した。Round 2・3とは独立した計測である。

操作agent-browserPlaywright CLI倍率
open(コールドスタート)3.0秒3.6秒1.2x
snapshot0.19秒0.67秒3.5x
goto0.22秒0.67秒3x
snapshot(2回目)0.19秒0.61秒3x
eval0.18秒1.63秒9x
screenshot0.25秒0.70秒3x

コールドスタート(ブラウザ起動+初回ナビゲーション)はほぼ同じ。だが、ブラウザ起動後の操作ではagent-browserが全項目で3〜9倍速い。

速度差の原因

どちらもバックグラウンドにデーモンプロセスが常駐し、ブラウザとの接続を維持している点は同じだ。差が出るのはCLIフロントエンドの部分と考えられる。

agent-browserはRustネイティブバイナリがUnix socket経由でデーモンに直接通信する。Playwright CLIはコマンドごとにNode.jsプロセスを起動し、デーモンにsocket接続して結果を受け取り、snapshotをYAMLファイルに書き出す。このNode.js起動+ファイルI/Oのオーバーヘッドが速度差の主因と推測される。

ただし、ブラウザチャネルや出力モードの設定によっても差は変わり得るので、この数値はあくまでデフォルト設定での結果だ。

AIコーディングエージェントがsnapshotを取って→判断して→操作して→またsnapshotを取る、というループを回す場合、この差は蓄積する。10回のやり取りでagent-browserなら2秒、Playwright CLIなら7秒。MCPサーバー経由で毎回フルレスポンスを返すよりCLI直叩きの方がトークン効率がいいのと同じ話で、ループの回数が増えるほど差が効いてくる。

Round 5: コンテキストサイズ(トークン効率)

AIエージェントにとって、snapshotのサイズはトークン消費量の目安になる。同じページのsnapshotを比較した(CLIの標準出力全文での比較)。

サイトagent-browserPlaywright CLI
コーポレートサイト161行 / 6,463字184行 / 8,691字+35%
X(@AnthropicAI)418行 / 29,504字496行 / 36,129字+22%
Google Search Console263行 / 11,841字410行 / 22,306字+88%

シンプルなサイトでは22〜35%の差だが、Google Search Consoleのようなリッチなアプリケーションでは文字数ベースで約2倍の差が開いた。Playwright CLIはsnapshotにURL情報、コンソールログ、yaml形式のマーカーなど付加情報が含まれる。1回なら気にならないが、AIコーディングエージェントがsnapshotを繰り返し取りながら操作するワークフローでは、LLMのコンテキストウィンドウの消費量に差が出てくる。

なお、ここで比較しているのは文字数であり、実際のトークン数はトークナイザの仕様によって異なる。

Round 6: 認証が必要なSaaS(Search Console)

最後のテストは一番実用的なケース。AIコーディングエージェントが自律的にSaaSからデータを取得するシナリオだ。Google Search Consoleにログインして、検索パフォーマンスデータを取得する。

ログイン保持の方法が違う

agent-browser: --profileオプションでブラウザのプロファイルディレクトリを丸ごと永続化する。初回だけheadedモードでGoogleにログインすれば、以降はプロファイルを指定するだけでいい。

# 初回: headedで手動ログイン
agent-browser --headed --profile /tmp/gsc-profile open "https://accounts.google.com"

# 以降: profileを指定するだけ
agent-browser --profile /tmp/gsc-profile open "https://search.google.com/search-console"
agent-browser snapshot

Playwright CLI: --profile--persistentオプションが用意されている。今回の検証では--profile単体でGoogleのセッション保持を試みたが安定しなかった。--persistentフラグとの併用で改善する可能性があるが、未検証だ。代わりにstate-save/state-loadコマンドでCookieとlocalStorageをJSONファイルにエクスポート・インポートすることで認証を保持できた。

# 初回: headedでログイン → 状態を保存
playwright-cli open "https://accounts.google.com" --headed
# (手動ログイン後)
playwright-cli state-save google-state.json
playwright-cli close

# 以降: 3コマンド必要
playwright-cli open
playwright-cli state-load google-state.json
playwright-cli goto "https://search.google.com/search-console"

注意: profileディレクトリやstate-saveファイルは認証情報を含みます。.gitignoreに追加し、リポジトリにコミットしないでください。

パフォーマンス

操作agent-browserPlaywright CLI倍率
open+認証+遷移2.93秒(1コマンド)6.24秒(3コマンド)2.1x
snapshot0.24秒0.65秒2.7x

agent-browserは--profile付きのopenコマンド1つでログイン済みの状態でSearch Consoleに直接到達する。今回の検証ではPlaywright CLIはopen→state-load→gotoの3コマンドが必要だった。ただし--persistentフラグとの組み合わせで手順が簡略化できる可能性はある。

取得データ

どちらもSearch Consoleの検索パフォーマンスから、合計クリック数・表示回数・平均CTR・平均掲載順位、クエリ別の内訳まで同一のデータを取得できた。snapshotにテーブル構造として含まれるので、追加のスクレイピングコードは不要だ。

まとめ

観点agent-browserPlaywright CLI
操作速度3〜9倍速いCLIフロントエンドの起動コストあり
コンテキスト効率22〜88%軽い(文字数ベース)メタ情報が多い
bot対策サイト成功(4件)成功(6件)
axe-core実行0.45秒2.87秒
SaaSログイン保持--profile一発state-save/loadで対応(--persistentは未検証)
SaaS操作速度2.93秒6.24秒
エコシステムVercel LabsMicrosoft / Playwright公式
アーキテクチャRust(デーモン+CLI共にネイティブ)Node.js(デーモン常駐、CLIは毎回起動)

デフォルト設定での比較では、速度とコンテキスト効率でagent-browserが上回った。どちらもデーモン常駐型のアーキテクチャだが、CLIフロントエンドの実装言語(Rust vs Node.js)の差が速度に表れていると考えられる。

一方、Playwright CLIはPlaywright公式であり、コード生成(codegen)、trace viewer連携、--browserオプションによるFirefox・WebKitを含むマルチブラウザ対応など、agent-browserにはないエコシステムの厚みがある。テスト基盤としての拡張性を重視するならPlaywright CLIの方が適している場面もあるだろう。

個人的には、Claude CodeやCodexのようなAIコーディングエージェントに「ブラウザで何か調べてきて」と頼む用途ではagent-browser、Playwrightベースのテスト基盤やCI/CDパイプラインと組み合わせる用途ではPlaywright CLIが向いていると感じた。

AIコーディングエージェントがコードを書くだけでなく、ブラウザを「目」として使い、Webの情報を自律的に取得・操作する。そういう未来がCLI一つで手に入る時代になった。

keyboard_arrow_left 一覧に戻る

OTHERS

その他の人気記事


WEBディレクターの必要スキルのひとつ!「文字で伝える力」を磨く勉強

こんにちは。ディレクターのnakanishiです。 今回はディレクター業務をする中で、わたしがぶつか...


「デザイン=筋トレ」?日々のアイデアインプットについてご紹介します!

こんにちは、エドムインクリメントのデザインチームメンバーのSakuraiです。 今回はデザイン制作と...