Agent Browser

Playwrightとagent-browser

Accessibility Treeを基盤きばんとしたAI向けむけブラウザぶらうざ自動じどう化か

（30分ふん発表はっぴょう用ようスライドすらいど＋解説かいせつ）

⸻

はじめに（背景はいけい）

スライドすらいど内容ないよう
・　ブラウザぶらうざ自動じどう化かの変遷へんせん
・　テストてすと用途ようとからAI Agent用途ようとへ

解説かいせつ（話すはなす内容ないよう）

本日ほんじつは、Playwrightを中心ちゅうしんに、最近さいきん注目ちゅうもくされているagent-browserまで含めてふくめて、ブラウザぶらうざ自動じどう化かがどのように進化しんかしてきたかを紹介しょうかいします。従来じゅうらいはE2Eテストが主しゅ目的もくてきでしたが、現在げんざいはAI Agentがブラウザぶらうざを操作そうさするという新しいあたらしい用途ようとが出てでてきています。

⸻

従来じゅうらいのブラウザぶらうざ自動じどう化か

スライドすらいど内容ないよう
・　Selenium / WebDriver
・　CSS Selector / XPath中心ちゅうしん

解説かいせつ

従来じゅうらいの自動じどう化かは、Seleniumに代表だいひょうされるようにDOM構造こうぞうを前提ぜんていとし、CSSセレクタやXPathで要素ようそを特定とくていする方式ほうしきでした。この方法ほうほうは強力ですきょうりょくですが、DOM変更へんこうに弱くよわく、メンテナンスめんてなんすコストこすとが高いたかいという課題かだいがありました。

⸻

Playwrightとは

スライドすらいど内容ないよう
・　Microsoft主導しゅどう
・　Chromium / Firefox / WebKit対応たいおう
・　自動じどう待機たいき・高速こうそく

解説かいせつ

PlaywrightはMicrosoftが主導しゅどうするモダンなもだんなブラウザぶらうざ自動じどう化かツールつーるです。クロスくろすブラウザぶらうざ対応たいおう、自動じどう待機たいき、優れたすぐれたデバッグ機能きのうなどを備えそなえ、Seleniumの課題かだいを多くおおく解決かいけつしています。

⸻

Playwrightの強つよみ

スライドすらいど内容ないよう
・　Locator API
・　安定あんていしたテストてすと

// Locator API の使用しよう例れい（人ひとが書くかくテストてすと）

const emailInput = page.locator('input[type="email"]');
await emailInput.fill('test@example.com');

const continueButton = page.locator('button:has-text("Continue")');
await continueButton.click();

※ Locator API は「操作そうさを安定あんていさせるための抽象ちゅうしょう」であり、
ページぺーじの状態じょうたいを理解りかいするための snapshot とは目的もくてきが異なりことなります。

解説かいせつ

PlaywrightのLocator APIは、単なるたんなるDOM検索けんさくではなく、要素ようそが操作そうさ可能にかのうになるまで自動じどうで待機たいきします。テストてすとを書くかく人ひとが「どの要素ようそを操作そうさしたいか」を明示めいじし、その操作そうさを確実にかくじつに成功せいこうさせるための仕組みしくみです。これによりテストてすとのフレーク性せいが大幅におおはばに低減ていげんします。

⸻

RustとPlaywright

スライドすらいど内容ないよう
・　Rust bindingsの登場とうじょう
・　playwright-rs

解説かいせつ

Playwright自体じたいはNode.jsが中心ちゅうしんですが、近年きんねんはRustから利用りようするためのplaywright-rsのようなバインディングも登場とうじょうしています。Rustプロジェクトぷろじぇくと内ないでE2Eテストを完結かんけつできる点てんが特徴とくちょうです。

⸻

Rust + Playwrightの位置づけいちづけ

スライドすらいど内容ないよう
・　非公式ひこうしきバインディング
・　Playwright Serverを利用りよう

解説かいせつ

RustのPlaywrightバインディングは、内部ないぶ的にてきにはNode.jsのPlaywright Serverを呼びよび出してだしています。つまりPlaywrightの能力のうりょくをそのままRustから使えるつかえる構成こうせいです。

⸻

新しいあたらしい課題かだい：AI Agent

スライドすらいど内容ないよう
・　LLMがブラウザぶらうざを操作そうさ
・　DOMは複雑ふくざつすぎる

解説かいせつ

