Magnitudeは脆いセレクターの代わりにビジョンでブラウザを自動化する
PlaywrightやSeleniumでエンドツーエンドテストやパーサーを書いたことがある人なら、この痛苦は周知の事実です。フロントエンド開発者がビルドを更新し、Tailwindがクラスを再生成し、レイアウトが10ピクセル横にずれると、半分以上のシナリオがElementNotFoundエラーでクラッシュします。標準的な言語モデルを上に重ねても、モダンなSPAアプリケーションの肥大化したDOMツリーや、マークアップノードがまったくないキャンバスにはすぐに躓いてしまいます。
オープンソースプロジェクトMagnitudeのクリエイターたちは、異なるアプローチを取ることを決意しました。LLMに生のHTMLをメガバイト単位で食べさせたり、ボタン上に数字付きのマーカーを描画したりする代わりに、直接的なコンピュータービジョンに基づいてツールを構築しました。
なぜセレクターやオーバーレイマーカーはもう機能しないのか
最新のブラウザ用AIエージェントの多くはSet-of-Marksアプローチを使用しています。スクリプトはページ上のすべてのインタラクティブ要素を見つけ、明るい色のボックスと数字を周囲に描画し、スクリーンショットを撮って、モデルにdesired buttonの番号を選択させます。
シンプルなランディングページでは、この手は機能します。しかし、複雑な管理パネル、インタラクティブなマップ、Figmaのようなエディターを開いてみてください。まず、マークアップスクリプトがlag始めます。次に、要素が互いに重なり合い、数字がテキストの上にまで侵入し、ドロップダウンメニューが補助DOMが挿入された瞬間に閉じてしまいます。
MagnitudeはビジュアルグラウンデッドLLMを使用します。ニューラルネットワークは人が見るのと同じ方法でクリーンなページのスクリーンショットを確認し、クリックするための正確なピクセル座標をすぐにoutputします。これにより、ページ構造を処理する必要がなくなり、WebVoyagerベンチマークで94%の成功率を達成しています。
エージェントコードの仕組み
コードでは、Magnitudeは標準的な非同期TypeScriptライブラリのようになります。自然言語でトップレベルのコマンドを発行したり、低レベルのアクションを明示的に指定したりできます。
ボードタスクを操作する基本的な例を示します：
import { agent } from 'magnitude';
import { z } from 'zod';
// Агент сам найдет нужные поля и заполнит форму
await agent.act('Create a task', {
data: {
title: 'Use Magnitude',
description: 'Run "npx create-magnitude-app" and follow the instructions',
},
});
// Низкоуровневое действие с пониманием контекста интерфейса
await agent.act('Drag "Use Magnitude" to the top of the in progress column');
データ解析機能には別途称賛が必要です。多くの場合、ボタンをクリックするだけでなく、ページから構造化された情報を抽出する必要があります。MagnitudeにはZodバリデーションスキーマを受け取るextractメソッドが含まれています。
// Извлечение данных прямо по схеме с дополнительным анализом
const tasks = await agent.extract(
'List in progress tasks',
z.array(z.object({
title: z.string(),
description: z.string(),
difficulty: z.number().describe('Rate the difficulty between 1-5')
})),
);
difficultyフィールドに注目してください。エージェントはマークアップから生テキストを単にpullするのではなく、フィールドの説明を通じてリクエストした場合、スケールを使用してタスクの複雑さをリアルタイムで評価することもできます。
組み込みテストランナー
柔軟な自動化に加えて、作者たちはWebアプリケーション testing用の готовыйランナーを作成しました。既存のレポジトリにインストールできます：
npm i --save-dev magnitude-test
npx magnitude init
このコマンドは、configとテスト例を含むtests/magnitudeフォルダを作成します。標準的なテストとは異なり、ここでのアサーションはビジュアルチェックに基づいています。プレーンテキストでシナリオを書き、エージェントがステップを経てインターフェースが正しくresponseことを確認します。
ゼロから自動化用のクリーンなプロジェクトが必要な場合は、環境をさらに 빠르게スピンアップできます：
npx create-magnitude-app
モデルの要件と隠れたニュアンス
このアプローチの主なトレードオフは、計算リソースとAPIコストです。小規模なオープンモデルでは、正しい座標を確実にhitすることはできません。
開発者は現在、画像内の空間的方向性を他のどのモデルよりも適切に処理するClaude Sonnet 4の使用を推奨しています。ローカルデプロイメントやプライベート環境用のオープンモデルオプションが必要な場合は、720億パラメータを持つQwen-2.5VLがサポートされています。ただし、このようなモデルをローカルで実行するには、複数のハイエンドグラフィックスカードを持つ本格的なハードウェアが必要です。
第二に覚えておくべきことは、速度です。各エージェントステップでは、スクリーンショットをモデルに送信し、responseを待つ必要があります。これはアクションごとに数秒かかるため、ツールはロードテストには向きません。現在、作者たちはネイティブアクションキャッシングシステムに取り組んでいるため、繰り返しシナリオがLLMへの定常的なリクエストなしで決定論的に実行されます。
プロジェクトがすでに得意なこと
- オープンAPIのないサービスの自動化。APIが有料または存在しないクローズドなオンラインバンキングパネルやサードパーティCRMシステムからレポートをエクスポートする必要がある場合。
- 複雑なUIのエンドツーエンドテスト。プロジェクトに多くのドラッグ＆ドロップ、ネストされたiframe、またはセレクターサポートが悪夢になるキャンバスコンポーネントがある場合。
- スマートデータ収集。複雑なレイアウト、無限スクロール、動的コンテンツ読み込みを持つカタログのパーシング。
Magnitudeは普遍的な「魔法のボタン」になろうとはせず、代わりに開発者に型バリデーションとすべてのステップにわたる制御を備えたクリーンなTypeScript APIを提供することでポイントを獲得しています。リデザイン後に失敗するテストを修正することに疲れているなら、確かに試す価値があります。
関連プロジェクト