C
ChaoBro

Midscene の真の見どころ:UI 自動化で脆いセレクタを減らせる時代へ

UI 自動化に携わったことがある人なら、セレクタに泣かされた経験があるはずだ。

ボタンのテキストが変わればテストは落ちる。DOM にラッパーが1つ増えればテストは落ちる。デザイナーがモーダルの位置を少しずらせばテストは落ちる。モバイルの WebView のレンダリング方式が変わっても、やはりテストは落ちる。最終的に気づくのは、いわゆる「自動化テスト」の時間の半分は、テスト自体のメンテナンスに費やされているということだ。

これが web-infra-dev/midscene に注目すべき理由である。これは単なる Playwright のラッパーではなく、UI 自動化のエントリポイントを「特定の CSS セレクタを見つける」ことから「自分が何をしたいかを記述する」ことへと転換するものだ。リポジトリの説明は非常に直接的だ:AI-powered, vision-driven UI automation for every platform。本記事のデータ取得時点では、約 13,337 スター、1,004 フォークを獲得しており、GitHub TypeScript Trending では1日で約 99 スター増加している。

README の機能説明も明確だ。目標と手順を自然言語で記述すれば、Midscene が計画を立ててユーザーインターフェースを操作する。スクリプトは JavaScript SDK または YAML で記述可能。Web シナリオでは Puppeteer や Playwright に接続でき、Bridge Mode を使えばデスクトップブラウザも制御可能。モバイルでは、adb を介した Android 制御や、WebDriverAgent を介した iOS デバイス・シミュレータの制御をサポートしている。

重要なのは「コードを完全に不要にする」ことではなく、「コードをより安定した場所に書く」ことだ。

従来の UI 自動化は要素に注目する:#submit-button.modal .confirmdata-testid=save。一方、Midscene は意図に注目する:「保存」をクリックする、ポップアップを確認する、ページにエラーメッセージが表示されているかチェックする。頻繁に変更されるインターフェースにとって、この表現は人間のテスト手順により近く、Agent の操作インターフェースとしてもより適している。

Midscene はさらに3種類の API を提供している。Interaction API は UI の操作用。Data Extraction API は UI や DOM からデータを抽出する用。Utility API には aiAssert()aiLocate()aiWaitFor() などの補助機能が含まれる。さらに MCP サービスを提供しており、Midscene Agent のアトミックな動作を MCP tools として公開できるため、上位の Agent が自然言語で UI を検査・操作できるようになる。

これは実際のワークフローに非常に適している:

第1層:Playwright などの決定論的テストを維持し、コアパスをカバーする。これらは高速で安定しており、CI に適している。

第2層:Midscene を使って「変化の激しい UI」のスモークテストを記述する。例えば管理画面、運用設定ページ、キャンペーンページなどだ。これらの場所では DOM の変更が頻繁だが、人間による検証手順は比較的固定されている。

第3層:Midscene MCP をコーディング Agent に接続する。フロントエンドがページを修正した後、Agent が自らページを開き、「ログイン、注文ページへ移動、ステータスでフィルタリング、リストにデータが表示されていることを確認」といった動作を実行し、スクリーンショットとアサーションの結果に基づいて修正を続けるかどうかを判断できる。

もちろん、ビジョン駆動が万能薬であるわけではない。モデルの安定性に依存する度合いが高く、純粋なセレクタテストよりも遅くなる可能性もある。決済、権限、データ削除といった高リスクのフローについては、依然としてより確実な自動化スクリプトと人間のレビューでフォールバックする必要がある。

しかし、トレンドはすでに明確だ。UI 自動化は「マシンが DOM を読む」時代から「マシンがインターフェースを理解する」時代へ移行しつつある。セレクタが消えるわけではないが、もはやすべての認知負荷を担うべきではないのだ。

チームで試す場合は、最も面倒だがリスクが最も低いプロセスから始めることをお勧めする。例えば、管理画面のフィルタリング、フォーム入力、運用設定のプレビューなどだ。これらのシナリオは変更が多く、手動検証が頻繁に行われ、エラー発生時の影響が制御可能であるため、ビジョン自動化による補完に非常に適している。安定してきたら、一部のスクリプトを CI に組み込んだり、上位の Agent に呼び出させたりすることを検討しよう。最初から決済、削除、権限といった高リスクのパスに手を出してはいけない。

主要ソース:GitHub - web-infra-dev/midscene