Midscene.js：AIでブラウザ自動テストを推進するオープンソース・プラグイン

はじめに

Midscene.jsはAIを搭載したブラウザ自動化ツールで、自然言語コマンドによってウェブページを制御し、アサーションを実行し、データを抽出することができます。Chrome拡張機能、JavaScript SDK、YAMLスクリプトをサポートし、UIテストの記述と保守のプロセスを簡素化します。GPT-4oのようなマルチモーダルなビッグ言語モデルを活用することで、Midscene.jsは、ユーザーがウェブページと直感的に対話し、構造化されたJSONデータをフェッチできる新しい自動開発体験を提供します。

ByteのオープンソースMidscene.jsは、自然言語とインターフェイスのスクリーンショットが直接E2Eテストを生成するため、チームは数え切れないほどの反復作業を省くことができ、多くの基本的なE2E問題を解決するための現在のコーディング+マルチモーダル機能は、非常に完璧なものでした。

機能一覧

• しぜんげんごそうごさよう自然言語を使って手順を記述し、AIが自動的にユーザー・インターフェースを計画・制御する。
• JSONデータ抽出ユーザーの要求に応じて、JSON形式のレスポンスデータを自動的に生成します。
• 直観的主張アサーションは自然言語で行われ、AIはそれを理解して実行する。
• クローム拡張機能体験コードを書く必要はありません。
• 視覚化レポートユーザーがプロセスを理解し、デバッグできるよう、詳細な実施レポートを提供する。
• 複数のスクリプトをサポートJavaScriptとYAMLを含み、柔軟な自動スクリプティングを提供します。

ヘルプの使用

インストールと設定

Chromeの拡張機能をインストールします：

1. Chromeストアで「Midscene」を検索してください。
2. クロームに追加」ボタンをクリックします。
3. インストールを確認し、許可を与える。

環境変数を設定する（SDK使用時）：

• OpenAI API を使用するには、以下のように環境ファイルに以下を追加する：

export OPENAI_API_KEY="あなたのAPIキー"
export MIDSCENE_MODEL_NAME="gpt-4o"

• 他のモデルサービスを使用している場合は、上記の環境変数を適宜調整する必要があります。

使用プロセス

クローム拡張機能で使用

• ローンチ・エクステンションインストール後、ブラウザのツールバーに拡張機能のアイコンが表示されます。アイコンをクリックするとMidsceneコントロールパネルが開きます。
• インタラクティブ操作ログインボタンをクリック」や「ウェブページからすべての見出しを抽出」などの自然言語コマンドをコントロールパネルに入力します。
• 結果を見る操作が完了すると、エクステンションは実行結果を返し、通常は抽出されたデータをJSON形式で提示する。

JavaScript SDK経由で使用

• SDKの紹介::

  インポート { ai, aiQuery, aiAssert } from '@midscene/web'；
  

• 実行操作::
  • 基本操作使用アイ関数は簡単なウェブページの操作を行います。例

    await ai('検索ボックスに入力")反応"');
    

  • データ抽出使用エイクエリーでデータを抽出する：

    const data = await aiQuery('{title: string, price: number}[]', '商品リストを検索し、タイトルと価格を抽出する')；
    

  • アサーションチェック利用aiAssert主張する：

    await aiAssert('There should be a login button on the page')；
    

YAMLスクリプトの使用

• YAMLスクリプトを書く例えば、**.yaml**ファイルに自動化タスクを定義する：

  -アクション:タイプ
  セレクタ:'input[name="search"]'
  値:'JavaScript'
  -アクション:クリック
  セレクタ:'button[type="submit"]'
  

• 実行スクリプトコマンドラインツールまたはMidsceneのCLIを使ってこれらのスクリプトを実行します。

運営内容

• 自然言語教育指示は「クリック」「入力」のような簡単なものから、「"セール "と表示された商品をすべて探し、価格を記録する」のような複雑なものまであります！".
• エラー処理手術が失敗した場合、Midsceneは失敗の原因を示す詳細なレポートを提供し、指示を調整するのに役立ちます。
• デバッグと再生スクリプトの理解やデバッグに役立てるため、各テストや操作の実行をビジュアルなレポートで再生できます。

この詳細なユーザーガイドにより、ユーザーは迅速にスピードアップし、効率的なブラウザ自動テストのためにMidscene.jsの機能をフルに活用することができます。