Midscene.jsで画面の見た目を基準にUIを検査する
あらゆるプラットフォーム向けの AI を活用したビジョン主導の UI 自動化。テストには 2 つの方法があり、Playwright / Vitest スイートに Midscene を追加するか、スキルを介して AI エージェントに自律的にテストさせます。
ひと目でわかる
- これは何？
- スクリーンショットを使ってWeb、Android、iOS、HarmonyOS、デスクトップを操作し、Playwright、Puppeteer、Vitest、YAML、Skillsからテストを組み立てるTypeScriptツールです。
- 誰に向いている？
- Midscene.jsは、DOMセレクターだけでは扱いにくいcanvas、カスタムUI、ネイティブアプリを画面として検査したいチームに向きます。視覚モデルの判断をそのまま本番操作へ使いたい用途には慎重さが必要です。
- 商用利用できる？
- できます。MIT は寛容なライセンスで、著作権表示とライセンス表示を残せば、使用・改変・販売が可能です。
- 今もメンテナンスされている？
- されています。最後のコミットは 1 日前です。
- 何の言語で書かれている？
- 主に TypeScript です（GitHub の言語統計による）。
回答はプロジェクトの GitHub データ（最終同期：2026年9月14日）と当サイトの分析に基づくもので、法的助言ではありません。
オープンソース詳細解説
スクリーンショットを操作の入力にする
Midsceneはページ構造ではなくスクリーンショットを中心にUI要素を特定します。READMEは、セレクターが壊れやすい変更、意味付けのないアイコンボタン、canvas、ネイティブアプリ、cross-origin iframeを例に、画面を見る方式の対象を説明しています。
人間に見えるものを対象にできる一方、画像の状態、解像度、表示待ち、モデルのUI定位能力に結果が依存します。クリック前後の画像、自然言語の指示、対象座標、画面状態を記録し、DOM要素が存在するだけの検査と見た目の検査を分けて評価します。
Chrome Quick start、Playwright、aiAct、aiQuery、aiAssert、スクリーンショット、UI-TARSを一度に全部採用せず、1番目の確認では入力、処理、出力、失敗時の表示を分けて記録します。READMEにある名称と手元で実行した版を同じ記録へ残し、画面の成功表示だけで完了としません。設定を変更した場合は変更前の値、実行日時、生成物、ログの該当行を保存し、同じ入力を戻して比較します。
aiActとaiAssertをテストへ組み込む
JavaScript SDKまたはYAMLで自動化を書き、API referenceにあるaiAct、aiQuery、aiAssertなどを呼び出せます。Playwright、Puppeteer、Vitestのsuiteへ追加する経路と、Skills経由でAI agentに自律テストをさせる経路の二つがREADMEに示されています。
画面を操作するaiActの成功と、色、ハイライト、レイアウト、描画状態を確認するaiAssertの成功は別に記録します。自然言語の手順が通っても、期待する視覚状態をassertできなければ回帰テストとして弱いため、失敗時のスクリーンショットを保存します。
Chrome Quick start、Playwright、aiAct、aiQuery、aiAssert、スクリーンショット、UI-TARSを一度に全部採用せず、2番目の確認では入力、処理、出力、失敗時の表示を分けて記録します。READMEにある名称と手元で実行した版を同じ記録へ残し、画面の成功表示だけで完了としません。設定を変更した場合は変更前の値、実行日時、生成物、ログの該当行を保存し、同じ入力を戻して比較します。
Web以外の接続方法を確認する
READMEは、スクリーンショットを取得できるWeb browser、Android、iOS、HarmonyOS、desktop app、custom interfaceを対象に挙げています。Android、iOS、HarmonyOS、desktopにはそれぞれgetting-started guideがあります。ShowcaseにはGitHubフォーム、iOSのコーヒー注文、Androidのホテル予約などが並びます。
プラットフォーム名が列挙されていても、同じ接続設定や同じ入力遅延になるとは限りません。まずWebのPlaywrightで成功条件を固定し、次に対象端末の画面取得、入力、リセット、権限要求を個別に試します。端末操作や外部サービスの規約はMidsceneのREADME外で確認します。
Chrome Quick start、Playwright、aiAct、aiQuery、aiAssert、スクリーンショット、UI-TARSを一度に全部採用せず、3番目の確認では入力、処理、出力、失敗時の表示を分けて記録します。READMEにある名称と手元で実行した版を同じ記録へ残し、画面の成功表示だけで完了としません。設定を変更した場合は変更前の値、実行日時、生成物、ログの該当行を保存し、同じ入力を戻して比較します。
マルチモーダルモデルの選択
MidsceneはUI actionの要素定位を純粋なvisionで行い、Qwen3.x、Doubao-Seed-2.1、GLM-4.6V、gemini-3.5-flash、UI-TARSなどを例に挙げます。データ抽出やページ理解では必要に応じてDOMを含める選択もあります。
モデルを変えると、同じ指示でも定位、文字認識、待機、失敗メッセージが変わり得ます。実際のログイン画面や購入直前画面を使わず、テスト用データでモデルごとの成功率と誤操作を比較します。READMEはモデルの品質を保証していないため、モデル名だけで採用を決めません。
Chrome Quick start、Playwright、aiAct、aiQuery、aiAssert、スクリーンショット、UI-TARSを一度に全部採用せず、4番目の確認では入力、処理、出力、失敗時の表示を分けて記録します。READMEにある名称と手元で実行した版を同じ記録へ残し、画面の成功表示だけで完了としません。設定を変更した場合は変更前の値、実行日時、生成物、ログの該当行を保存し、同じ入力を戻して比較します。
UI回帰の境界を決める
MITライセンスのTypeScriptリポジトリで、Midscene SkillsはOpenClawと組み合わせてWeb、mobile、desktopを自動化できます。更新時にはnpm packageの版、モデル設定、ブラウザ版、端末状態を同時に固定しないと、失敗原因を切り分けにくくなります。
導入後はPlaywrightの既存テスト一つへMidsceneを追加し、スクリーンショット、自然言語指示、aiAssert結果、モデル、実行時間を保存します。セレクターが不要になる利点だけでなく、視覚判断の揺れ、機密画面の送信範囲、再実行時の状態リセットを確認できた範囲で適用範囲を決めてください。
Chrome Quick start、Playwright、aiAct、aiQuery、aiAssert、スクリーンショット、UI-TARSを一度に全部採用せず、5番目の確認では入力、処理、出力、失敗時の表示を分けて記録します。READMEにある名称と手元で実行した版を同じ記録へ残し、画面の成功表示だけで完了としません。設定を変更した場合は変更前の値、実行日時、生成物、ログの該当行を保存し、同じ入力を戻して比較します。
採用を決める記録には、対象機能を使わなかった場合の代替結果も残します。入力を小さくした場合に成功しても、実際のデータ量、権限、保存先、実行先が変われば同じ結論にはなりません。READMEが説明していない保証は未確認として扱い、確認できた出力と確認できなかった項目を分けて判断します。
編集部の結論
Midscene.jsは、DOMセレクターだけでは扱いにくいcanvas、カスタムUI、ネイティブアプリを画面として検査したいチームに向きます。視覚モデルの判断をそのまま本番操作へ使いたい用途には慎重さが必要です。最初にChrome Quick startでモデルを設定し、同じ画面にaiAct、aiQuery、aiAssertを実行してスクリーンショットと失敗理由を保存してください。
コミュニティノート