チュートリアル 26 — OpenClaw Agent Browser Skillチュートリアル：高度なヘッドレスブラウザ自動化、動的レンダリングとログイン状態に対応（2026）

目標：Agent Browser Skillをインストールして、Accessibility Treeのスナップショットとref参照でWebページ要素を精確にコントロールし、JavaScriptレンダリングやログインが必要なページを処理します。

Agent Browser vs 内蔵ブラウザツールの違い

openclaw agent browser vs 内蔵ブラウザの違いは一つの表で説明できます：

次元	チュートリアル 04 内蔵ブラウザ	Agent Browser（本チュートリアル）
ページの種類	静的なHTMLページ	動的レンダリング（React/Vue/Angular）
ログイン状態	サポートなし	サポートあり、session/cookieを保存可能
操作方法	スクリーンショット + 座標クリック	Accessibility Tree + ref参照
操作精度	中程度、座標のずれリスクあり	高い、DOM要素を直接参照
待機戦略	固定遅延	スマート待機（ネットワーク空き/要素の出現）
適したシナリオ	静的コンテンツの素早い取得	フォーム送信、ログイン後の操作、SPAアプリ

openclaw で動的レンダリングページをJavaScript経由で取得が失敗する場合や、ログインのシミュレーションが必要な場合は、チュートリアル 04 から本チュートリアルのAgent Browserにアップグレードする必要があります。

コアの概念：Accessibility Treeとは何か？

agent browser accessibility tree 操作チュートリアルの基礎はなぜスクリーンショットを使わないかを理解することです。

スクリーンショット方式の問題点：AIはスクリーンショット内の各要素の座標を識別する必要があり、少しスクロールしたりページがズームされるだけで座標がずれてクリックが失敗します。

Accessibility Tree（アクセシビリティツリー） はブラウザが支援技術（スクリーンリーダーなど）のために管理する構造化されたページの説明で、各要素の以下の情報を含みます：

役割（button、input、link、heading…）
テキストコンテンツ
一意の ref 識別子
状態（可視、無効、選択済み…）

例の断片：

[ref=e23] button "ログイン" (enabled)
[ref=e24] input type="text" placeholder="メール" value=""
[ref=e25] input type="password" placeholder="パスワード" value=""
[ref=e26] checkbox "ログイン状態を保持" (unchecked)

refがあると、クリック操作は click ref=e23 になり、ページがどのようにズームされても失敗しません。これがAgent Browserがスクリーンショットよりも精確な理由です。

ステップ1：依存関係のインストール（Playwright）

Agent Browser SkillはPlaywrightのヘッドレスブラウザに依存しています：

npm install -g playwright
npx playwright install chromium

インストールの確認：

npx playwright --version
# バージョン番号が出力されます。例：1.41.0

Puppeteerに慣れている場合は、こちらも使えます：

npm install -g puppeteer

Skillはインストール済みのブラウザドライバーを自動検出します。

ステップ2：Skillのインストール

/install @matrixy/agent-browser-clawdbot

確認：

pnpm openclaw skills list
# リストにagent-browser-clawdbotが表示されるはずです

ステップ3：基本的な使い方——ナビゲーションとページ構造の取得

openclaw ヘッドレスブラウザで動的レンダリングページを取得するの基本的なフロー：

Agent Browserで https://example.com を開いて、ページの構造のスナップショットを取得してください

底層での実行：

/browser navigate https://example.com
/browser snapshot

返される結果の例（Accessibility Treeの断片）：

[ref=e1]  heading "Example Domain" level=1
[ref=e2]  paragraph "This domain is for use in illustrative examples…"
[ref=e3]  link "More information…" href="https://www.iana.org/domains/example"

チュートリアル 04 と異なり、これはスクリーンショットではなく構造化されたテキストで、AIは任意の要素を精確に特定できます。

ステップ4：精確なクリック（ref参照を使用）

スナップショットを取得した後、座標ではなくref参照で要素を操作します：

ページの「詳細情報」リンクをクリックしてください

OpenClawが対応する [ref=e3] を見つけて実行します：

/browser click ref=e3

フォームの入力（組み合わせ操作）：

検索ボックスに「OpenClawチュートリアル」を入力して、検索ボタンをクリックしてください

同等の実行：

/browser type ref=e12 text="OpenClawチュートリアル"
/browser click ref=e15

これが agent browser accessibility tree 操作チュートリアルのコア——すべての操作はrefに基づき、座標に依存しません。

ステップ5：ログインの処理（sessionの保存）

openclaw ヘッドレスブラウザでログインをシミュレートする標準的なフロー：

Agent Browserで https://app.example.com にログインしてください。
アカウント：user@example.com、パスワード：mypassword、
ログイン成功後にsessionを保存してください

OpenClawの実行ステップ：