LLMがブラウザぶらうざを操作そうさする場合ばあい、DOM構造こうぞうやCSSセレクタは情報じょうほう量りょうが多おおすぎます。AIにとっては「どこをクリックくりっくすればいいか」を判断はんだんするのが難しいむずかしいという問題もんだいが出てでてきました。

⸻

Accessibility Treeとは

スライドすらいど内容ないよう
・　ブラウザぶらうざ内部ないぶの語義ごぎ構造こうぞう
・　role / name / state

解説かいせつ

Accessibility Treeは、スクリーンすくりーんリーダーりーだーなどのためにブラウザぶらうざが内部ないぶで持ってもっている語義ごぎ的なてきなツリーつりー構造こうぞうです。ボタンぼたん、テキストてきすとボックスぼっくすといった人間にんげん向けむけの意味いみが明確にめいかくに表現ひょうげんされています。

⸻

DOMとAccessibility Treeの違いちがい

スライドすらいど内容ないよう
・　DOM：構造こうぞう中心ちゅうしん
・　A11y Tree：意味いみ中心ちゅうしん

解説かいせつ

DOMはレイアウトれいあうとや実装じっそうの都合つごうが反映はんえいされますが、Accessibility Treeは人間にんげんが理解りかいしやすい意味いみに最適さいてき化かされています。AIにとってはこちらの方ほうが扱いあつかいやすい情報じょうほうです。

⸻

Playwright と Accessibility Tree（API例れい）

スライドすらいど内容ないよう
・　Playwright は A11y Snapshot を取得しゅとく可能かのう

const snapshot = await page.accessibility.snapshot();
console.log(snapshot);

実行じっこう結果けっか例れい（抜粋ばっすい）

{
    "role": "WebArea",
    "name": "Miro | Log in",
    "children": [
        {
            "role": "heading",
            "name": "Log in to Miro"
        },
        {
            "role": "textbox",
            "name": "Email"
        },
        {
            "role": "button",
            "name": "Continue"
        },
        {
            "role": "button",
            "name": "Continue with Google"
        }
    ]
}

解説かいせつ

Playwright はブラウザぶらうざ内部ないぶの Accessibility Tree を直接ちょくせつ取得しゅとくできます。

⸻

しかし問題もんだい点てん

スライドすらいど内容ないよう
・　情報じょうほう量りょうが多いおおい
・　AI向けむけではない

解説かいせつ

ただし、このままでは情報じょうほう量りょうが多くおおく、AI が扱うあつかうには前ぜん処理しょりが必要ですひつようです。Playwrightが返すかえすAccessibility Treeは忠実ですちゅうじつですが、そのままでは情報じょうほう量りょうが多くおおく、AIが直接ちょくせつ扱うあつかうには不向きですふむきです。ここに新しいあたらしい抽象ちゅうしょう化かの余地よちがあります。

⸻

agent-browserとは

スライドすらいど内容ないよう
・　Vercel Labs
・　AI Agent向けむけCLI

解説かいせつ

agent-browserはVercel Labsが開発かいはつした、AI Agent向けむけのブラウザぶらうざ操作そうさCLIです。Playwrightの上うえに構築こうちくされていますが、目的もくてきが明確にめいかくに異なりことなります。

⸻

Snapshot + Refモデルもでる（具体ぐたい例れい＋実行じっこう結果けっか）

スライドすらいど内容ないよう
・　Accessibility Tree から生成せいせい
・　可か操作そうさ要素ようそのみ抽出ちゅうしゅつ
・　安定あんていした Ref（1, 2…）

1	agent-browser snapshot

実行じっこう結果けっか例れい

@e1 heading "Log in to Miro"
@e2 textbox "Email"
@e3 button "Continue"
@e4 button "Continue with Google"

解説かいせつ

この出力しゅつりょくは agent-browser が Accessibility Tree を取得しゅとくし、可か操作そうさ要素ようそだけを抽出ちゅうしゅつした結果けっかです。DOM の階層かいそうや class 名めいは一切いっさい含まふくまれておらず、AI Agent はこの一覧いちらんを「現在げんざい可能なかのうな操作そうさの集合しゅうごう」として扱えあつかえます。

⸻

Token削減さくげんの効果こうか

スライドすらいど内容ないよう
・　DOM：数千token
・　Snapshot：数百token

解説かいせつ

この設計せっけいにより、LLMに渡すわたす情報じょうほう量りょうを大幅におおはばに削減さくげんできます。AIにとって非常にひじょうに重要なじゅうようなポイントぽいんとです。

