ブラウザ自動化は、現代のソフトウェア開発、テスト、データ抽出において長らく重要な要素でした。長年にわたり、Selenium、Puppeteer、そして最近ではPlaywrightといったフレームワークがこの分野を牽引してきました。これらのツールはブラウザの動作をきめ細かく制御できますが、習得に時間がかかり、メンテナンスの負担も大きいです。スクリプトはウェブサイトのUIが少し変わるだけで壊れてしまうことが多く、脆弱です。一方、スペクトルの反対側では、新しい波であるAIネイティブエージェントが自然言語を使って複雑なタスクを自動化することを約束していますが、多くの場合、信頼性、予測可能性、制御性の犠牲を伴います。
ここで登場するのが、自らを「AIブラウザ自動化フレームワーク」と称するStagehandです。これは、Playwrightのような実績のあるツールを置き換えることを目指すのではなく、それらを強化することを目的としています。StagehandはPlaywright上に構築されており、強力なAIレイヤーを注入することで、開発者が従来のコードベースの自動化と高レベルな自然言語による指示を組み合わせることを可能にします。
開発チームが最大限の生産性で協力するための統合されたオールインワンプラットフォームをお探しですか？
Apidogはあなたのすべての要望に応え、Postmanをより手頃な価格で置き換えます！
しかし、それは実際にどれほど優れているのでしょうか？コードの正確さとAIの柔軟性の間で適切なバランスを取っているのでしょうか？この詳細なレビューとチュートリアルでは、Stagehandの核となる概念を探り、実践的な例を順に見ていき、急速に進化するブラウザ自動化の世界におけるその位置付けを評価します。
なぜStagehandなのか？古い方法の問題点
「どのように」を掘り下げる前に、「なぜ」を理解することが重要です。従来のブラウザ自動化は、基本的にブラウザに正確に何をすべきかを指示することです。Playwrightでの典型的なスクリプトは次のようになります：
// Find an element by its CSS selector and click it
await page.locator('button[data-testid="login-button"]').click();
// Find an input field and type into it
await page.locator('input[name="username"]').fill('my-user');
このアプローチは正確で信頼性があります...壊れるまでは。開発者がdata-testidを変更したり、フォームのHTML構造をリファクタリングしたりした瞬間に、スクリプトは壊れます。大規模なテストスイートや複雑なウェブスクレイピングプロジェクトでこれらのセレクターを維持することは、面倒で骨の折れる作業になります。
Stagehandチームが提供するデモをご覧ください：
高レベルのAIエージェントは、実装の詳細を抽象化することでこれを解決しようとします。エージェントに「私の認証情報でログインしてください」と伝えるだけで、必要な手順を把握します。これは魔法のように聞こえますが、本番環境では予測不能になる可能性があります。エージェントは見慣れないUIで失敗したり、非効率な経路をたどったり、指示を誤解したりして、一貫性のない結果を招くことがあります。
Stagehandは中間的な道を提供することを目指しています。時には正確に何をしたいかを知っている（例: await page.goto('https://github.com')）場合と、他の時には「どのように」をAIに任せたい（例: await page.act('click on the stagehand repo')）場合があることを認識しています。このハイブリッドアプローチがStagehandの核となる価値提案です。
Stagehandの核となる柱
Stagehandは、PlaywrightのPageオブジェクトを3つの主要なメソッド、act、extract、observeで強化します。また、より複雑な多段階タスクを処理するための強力なagentも導入しています。
act: 自然言語によるアクションの実行
actメソッドは、Stagehandのインタラクティブ機能の中心です。平易な英語の指示を受け取り、ページ上で対応するアクションを実行します。
// Instead of brittle selectors...
await page.act("Click the sign in button");
await page.act("Type 'hello world' into the search input");
舞台裏では、AIモデルがウェブページの現在の状態（DOM）を分析し、最も関連性の高いインタラクティブな要素（ボタン、リンク、入力フィールド）を特定し、指示をクリックやキー入力などの特定のアクションにマッピングします。これにより、スクリプトはマイナーなUI変更に対してより耐性を持つようになります。人間が「サインインボタン」を識別できる限り、たとえその基盤となるコードが変更されていても、Stagehandもおそらく識別できます。
actを効果的に使用するための鍵は、指示をアトミックかつ具体的に保つことです。「ピザを注文して」のような指示は、actには高レベルすぎます。代わりに、それを一連のアトミックなステップに分解します：「ペパロニピザをクリック」、「「ラージ」サイズを選択」、「カートに追加」、「チェックアウトに進む」。
observeとキャッシング：AIに予測可能性を加える
AIを使用する際の一般的な懸念は予測不可能性です。モデルは毎回正しい要素を選択するのでしょうか？Stagehandは、observeメソッドでこれに対処します。observeはアクションを実行しません。指示に一致する潜在的なアクションのリストを返します。
const [action] = await page.observe("Click the sign in button");
返されるactionオブジェクトは、Stagehandが実行しようとしている操作のシリアライズ可能な記述子です。それを検査したり、ログに記録したり、そして最も重要なのは、直接actにフィードバックしたりできます。
const [action] = await page.observe("Click the sign in button");
await page.act(action);
この2段階プロセスは強力な「プレビュー」機能を提供します。しかし、その本当の強みはキャッシングにあります。繰り返しのタスクの場合、アクションを一度observeし、結果を保存して、後続の実行で再利用できます。
const instruction = "Click the sign in button";
let cachedAction = await getFromCache(instruction);
if (cachedAction) {
await page.act(cachedAction);
} else {
const [observedAction] = await page.observe(instruction);
await saveToCache(instruction, observedAction);
await page.act(observedAction);
}
このキャッシング戦略にはいくつかの利点があります：
- 信頼性：毎回全く同じアクションが実行されることを保証し、AIモデルの変動性を取り除きます。
- 速度：AI呼び出しの必要性を回避し、自動化を大幅に高速化します。
- コスト：基盤となる言語モデルへのAPI呼び出しを節約し、運用コストを削減します。
extract: インテリジェントなデータ抽出
従来のツールでウェブページからデータをスクレイピングするには、データを特定するためにCSSまたはXPathセレクターを記述する必要があります。これはUIへの別の形の脆い結合です。Stagehandのextractメソッドは、抽出したいものを自然言語で指定できるようにすることで、このプロセスに革命をもたらします。
オプションでZodスキーマを提供して、出力が正しく構造化されていることを保証できます。Zodは人気のTypeScriptファーストのスキーマ宣言および検証ライブラリであり、ここでのその統合は状況を一変させます。
GitHubのプルリクエストページにいて、作成者のユーザー名とPRのタイトルを取得したいと想像してください。extractを使えば、これは次のように簡単です：
import { z } from "zod";
// ... inside an async function
const { author, title } = await page.extract({
instruction: "extract the author and title of the PR",
schema: z.object({
author: z.string().describe("The username of the PR author"),
title: z.string().describe("The title of the PR"),
}),
});
console.log(`PR: "${title}" by ${author}`);
StagehandのAIはページを読み取り、コンテキストを理解し、要求されたデータでZodスキーマを埋めます。これは、いつでも変更される可能性のある#pull_request_header .authorのようなセレクターに依存するよりもはるかに堅牢です。適切なZodスキーマを定義することで、オブジェクトの配列を含む複雑なネストされたデータも抽出できます。
agent: 自律的な多段階タスク向け
actが単一のアトミックなアクション向けであるのに対し、agentはより大きく複雑な目標をオーケストレーションするためのものです。エージェントは高レベルの目的を受け取り、それを独自のactおよびextract呼び出しのシーケンスに分解できます。
// Navigate to a website
await stagehand.page.goto("https://www.google.com");
const agent = stagehand.agent({
provider: "openai",
model: "gpt-4o", // Or an Anthropic model
});
// Execute the agent
await agent.execute(
"Find the official website for the Stagehand framework and tell me who developed it."
);
エージェントは、自動化スクリプトに「ヒューマン・イン・ザ・ループ」体験を提供します。探索的なタスクや、すべてのステップを事前に定義することが非現実的な複雑で見慣れないウェブサイトのナビゲーションに最適です。OpenAIとAnthropicの両方の一流モデルをサポートしており、開発者は最小限のセットアップで最先端のAI機能にアクセスできます。
はじめに：Stagehandチームを使うミニチュートリアル
ここでAnirudhがcreate-browser-appを使ってStagehandプロジェクトを作成するデモを見る：
Stagehandプロジェクトを開始する最も簡単な方法は、コマンドラインツールを使用することです。
npx create-browser-app my-stagehand-project
cd my-stagehand-project
これにより、必要なすべての依存関係、構成ファイル、およびサンプルスクリプトを含む新しいプロジェクトがスキャフォールドされます。LLMプロバイダー（OpenAIやAnthropicなど）のAPIキーと、オプションでBrowserbaseキー（クラウドベースのブラウザ実行用）を.envファイルに追加する必要があります。
基本的なスクリプトは次のようになります：
import { Stagehand } from "@browserbasehq/stagehand";
import StagehandConfig from "./stagehand.config"; // Your project's config
import { z } from "zod";
async function main() {
// 1. Initialize Stagehand
const stagehand = new Stagehand(StagehandConfig);
await stagehand.init();
const page = stagehand.page;
try {
// 2. Navigate to a page
await page.goto("https://github.com/trending");
// 3. Perform actions
await page.act("Click on the first repository in the list");
// 4. Extract data
const { description } = await page.extract({
instruction: "Extract the repository description",
schema: z.object({
description: z.string(),
}),
});
console.log("リポジトリの説明:", description);
} finally {
// 5. Clean up
await stagehand.close();
}
}
main();
この簡単な例は、初期化、ナビゲーション、アクション、抽出、クリーンアップというライフサイクル全体を示しています。クリーンで読みやすく、GitHubのトレンドページのUI変更に対して驚くほど耐性があります。
評価：どれほど優れているか？
その機能と哲学を深く掘り下げた結果、Stagehandが単なる別の自動化ツールではないことは明らかです。これは、従来のコードに依存した自動化と、AIエージェントの新しい世界との間のギャップをうまく埋める、思慮深く強力なフレームワークです。
良い点：
- 開発者体験：Playwright上に構築されているため、多くの開発者にとって馴染みのあるAPIを提供します。
actとextractの追加により、自動化スクリプトの記述がより速く、より直感的になります。 - 堅牢性：スクリプトははるかに脆くなくなり、UI変更に対してより耐性があり、メンテナンスの負担を大幅に軽減します。
- 制御と予測可能性：
observeとキャッシングメカニズムは、AIの予測不可能性の問題に対する優れた解決策であり、本番環境での使用を可能にします。 - パワーと柔軟性：アトミックな
act呼び出し、インテリジェントなextractスキーマ、高レベルなagentの組み合わせにより、ほぼすべてのブラウザ自動化タスクに適した幅広いツールが提供されます。 - 構造化データ抽出：
extractにおけるZodとの統合は際立った機能であり、データスクレイピングをこれまで以上に簡単かつ信頼性の高いものにします。
潜在的な欠点：
- LLMへの依存：自動化の品質は、基盤となるAIモデルの性能に依存します。今日のモデルは非常に優れていますが、完璧ではありません。
- コスト：強力なモデルへのAPI呼び出しは無料ではありません。キャッシング戦略がこれを軽減するのに役立ちますが、大量に使用するとコストが発生する可能性があります。
- 学習曲線：多くのタスクで生のPlaywrightよりも単純ですが、開発者は依然として
act、observe、extractの核となる概念とそれぞれの使い方を理解する必要があります。「アトミックなアクション」対「高レベルの目標」という観点で考えることは新しいスキルです。
結論
では、Stagehandはどれほど優れているのでしょうか？それは非常に優れています。魔法の弾丸ではありませんが、ブラウザ自動化における大きな飛躍を意味します。開発者がより少ない労力で、より堅牢で、よりインテリジェントで、より能力の高い自動化を構築することを可能にします。精度が必要な場合は低レベルのコードを記述し、柔軟性が必要な場合は高レベルのAIを使用するという選択肢を提供することで、Stagehandは現代の開発者にとって実用的で強力なツールキットを提供します。
セレクターの更新にうんざりしているQAエンジニア、ウェブスクレイピングのより良い方法を探しているデータサイエンティスト、または複雑なブラウザベースのワークフローを構築している開発者であれば、Stagehandは一見の価値があるだけでなく、新しいお気に入りのツールになるかもしれません。それはその約束を成功裏に果たしており、「AIブラウザ自動化フレームワーク」の称号の主要な候補となっています。
開発チームが最大限の生産性で協力するための統合されたオールインワンプラットフォームをお探しですか？
Apidogはあなたのすべての要望に応え、Postmanをより手頃な価格で置き換えます！