/browser navigate https://app.example.com/login
/browser snapshot
# メール入力ボックス [ref=e24] とパスワードボックス [ref=e25] を見つける
/browser type ref=e24 text="user@example.com"
/browser type ref=e25 text="mypassword"
/browser click ref=e23  # ログインボタン
/browser save-session --name "example-app"

sessionを保存した後、次回同じWebサイトを操作する際に直接再利用できます：

/browser load-session --name "example-app"
/browser navigate https://app.example.com/dashboard

ステップ6：動的レンダリングページの待機戦略

openclaw でJavaScriptレンダリングが必要なWebサイトを自動化する際の最もよくある問題は「コンテンツが読み込まれる前にスクリーンショット/スナップショットを取る」ことです。Agent Browserは複数の待機戦略を提供します：

ネットワークリクエストの完了を待つ（API駆動のSPAに適切）：

/browser navigate https://app.example.com/data-table --wait-for network-idle

特定の要素の出現を待つ（非同期で読み込まれるコンテンツに適切）：

/browser wait-for-element --text "データ読み込み完了"
/browser wait-for-element --ref-role "table"

固定遅延（フォールバック手段）：

/browser wait 2000

ステップ7：実践——フォームの自動入力と送信

openclaw ヘッドレスブラウザでフォームを送信する完全な例：

Agent Browserで https://forms.example.com/contact を開き、
以下の情報を入力して送信してください：
- 氏名：田中太郎
- メール：tanaka@company.com
- メッセージ：御社のエンタープライズ協力プランについて詳しく知りたいです。営業担当者にご連絡いただけますか。

OpenClawの実行プロセス：

/browser navigate https://forms.example.com/contact
/browser snapshot
# フォームフィールドのrefを識別する

/browser type ref=e10 text="田中太郎"
/browser type ref=e11 text="tanaka@company.com"
/browser type ref=e12 text="御社のエンタープライズ協力プランについて詳しく知りたいです。営業担当者にご連絡いただけますか。"
/browser click ref=e20  # 送信ボタン

/browser wait-for-element --text "送信成功"
/browser snapshot  # 送信結果を確認

よくある質問

OpenClaw Agent BrowserとチュートリアルHour 04のブラウザ自動化の違いは何ですか？

チュートリアル 04 の内蔵ブラウザツールはスクリーンショットと座標操作をベースにしており、静的Webページのコンテンツを素早く取得するのに適しています。設定がシンプルですぐに使えます。Agent BrowserはPlaywrightを使ってヘッドレスChromeを動かし、スクリーンショットではなくAccessibility Treeでページ構造を理解し、JavaScriptレンダリングの動的ページ、ログイン状態の保持、cookieの再利用をサポートし、操作精度が高いです。静的Webページを読み取るだけならチュートリアル 04 で十分です；ログイン、フォーム入力、SPAアプリの操作が必要な場合にのみAgent Browserが必要です。

Agent Browser Skillはログインが必要なWebサイトを処理できますか？

できます。Agent Browserは完全なログインフローをサポートします：ログインページへのナビゲーション → アカウントとパスワードの入力 → 送信 → sessionの保存。保存されたsessionにはcookieとlocalStorageのデータが含まれ、次回同じWebサイトを操作する際に直接読み込み、再ログインは不要です。Sessionはローカルの ~/.openclaw/sessions/ ディレクトリに暗号化されて保存され、クラウドにはアップロードされません。注意：一部のWebサイトは自動化ブラウザの特徴を検出します（Bot Detection）。そのようなWebサイトに遭遇した場合はSkillの設定でステルスモードを有効にすることができます。

Accessibility Treeとは何ですか？なぜスクリーンショットより優れているのですか？

Accessibility Treeはブラウザがスクリーンリーダーなどの支援ツールのために管理するページ構造ツリーで、各UI要素に一意のref識別子、役割タイプ、テキストコンテンツがあります。スクリーンショットより優れている理由は3つあります：第一に、ref参照はページのスクロール、ズームの影響を受けず、操作の安定性が座標より格段に高い；第二に、テキストコンテンツはAIが直接理解できるため、OCRが不要；第三に、ページ内で隠れていたり未レンダリングの要素の状態も取得でき、読み込み状況の判断に便利。簡単に言うと、スクリーンショットはAIに「ページがどのように見えるか」を伝え、Accessibility Treeは「ページにどんな要素があり、各要素は何か」を伝えます。

インストール時にChrome単体をインストールする必要がありますか？

システムのChrome単体のインストールは不要です。npx playwright install chromium を実行すると、Playwrightがシステムのブラウザとは完全に隔離した独立したChromiumバイナリファイル（約150 MB）をダウンロードし、日常使用しているChromeには影響しません。システムにすでにChromeがインストールされていて再利用したい場合は、Agent Browser Skillの設定で executablePath をローカルのChromeのパスに指定できますが、通常はその必要はありません。

次のステップ

チュートリアル一覧に戻る — すべてのOpenClawチュートリアルを確認する
チュートリアル 25 — API Gatewayで100以上のSaaSサービスをゼロ設定で接続する