⸻

CLIベースべーすの利点りてん（Markdown例れい付きつき）

スライドすらいど内容ないよう
・　コードこーど生成せいせい不要ふよう
・　コマンドこまんど指向しこう
・　LLM に最適さいてき化か

agent-browser open https://miro.com/login/
agent-browser snapshot
agent-browser fill 2 "test@example.com"
agent-browser click 3

解説かいせつ

このように、AI はコードこーどではなく「操作そうさ手順てじゅん」をそのまま列挙れっきょするだけです。Playwright スクリプトすくりぷとを生成せいせいする必要ひつようがなく、推論すいろんと実行じっこうを分離ぶんりできます。

⸻

Playwrightとの関係かんけい

スライドすらいど内容ないよう
・　代替だいたいではない
・　上位じょういレイヤー

解説かいせつ

agent-browserはPlaywrightを置き換えるおきかえるものではありません。Playwrightの能力のうりょくをAI向けむけに再さい構成こうせいした上位じょういレイヤーです。

⸻

使い分けつかいわけ指針ししん

スライドすらいど内容ないよう
・　テストてすと：Playwright
・　Agent：agent-browser

解説かいせつ

人ひとが書くかくテストてすとや厳密なげんみつな検証けんしょうにはPlaywright、AI Agentによる探索たんさく的てき操作そうさにはagent-browserが適しててきしています。

⸻

agent-browser と playwright-mcp の比較ひかく（例れい付きつき）

スライドすらいど内容ないよう
・　CLI vs MCP Server
・　操作そうさモデルもでるの違いちがい

1 2	# agent-browser snapshot -> choose @e2 -> click @e2

1 2	# playwright-mcp ToolCall("click", { role: "button", name: "Continue" })

解説かいせつ

agent-browser は ref を中心ちゅうしんとした逐次ちくじコマンドこまんど実行じっこうモデルもでるです。一方いっぽう playwright-mcp は Tool API を介してかいして構造こうぞう化かされた操作そうさを行いおこないます。統合とうごう先さきが CLI か IDE か、という違いちがいが大きなおおきな分岐ぶんき点てんです。

⸻

将来しょうらい像ぞう

スライドすらいど内容ないよう
・　AI + Browser
・　意味いみベースべーす操作そうさ

解説かいせつ

今後こんごはDOMではなく、意味いみベースべーすでブラウザぶらうざを操作そうさする流れながれが強まるつよまると考えかんがえられます。Accessibility Treeはその中心ちゅうしん技術ぎじゅつです。

⸻

デモでも例れい：Miroログインろぐいん操作そうさ（実行じっこう結果けっか比較ひかく）

スライドすらいど内容ないよう

1
2
3

# 初期状態
agent-browser open https://miro.com/login/
agent-browser snapshot

Snapshot（入力前）

@e1 heading "Log in to Miro"
@e2 textbox "Email"
@e3 button "Continue"

# 操作
agent-browser fill @e2 "test@example.com"
agent-browser click @e3
agent-browser snapshot

Snapshot（画面遷移後）

@e1 heading "Enter your password"
@e2 textbox "Password"
@e3 button "Log in"
@e4 link "Forgot your password?"

解説かいせつ

ここで重要なじゅうようなのは、操作そうさ後ごに snapshot を再さい取得しゅとくする点てんです。画面がめん遷移せんいにより可か操作そうさ要素ようその集合しゅうごうが変化へんかし、Ref の意味いみも更新こうしんされます。agent-browser では「ページぺーじが変わったらかわったら必ずかならず snapshot」を基本きほん原則げんそくとします。

⸻

まとめ

スライドすらいど内容ないよう
・　Playwrightは基盤きばん技術ぎじゅつ
・　agent-browserとplaywright-mcpは用途ようと別べつ
・　Accessibility Treeが鍵かぎ

解説かいせつ

最後のさいごのまとめです。Playwrightは依然といぜんとして強力なきょうりょくな基盤きばん技術ぎじゅつです。その上うえで、AI Agent 向けむけには agent-browser や playwright-mcp といった新しいあたらしい抽象ちゅうしょう化かが登場とうじょうしています。DOMではなく、Accessibility Tree を基盤きばんにした意味いみベースべーす操作そうさが、今後こんごのブラウザぶらうざ自動じどう化かの中心ちゅうしんになっていきます。

Agent Browser

留言