最新AI-E2Eテストツール「midscence.js」を導入方法から紹介

2025-07-24 制作・開発

こんにちは！商品開発部でエンジニアとして働いている成田です。普段は、専門知識がなくても簡単に使える国産CMS・MAツールである『LeadGrid』を開発しています！

早速ですが、Webアプリケーションにおけるテスト、ちゃんと作れていますか？テスト作成には時間がかかるし、テストが直接時間を生むわけではないし……と、テストについて後回しになってしまっているチームも多いと思います。

そこで、今回は自然言語でテスト作成ができるAI-E2Eテストツール「midscence.js」を導入方法から解説していきます。

midscence.jsとは？

自然言語でテストを行う最新AI-E2Eテストツール

midscence.jsはAIによって、Webページを自動操作できるようになるツールです。ここではテストとしての使い方を紹介していますが、テスト以外にもブラウザの操作であれば基本的なことはなんでも行ってくれます。

midscence.jsの強みは、なんと言っても自然言語でブラウザの操作を自動化できるという点です。

仕組みとしては内部的にAI API × Playwright という構成でできています。

AI APIの部分は、
・GPT-4o
・Qwen-2.5-VL
・Gemini-2.5-Pro
・Doubao-1.5-thinking-vision-pro
・UI-TARS

上記のAIに対応しています。（2025年6月30日現在）

料金に関しては、midscence.js自体はOSSのため無料です。AI APIは、ブラウザ操作のために投げるプロンプトで使用するトークンの料金となっています。

これまでのE2Eテストの辛い部分を完全に解決！？

皆さんはE2Eテストを書いた経験はありますか？私は今までさまざまなE2Eテストを書いてきましたが、Playwrightやmablなど、どのツールを使っても以下のような課題を感じていました。

・UIの変更に弱く、メンテナンスコストがかかる
・テスト作成が完全にエンジニアに依存し、テスト作成時間がそれなりにかかる

今回ご紹介するmidscence.jsは、これらの課題を「自然言語でのテスト記述」というアプローチで解決できます！

たとえば

await agent.aiAction('ログインページに移動して、ユーザー名に"test@example.com"、パスワードに"password123"を入力し、ログインボタンをクリックする');

これだけで、実際にブラウザが操作され、ログイン処理が実行されます。IDやクラスなどを指定する必要がなく、「ログインボタン」という自然な表現でボタンを特定できます。AIのモデルやバージョンにもよりますが、結構ラフな指定（たとえば「ログイン」「次に進みそうなボタン」など）でも割と柔軟に対応してくれます。

また、自然言語でテストが書けることにより、テスト項目を非エンジニアの人が考えその項目をAIツールに投げることでテストコードが簡単に出来上がります。そのため、テスト作成にかかるハードルがぐんと下がる、というのが私の体感です。

E2Eテストツール「midscence.js」を実際に導入してみる

導入方法を詳しく紹介

それでは早速、midscene.jsを導入していきましょう。基本的にはnpmからインストールして、必要なAI APIのキーを設定するだけで使えるようになります。

1. まずは新しいプロジェクトのなかで、必要なパッケージをインストールします。

 npm install --save-dev @midscene/web playwright jest

2. AI APIキーの準備

midscene.jsは上記の通り様々なAIモデルと連携できますが、今回はGeminiを使用する例を示します。Google Cloud ConsoleからGemini APIのAPIキーを取得してください（GCPには新しいアカウントを作ると300$の無料枠がもらえます）。

キーを取得したら、プロジェクトのルートに.envファイルを作成して以下のように設定します。

GEMINI_API_KEY=key

3. テストファイルの作成

testsディレクトリを作成し、その中で〇〇.test.jsファイルを作成しましょう。今回は、Claudeに以下のプロンプトでテストを作成してもらいました。

<code>
midscene.jsでテストを作成しています！
以下の項目でテストを作成してください！
https://giginc.co.jp/を開く
ヘッダーの中からサービスを開く
展開しているサービス一覧が表示されるのでLeadGridを開いて
</code>

<code>
import { test, expect } from '@playwright/test';
import { Midscene } from '@midscene/playwright';


test('GigIncサイトでLeadGridサービスにアクセス', async ({ page }) => {
  // Midsceneインスタンスを初期化
  const midscene = new Midscene(page);


  // 1. GigIncのウェブサイトを開く
  await page.goto('https://giginc.co.jp/');
  
  // ページが読み込まれるのを待つ
  await page.waitForLoadState('networkidle');


  // 2. ヘッダーの「サービス」メニューを探してクリック
  await midscene.ai('ヘッダーにある「サービス」メニューをクリックする');
  
  // サービスメニューが展開されるのを少し待つ
  await page.waitForTimeout(1000);


  // 3. 展開されたサービス一覧から「LeadGrid」を探してクリック
  await midscene.ai('展開されたサービス一覧から「LeadGrid」をクリックする');
  
  // ページ遷移を待つ
  await page.waitForLoadState('networkidle');


  // 4. LeadGridページが正しく開かれたことを確認
  // URLまたはページタイトルで確認
  const currentUrl = page.url();
  const pageTitle = await page.title();
  
  console.log('現在のURL:', currentUrl);
  console.log('ページタイトル:', pageTitle);
  
  // LeadGridに関連する要素が表示されていることを確認
  await midscene.ai('LeadGridのサービス情報が表示されていることを確認する');
  
  // テスト成功のログ出力
  console.log('✅ LeadGridサービスページへの遷移が完了しました');
});

</code>

実際に動かしてみると、挙動はPlaywrightと全く同じで、無事テストが成功しました！テスト後には、テストの経緯について、スクリーンショットや動画を交えてログが吐き出されます。

そのため、テストに対するチューニングも問題なく行えます。