Repolode
投稿する
web-infra-dev

web-infra-dev/midscene

Midscene.jsは、Web・モバイル・デスクトップアプリのUIテスト手順やアサーションを自然言語で記述できる、ビジョン駆動型のE2Eテストフレームワークです。

GitHub で見る公式サイト
スター
15,331
フォーク
1,201
未解決の Issue
123
最終コミット
4 時間前

これは何？

Midscene.jsは、AIビジョンをエンドツーエンドテストに取り入れます。テストではUIの操作手順と期待する結果を平易な言葉で記述し、ビジュアルGUIエージェントがスクリーンショットから要素を特定して、クリック、入力、スクロールを行い、画面上に表示された内容を確認します。そのため、アイコンだけのボタン、カスタムコントロール、canvasの内容、クロスオリジンiframeも、CSSやXPathセレクターを保守せずに操作できます。

利用方法は2通りあります。Midscene Testでは、テストケースをYAMLで記述し、セットアップ、API呼び出し、クリーンアップに使うTypeScriptノードを再利用できます。また、Agent API（aiAct、aiTap、aiInput、aiAssert、aiQuery、aiWaitFor）を既存のPlaywrightまたはPuppeteerのテストに追加する方法もあります。対応プラットフォームは、Webブラウザー、ADB経由のAndroid、WebDriverAgent経由のiOS、HDC経由のHarmonyOS、デスクトップシステムです。

使用するモデルは柔軟に選べます。セルフホスト可能なものを含め、複数のビジョン対応モデルで動作します。テスト実行後には、スクリーンショット、要素の位置、操作とアサーションの結果を含む、インタラクティブなHTMLレポートが生成されます。

主な機能

  • 01色、レイアウト、視覚的なフィードバックの確認を含むUI操作とアサーションを、自然言語で記述できます。
  • 02スクリーンショットから要素を特定するため、アイコンボタンやcanvasの内容にセレクターは不要です。
  • 03Midscene Testを使い、再利用可能なTypeScriptノードを含むYAMLのテストケースをサポートします。
  • 04Agent APIを通じてPlaywrightやPuppeteerと連携します。
  • 05Web、Android、iOS、HarmonyOS、デスクトップに対応します。
  • 06スクリーンショットと実行結果を含むインタラクティブなHTMLレポートを生成します。

ユースケース

  • セレクターが不安定、または利用できないWebアプリのエンドツーエンドテストを作成する。
  • DOMアサーションでは検証できない、canvasベースまたは視覚的に描画されたUIをテストする。
  • 既存のPlaywrightやPuppeteerのテストスイートにビジュアルチェックを追加する。
  • AndroidまたはiOSの実機やエミュレーターで、モバイルアプリの操作フローを自動化する。

クイックスタート

  1. 1

    npmからWeb SDKパッケージをインストールする

  2. 2

    Midscene Testプロジェクトを作成する（正確なセットアップコマンドはガイドを参照）

  3. 3

    モデルとWebランタイムを設定し、YAMLのテストケースを作成して実行する

使う前に知っておきたいこと

  • 視覚機能を備えたAIモデルへのアクセスが必要です。モデルは自分で設定し、料金を支払う必要があります。
  • 報告されているベンチマーク結果は、特定のモデルや実行設定に左右されます。

トピック

#e2e-testing#gui-agent#browser-automation#playwright#visual-testing#natural-language#mobile-testing#browser-use#computer-use#gpt-operator

よくある質問

midscene とは？
Midscene.jsは、Web・モバイル・デスクトップアプリのUIテスト手順やアサーションを自然言語で記述できる、ビジョン駆動型のE2Eテストフレームワークです。 Midscene.jsは、AIビジョンをエンドツーエンドテストに取り入れます。テストではUIの操作手順と期待する結果を平易な言葉で記述し、ビジュアルGUIエージェントがスクリーンショットから要素を特定して、クリック、入力、スクロールを行い、画面上に表示された内容を確認します。そのため、アイコンだけのボタン、カスタムコントロール、canvasの内容、クロスオリジンiframeも、CSSやXPathセレクターを保守せずに操作できます。
midscene は無料で使えますか？ライセンスは？
midscene は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
midscene は今もメンテナンスされていますか？
活発にメンテナンス中。midscene の最終コミットは 2026年10月20日 です。
midscene は何に使えますか？
セレクターが不安定、または利用できないWebアプリのエンドツーエンドテストを作成する。 DOMアサーションでは検証できない、canvasベースまたは視覚的に描画されたUIをテストする。 既存のPlaywrightやPuppeteerのテストスイートにビジュアルチェックを追加する。 AndroidまたはiOSの実機やエミュレーターで、モバイルアプリの操作フローを自動化する。
midscene のインストール方法は？
npmからWeb SDKパッケージをインストールする Midscene Testプロジェクトを作成する（正確なセットアップコマンドはガイドを参照） モデルとWebランタイムを設定し、YAMLのテストケースを作成して実行する
midscene はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/web-infra-dev/midscene

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト