browser-automation について
Midscene のコマンドラインを使い、視覚的な指示でウェブページを操作する自動化スキルです。ヘッドレス Chrome の起動に加え、CDP または Midscene 拡張機能経由で既存ブラウザーに接続できます。
主な機能
- 01自然言語によるブラウザー操作
- 02状態を保つヘッドレス Chrome セッション
- 03CDP による既存 Chrome への接続
- 04拡張機能経由の Bridge 接続
- 05スクリーンショットとファイルアップロード
活用シーン
- 01ウェブページの閲覧とデータ抽出
- 02ウェブ UI フローのテスト
- 03ログイン済みセッションでのページ操作
- 04ページ経由のテストファイル送信
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ web-infra-dev/ midscene-skills --skill browser-automationインストール後、Claude Code で/browser-automationを入力して読み込まれたか確認します。
詳細
ブラウザーの自動化
重要なルール — 違反するとワークフローが正常に動作しなくなります:
- midscene コマンドをバックグラウンドで実行しないでください。 各コマンドは同期的に実行し、次の操作を決める前に出力(特にスクリーンショット)を確認してください。バックグラウンド実行では、スクリーンショットの確認・分析・操作のループが崩れます。
- midscene コマンドは一度に1つだけ実行してください。 前のコマンドが完了するまで待ち、スクリーンショットを確認してから次の操作を決めてください。複数のコマンドを連結して実行しないでください。
- 各コマンドが完了するのに十分な時間を確保してください。 Midscene のコマンドでは AI 推論と画面操作を行うため、一般的なシェルコマンドより時間がかかることがあります。通常、コマンドの実行には約1分かかり、複雑な
actコマンドではさらに時間がかかる場合があります。- 終了前に必ずタスクの結果を報告してください。 自動化タスクを完了したら、見つかった重要なデータ、完了した操作、撮影したスクリーンショット、関連する調査結果などを含めて、必ずユーザーに結果を積極的に要約してください。最後の自動化手順の後に何も報告せず終了しないでください。ユーザーは1回のやり取りで完全な回答を期待しています。
npx -y @midscene/web@1 を使用してウェブブラウジングを自動化します。デフォルトでは、Puppeteer 経由でヘッドレス Chrome を起動し、CLI の呼び出しをまたいで状態を保持します。コマンド間でセッションが失われることはありません。既存の Chrome ブラウザーに接続する CDP モードと Bridge モードにも対応しています。
act でできること
ブラウザー内で1回の act 呼び出しを行うと、Midscene はクリック、右クリック、ダブルクリック、ホバー、テキスト入力や消去、キーの押下、スクロール、ドラッグ、長押し、および現在表示されている内容に基づいた複数ステップのページ操作を実行できます。タッチ入力が有効な場合は、タッチ操作向けのページでスワイプやピンチのような操作も実行できます。
使用するタイミング
このスキルには3つのモードがあります。ユーザーの意図に応じて選択してください。
モード選択ガイド
| モード | 使用する場面 | 動作 |
|---|---|---|
| Puppeteer(デフォルト) | ユーザーが URL の閲覧、データのスクレイピング、UI のテストを希望しており、自分のブラウザーを使う必要がない場合 | ユーザーのブラウザーとは別に、新しいヘッドレス Chrome を起動します |
| CDP モード | ユーザーが「Chrome に接続して」「自分のブラウザーを操作して」「CDP」「リモートデバッグ」と言う場合、または既存のブラウザーを操作したい場合。タスクでログイン状態が暗黙的に必要となる場合(例:「注文を確認して」「ダッシュボードを開いて」「アカウントを見て」)にも使用します | DevTools Protocol 経由でユーザーの Chrome に接続します。リモートデバッグを有効にする必要があります(chrome://inspect > 「Allow remote debugging」)。拡張機能は不要です |
| Bridge モード | ユーザーが明示的に「bridge」や「extension」に言及した場合、または Midscene Chrome Extension をインストールしていて、それを使いたい場合 | Midscene Chrome Extension 経由でユーザーの Chrome に接続します |
CDP と Bridge の比較:どちらもログインセッションを保持したまま、ユーザーの実際の Chrome を操作します。CDP では Chrome の設定を切り替えるだけで済みますが、Bridge では Chrome Extension のインストールが必要です。ユーザーが指定しない場合は、前提条件が少ないCDP モードを優先してください。
事前チェック:利用可能な CDP ターゲットを検出する
CDP モードを使用する前に、簡単な事前チェックを実行し、Chrome のリモートデバッグポートに接続できることを確認します。これにより、ユーザーがリモートデバッグを有効にしていない場合に、タイムアウトまで長時間待つことを避けられます。
# CDP precheck (port 9222, 2s timeout) — returns "101" if Chrome is listening for DevTools
curl -s --max-time 2 -o /dev/null -w "%{http_code}" -H "Upgrade: websocket" -H "Connection: Upgrade" -H "Sec-WebSocket-Version: 13" -H "Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==" http://127.0.0.1:9222/devtools/browser
事前チェックの結果の使い方:
101が返る → CDP モードが利用可能です。--cdpを使用します- 失敗する(curl の終了コードが 7、または HTTP
000) → Chrome でリモートデバッグが有効になっていません。Chrome を--remote-debugging-port=9222を指定して起動し、2~3 秒待ってから事前チェックを再実行します。それでも失敗する場合は、Puppeteer モードに切り替えます(Midscene Chrome Extension がインストールされている場合は Bridge モードも使用できます)。
Bridge モードには使用可能な事前チェックがありません。 ポート 3766 が関係しますが、ブリッジサーバーは CLI によって起動されます(
npx ... --bridge connectが 3766 を開きます)。拡張機能は接続するクライアントです。CLI の実行前に 3766 を確認しても、常に何も返りません。--bridge connectを直接実行してください。最初のログ行(waiting for bridge to connect...→one client connected)で、拡張機能が接続されたかどうかを確認できます。
前提条件
Midscene には、視覚的なグラウンディング能力に優れたモデルが必要です。以下の環境変数を設定する必要があります。システム環境変数として設定するか、現在の作業ディレクトリにある .env ファイルに設定してください(Midscene は .env を自動的に読み込みます)。
MIDSCENE_MODEL_API_KEY="your-api-key"
MIDSCENE_MODEL_NAME="model-name"
MIDSCENE_MODEL_BASE_URL="https://..."
MIDSCENE_MODEL_FAMILY="family-identifier"
例:Gemini(Gemini-3-Flash)
MIDSCENE_MODEL_API_KEY="your-google-api-key"
MIDSCENE_MODEL_NAME="gemini-3-flash"
MIDSCENE_MODEL_BASE_URL="https://generativelanguage.googleapis.com/v1beta/openai/"
MIDSCENE_MODEL_FAMILY="gemini"
例:Qwen 3.5
MIDSCENE_MODEL_API_KEY="your-aliyun-api-key"
MIDSCENE_MODEL_NAME="qwen3.5-plus"
MIDSCENE_MODEL_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
MIDSCENE_MODEL_FAMILY="qwen3.5"
MIDSCENE_MODEL_REASONING_ENABLED="false"
# If using OpenRouter, set:
# MIDSCENE_MODEL_API_KEY="your-openrouter-api-key"
# MIDSCENE_MODEL_NAME="qwen/qwen3.5-plus"
# MIDSCENE_MODEL_BASE_URL="https://openrouter.ai/api/v1"
例:Doubao Seed 2.0 Lite
MIDSCENE_MODEL_API_KEY="your-doubao-api-key"
MIDSCENE_MODEL_NAME="doubao-seed-2-0-lite"
MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
MIDSCENE_MODEL_FAMILY="doubao-seed"
よく使用されるモデル:Doubao Seed 2.0 Lite、Qwen 3.5、Zhipu GLM-4.6V、Gemini-3-Pro、Gemini-3-Flash。
モデルが設定されていない場合は、ユーザーに設定を依頼してください。対応プロバイダーについては、モデルの設定を参照してください。
CDP モード(既存のブラウザーに接続)
CDP モードを使用すると、ユーザーが使用中の既存の Chrome ブラウザーを操作できます。CDP のデフォルトエンドポイントは ws://127.0.0.1:9222/devtools/browser です(ポート 9222 は Chrome の標準リモートデバッグポートです)。ユーザーが別のポートを指定した場合は、9222 をそのポートに置き換えます。
すべてのコマンドに --cdp <ws-endpoint> を追加します。
npx -y @midscene/web@1 connect --cdp ws://127.0.0.1:9222/devtools/browser --url https://example.com
npx -y @midscene/web@1 act --cdp ws://127.0.0.1:9222/devtools/browser --prompt "click the button"
npx -y @midscene/web@1 take_screenshot --cdp ws://127.0.0.1:9222/devtools/browser
npx -y @midscene/web@1 disconnect --cdp ws://127.0.0.1:9222/devtools/browser
CDP モードでのカスタム HTTP ヘッダー
PPE 環境へのリクエストのルーティングなど、CDP モードでカスタムリクエストヘッダーが必要な場合は、各ヘッダーを個別の --extra-http-header 'Name:Value' オプションで渡します。複数のヘッダーを送信するには、このオプションを繰り返します。ユーザーから指定されたヘッダー名と値をそのまま使用し、環境名や認証値を推測しないでください。
npx -y @midscene/web@1 connect \
--cdp ws://127.0.0.1:9222/devtools/browser \
--extra-http-header 'x-use-ppe:1' \
--extra-http-header 'x-tt-env:ppe_example' \
--url https://example.com
npx -y @midscene/web@1 act \
--cdp ws://127.0.0.1:9222/devtools/browser \
--extra-http-header 'x-use-ppe:1' \
--extra-http-header 'x-tt-env:ppe_example' \
--prompt "click the button"
CLI コマンドを実行するたびに、新しい CDP セッションが作成されます。connect、act、assert など、リクエストを送信する可能性のある CDP コマンドには、必要な --extra-http-header 'Name:Value' オプションを毎回指定してください。各エントリは最初のコロンで分割するため、値にコロンが含まれていても構いません。ヘッダーは connect --url による移動の前に適用されるため、最初のドキュメントリクエストにも含まれます。タスクの要約にヘッダーの値を出力しないでください。また、機密性の高い認証値をシェルの履歴に直接残さないようにしてください。
CDP モードに関する重要な注意事項
- ブラウザーは外部で管理されています。
disconnectは接続を解放しますが、ブラウザーは閉じません。CDP モードにcloseコマンドはありません。 - CDP モードでは、
connect --urlは新しいタブを開かず、既存のアクティブなタブに移動します。 connectを--urlなしで実行すると、移動せずに現在のアクティブなタブに接続します。- 接続に失敗した場合は、Chrome で
chrome://inspectを開き、「Allow remote debugging」をオンにしてリモートデバッグを有効にするようユーザーに依頼してください。
Bridge モード(Chrome 拡張機能経由で接続)
ユーザーが「bridge」や「extension」と明示している場合、または Midscene Chrome Extension がインストールされている場合は、Bridge モードを使用します。すべてのコマンドに --bridge を追加します。
npx -y @midscene/web@1 --bridge connect --url https://example.com
npx -y @midscene/web@1 --bridge act --prompt "click the button"
npx -y @midscene/web@1 --bridge take_screenshot
npx -y @midscene/web@1 --bridge disconnect
Bridge モードに関する重要な注意事項
- ユーザーは、Midscene Extension をインストールして有効にした状態で、Chrome(または Edge、Arc、Dia など、Chrome 拡張機能に対応する Chromium ベースのブラウザー)を開いておく必要があります。
- Chrome ウェブストアから拡張機能をインストールしてください:https://chromewebstore.google.com/detail/midscenejs/gbldofcpkknbggpkmbdaefngejllnief
- ハンドシェイクの方向:CLI がサーバー(
127.0.0.1:3766で待ち受けます)で、拡張機能がクライアントとして接続します。拡張機能のパネルに表示される「Listening」ステータスは、「CLI からの接続を待機中」という意味であり、拡張機能自体がポートを開いたわけではありません。実際には、まず--bridge connectを起動すると、1、2 秒以内に拡張機能が接続されます。 - **アクティブなタブは通常のウェブページである必要があります。**拡張機能は
chrome://、chrome-extension://、Chrome ウェブストアなどの権限が制限された URL を操作できません。アクティブなタブがこれらのいずれかの場合、CLI はCannot access a chrome:// URLを返します。再接続する前に、通常のhttp(s)://タブに切り替えるようユーザーに依頼してください。 - ファイルアップロードの権限:Bridge モードでローカルファイルをアップロードするには、Midscene 拡張機能の「Allow access to file URLs」権限が必要です。ユーザーに
chrome://extensionsを開き、Midscene を見つけて「Details」をクリックし、スイッチを有効にしてから、対象のhttp(s)://タブに戻って再接続するよう依頼してください。権限エラーまたはNot allowedエラーでアップロードに失敗した場合は、まずこれを確認してください。 --urlを指定せずにconnectを実行すると、現在のアクティブなタブに接続します。connect --url <href>を実行すると、そのタブに移動します。CLI は Bridge モードで新しいタブを開きません。disconnectは CLI 側の Bridge 接続のみを閉じます。ブラウザーやタブは閉じません。- 拡張機能がインストールされていない場合は、インストールするよう案内するか、代わりに CDP モードに切り替えることを提案してください。
- Bridge モードのドキュメントを参照してください。
コマンド
ウェブページに接続する
npx -y @midscene/web@1 connect --url https://example.com
スクリーンショットを撮る
npx -y @midscene/web@1 take_screenshot
スクリーンショットを撮った後、次の操作を決める前に、保存された画像ファイルを読み込んで現在のページの状態を把握してください。
操作を実行する
act を使用してページを操作し、結果を取得します。クリック、入力、スクロール、ホバー、待機、移動など、すべての UI 操作を内部で自律的に処理するため、細かな手順に分けるのではなく、複雑で大まかなタスク全体を指示してください。自然言語で、実行したいことと望ましい結果を説明してください。
# specific instructions
npx -y @midscene/web@1 act --prompt "click the Login button and fill in the email field with '[email protected]'"
npx -y @midscene/web@1 act --prompt "scroll down and click the Submit button"
# or target-driven instructions
npx -y @midscene/web@1 act --prompt "click the country dropdown and select Japan"
ファイルをアップロードする
プロンプトで Midscene にファイルのアップロードを指示する場合、act には明示的な --file-chooser-allowed-dir が必要です。テスト用ファイルを含む最小のディレクトリを使用し、プロジェクトのルートディレクトリやホームディレクトリを許可しないでください。プロンプトでは、そのディレクトリからの相対パスでファイルを指定してください。
Bridge モードでは、Midscene 拡張機能の「Allow access to file URLs」が chrome://extensions > Midscene > 「Details」で有効になっていることも確認してください。スイッチを変更した後は、対象の http(s):// タブから再接続してください。
npx -y @midscene/web@1 act \
--file-chooser-allowed-dir ./fixtures \
--prompt "click the upload button and upload avatar.png"
現在のページ状態をアサートする
assert を使って、現在のページが自然言語で指定した条件を満たしているか確認します。UI 操作は行わず、表示されているページの状態をチェックし、アサーションが真の場合にのみ成功します。検証、QA チェック、および act 実行後の最終状態の確認に使用します。
npx -y @midscene/web@1 assert --prompt "there is a login button visible"
npx -y @midscene/web@1 assert --prompt "the checkout page shows the order total and a Pay button"
CDP モードまたは Bridge モードでは、他のコマンドで使用するものと同じ接続フラグを渡します。
npx -y @midscene/web@1 assert --cdp ws://127.0.0.1:9222/devtools/browser --prompt "the dashboard is loaded"
npx -y @midscene/web@1 --bridge assert --prompt "the profile page shows the user's avatar"
デフォルトでは、アサーションに失敗すると AI が生成した理由がスローされます。代わりにカスタムエラーメッセージをスローするには --message を渡します。これは、QA や CI のログに意図した結果を表示するのに便利です。
npx -y @midscene/web@1 assert \
--prompt "the checkout page shows an order confirmation" \
--message "the order should be confirmed after clicking Pay"
アサーションで参照画像(アイコン、ロゴ、スクリーンショット)との比較が必要な場合は、URL/パスに --image を、表示名に --image-name を渡します。各 --image には、http(s) リンク、data: URI、またはローカルファイルパスを指定できます。複数の画像を添付する場合は、両方のフラグを対応する順序で繰り返します。モデルが URL に直接アクセスできない場合は、--convertHttpImage2Base64 true を追加します。@midscene/[email protected]+ が必要です。
npx -y @midscene/web@1 assert \
--prompt "the page shows the same logo as the reference image" \
--image "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png" \
--image-name "logo" \
--convertHttpImage2Base64 true
# or with a local file
npx -y @midscene/web@1 assert \
--prompt "the visible header matches the supplied screenshot" \
--image "./fixtures/header.png" \
--image-name "header"
# multiple reference images — pair --image and --image-name by order
npx -y @midscene/web@1 assert \
--prompt "the page shows both the logo and the header" \
--image "./fixtures/logo.png" --image-name "logo" \
--image "./fixtures/header.png" --image-name "header"
一時的な UI を記録してアサートする
トースト、読み込みバナー、アニメーション、遷移など、現在の画面に対するアサーションを実行する前に消える可能性がある状態を検証するには、録画を使用します。専用の対話型ターミナルでレコーダーを実行します。
# Terminal 1: keep this foreground command running
npx -y @midscene/web@1 record start \
--output ./submission-observation.json
# Terminal 2, while Terminal 1 records
npx -y @midscene/web@1 act --prompt "click the Submit button"
# Send Ctrl+C to Terminal 1 and wait for the saved-path message, then assert
npx -y @midscene/web@1 assert \
--record ./submission-observation.json \
--prompt "a success toast appeared during submission"
通常のターゲットフラグと --output を record start に渡し、Recording. Press Ctrl+C to stop and save. と表示されるまで待ちます。レコーダーはターミナル上でフォアグラウンドプロセスとして実行し、シェルの & は追加しないでください。手動または 2 つ目のターミナルから操作を行い、レコーダーに Ctrl+C を送り、保存先のパスが表示されるまで待ってからアサートします。CDP モードでは、record start、アクション、assert で --cdp ws://127.0.0.1:9222/devtools/browser を繰り返し指定します。Bridge モードでは、フォアグラウンドのレコーダーが単一の Bridge 接続を使用するため、2 つ目の Bridge CLI アクションを開始せず、手動で操作してください。
record start の任意のキャプチャフラグは、--interval-ms、--max-frames、--watchdog-ms です。--max-frames はサンプリングするフレーム数を制限しますが、マニフェストには代表的な最終フレームが 1 枚追加で含まれる場合があります。デフォルトでは、ウォッチドッグが 5 分後に録画を確定して保存します。--watchdog-ms 0 を指定すると、この安全制限が無効になります。出力されるのは JSON マニフェストと隣接する <name>.frames 画像ディレクトリであり、エンコードされた動画やアーカイブではありません。マニフェストには相対 JPEG/PNG パスが含まれ、base64 形式の画像データは含まれません。JSON ファイルと画像ディレクトリは一緒に保持または移動し、JSON のパスを assert --record に渡してください。現在のページだけが対象の場合は、--record を指定せず通常の assert を使用します。
正確なターゲット指定に参照画像を使用する
ユーザーがスクリーンショット、アイコン、ロゴ、参照画像を提供し、正確な視覚的一致を求めている場合は、汎用的な act --prompt ではなく tap --locate を優先してください。--locate には JSON を渡します。prompt でターゲットを説明し、images で名前付き参照画像を指定します。画像 URL にモデルが直接アクセスできない可能性がある場合は、convertHttpImage2Base64: true が便利です。
npx -y @midscene/web@1 tap --locate '{
"prompt": "tap the area contains the image",
"images": [
{
"name": "target image",
"url": "https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png"
}
],
"convertHttpImage2Base64": true
}'
同じ locate JSON 形式は、locate パラメーターを受け付ける他のコマンドでも使用できます。
切断する
ブラウザーを実行したまま、ページから切断します。
npx -y @midscene/web@1 disconnect
ブラウザーを閉じる
完了したら、ブラウザーを完全に閉じます(Puppeteer モードのみ)。
npx -y @midscene/web@1 close
レポートファイルを利用する
生成された HTML レポートは、まず人が読む用途におすすめです。各操作の手順ごとの実行詳細とリプレイ動画が含まれているため、何が起きたのかを把握し、問題をトラブルシューティングしやすくなります。
別のスキルやツールでレポートを利用する場合は、まず同じプラットフォーム CLI パッケージの report-tool で変換してください。LLM ベースのワークフローには Markdown をおすすめします。レポートをプログラムで処理する必要がある場合は JSON を使用してください。
npx -y @midscene/web@1 report-tool --action to-markdown --htmlPath ./midscene_run/report/.../index.html --outputDir ./output-markdown
npx -y @midscene/web@1 report-tool --action split --htmlPath ./midscene_run/report/.../index.html --outputDir ./output-data
ワークフローパターン
バックグラウンドの Chrome プロセスを介して、ブラウザーは CLI 呼び出しをまたいで状態を保持します。次のパターンに従ってください。
- 接続して URL を開き、新しいタブを表示します
- スクリーンショットを撮影して現在の状態を確認し、ページが読み込まれていることを確かめます。
actを使って操作を実行し、目的の操作またはターゲットを指定した指示を行います。結果のページ状態にはassertを使います。一時的な状態が発生するワークフローでは、専用ターミナルでrecord start --output ...を実行したままにし、Ctrl+C で停止してからassert --recordを使います。- 完了したらブラウザーを閉じます(または、後で使うために切断します)
- 結果を報告します — 実行した内容を要約し、タスク中に得られた主な調査結果やデータを示し、生成されたファイル(スクリーンショット、ログなど)とそのパスを列挙します
ベストプラクティス
- 必ず最初に接続する:操作を行う前に、
connect --urlでターゲット URL に移動します。 - 画面に表示された状態を確認する:ページが変化する操作やナビゲーションの後は、スクリーンショットを撮影し、次の手順を決める前に内容を確認します。
- 自然で具体的なプロンプトを使う:
"#submit"のようなセレクターではなく、"お問い合わせフォームの青い送信ボタンをクリック"のように、画面に表示された UI と望む結果を説明します。 - 関連する操作は 1 つの
actコマンドにまとめる:たとえば、メールアドレスとパスワードのフィールドに入力してから、1 つのプロンプトでログインをクリックします。途中の状態を確認する必要がある場合は、コマンドを分けてください。 - 適切な検証方法を選ぶ:現在のページには
assert --prompt "..."を使います。トースト、バナー、アニメーション、または画面遷移の場合は、専用ターミナルでrecord start --output ...を実行し、操作を行ってから Ctrl+C で録画を停止します。保存先のメッセージが表示されるまで待ち、その成果物をassert --recordに渡します。 - 参照画像がある場合は
tap --locateを優先する:ユーザーがスクリーンショット、アイコン、またはロゴを共有し、その視覚的なターゲットを正確に指定している場合は、act --promptだけに頼らず、{ "prompt": "...", "images": [...] }のようなマルチモーダルなlocateJSON オブジェクトを指定してtap --locateを使います。
例 — ドロップダウンの選択:
npx -y @midscene/web@1 act --prompt "click the country dropdown and select Japan"
npx -y @midscene/web@1 take_screenshot
例 — フォームの操作:
npx -y @midscene/web@1 act --prompt "fill in the email field with '[email protected]' and the password field with 'pass123', then click the Log In button"
npx -y @midscene/web@1 take_screenshot
精度の向上(Deep Locate/Deep Think)
Midscene でタスクの実行が難しい場合に役立つ、任意のグローバルフラグが 2 つあります。サブコマンドの前後を問わず、コマンドのどこにでも指定できます。一度設定すると、該当する操作でデフォルトで使用されるため、呼び出しごとにパラメーターを渡す必要はありません。
--deep-locate— ターゲット要素を特定するために、視覚的な推論を追加で 1 回行います。操作対象がずれた位置になってしまう場合(位置のずれ/オフセット)に使います。tap --locateやact内で行われる要素の特定など、要素の位置を特定するすべての操作に適用されます。--deep-think—actの計画をより深く推論します(より豊富なコンテキストとサブゴールへの分解)。複雑な複数手順のact指示に使います。計画にのみ影響します。
どちらも少し速度を犠牲にして結果を向上させます。また、組み合わせて使うこともできます。
# more accurate element location (helps act's internal locating too)
npx -y @midscene/web@1 act --deep-locate --prompt "click the tiny gear icon in the top-right toolbar"
# deeper planning for a complex, multi-step act
npx -y @midscene/web@1 act --deep-think --prompt "complete the multi-step checkout form"
# combine both
npx -y @midscene/web@1 act --deep-locate --deep-think --prompt "open the settings menu, go to Preferences, and enable dark mode"
CDP または Bridge モードでは、これらと併せて通常どおり --cdp/--bridge フラグを指定してください。
トラブルシューティング
接続の失敗
- システムに Chrome/Chromium がインストールされていることを確認してください(Puppeteer はデフォルトで独自のものをダウンロードします)。
- ファイアウォールがローカルの Chrome デバッグポートをブロックしていないことを確認してください。
API キーのエラー
.envファイルにMIDSCENE_MODEL_API_KEY=<your-key>が含まれていることを確認してください。- キーが、設定されているモデルプロバイダーで有効であることを確認してください。
タイムアウト
- Web ページの読み込みには時間がかかる場合があります。接続後、操作を行う前にスクリーンショットを撮影して、準備ができていることを確認してください。
- ページの読み込みが遅い場合は、各手順の間に少し待ってください。
@midscene/* の依存関係のバージョンが古い
- ローカルのバージョンを確認します:
npm ls @midscene/web @midscene/core @midscene/shared(またはpnpm why @midscene/web)。 - 最新バージョンを確認します:
npm view @midscene/web version、npm view @midscene/core version、npm view @midscene/shared version。 - 依存関係をアップグレードします:
npm i @midscene/web@latest @midscene/core@latest @midscene/shared@latest。
スクリーンショットが表示されない
- スクリーンショットのパスはローカルファイルへの絶対パスです。Read ツールを使って表示してください。