Power Platform テスト用のプレイライト MCP サーバー

プレイライト MCP サーバーは、AI コーディング アシスタントにライブ ブラウザー セッションへの直接アクセスを提供するモデル コンテキスト プロトコル サーバーです。 AI は、スクリーンショットやドキュメントからセレクターを推測する代わりに、実際の DOM を検査し、要素をクリックしてナビゲーションを観察し、見つけたものから正確な Playwright テストを生成できます。

Power Platform テストに Playwright MCP を使用する理由

Power Platform アプリには、テスト作成に関する特定の課題があります。

• キャンバス コントロールには、アプリ固有で文書化されていない data-control-name 属性があります。
• ギャラリー項目は位置特定可能な要素を複数入れ子にしているため、適切なセレクターはその正確な構造に依存します。
• コントロールの相互作用の前に、iframe 境界 (iframe[name="fullscreen-app-host"]) を越えなければなりません。
• Dataverse ベースのビューの設定には 30 ~ 60 秒かかる場合があります。

Playwright MCP を使用すると、AI アシスタントは次のことができます。

• キャンバスまたはモデル駆動型アプリに移動します。
• 実際にレンダリングされた DOM のコントロール名と ARIA ラベルを調べます。
• iframe に正しくスコープされたセレクターを生成します。
• 観察された動作に基づいて適切に待機するためのタイミングの調整。

Playwright MCP サーバーをインストールする

AI コーディング アシスタントがライブ ブラウザー セッションに接続できるように、npm を使用して Playwright MCP サーバーをグローバルにインストールします。

npm install -g @playwright/mcp

または、 npx を使用して、グローバル インストールなしで実行します。

npx @playwright/mcp

MCP を使用するように AI アシスタントを構成する

サーバーをインストールしたら、それに接続するように AI コーディング アシスタントを構成します。 次のセクションでは、一般的なエディターのセットアップを示します。

VS Code (GitHub Copilot)

.vscode/settings.jsonまたはユーザー設定に次のコードを追加します。

{
  "github.copilot.chat.experimental.mcp.servers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp"]
    }
  }
}

クロード (claude.ai またはクロード コード)

MCP サーバーを含むように CLAUDE.md または .claude/settings.json を作成または更新します。 Claude Code で、 /mcp コマンドを使用するか、 ~/.claude/settings.jsonを編集してサーバーを追加します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp"]
    }
  }
}

カーソル / ウィンドサーフ

カーソルで、[ 設定] → AI → MCP サーバーの下にサーバーを追加します。

{
  "name": "playwright",
  "command": "npx @playwright/mcp"
}

AI を Power Platform アプリに接続する

1. ブラウザーで Power Platform アプリを起動します (再生モードまたはポータルを作成します)。

2. 実行中のブラウザーに接続するように AI アシスタントに指示します。

   "ブラウザーに接続して https://apps.powerapps.com/play/<your-app-id> に移動する"

3. アプリを検査し、テストを生成するように AI に依頼します。

   "キャンバス アプリを検査し、Orders ギャラリーを開き、最初の項目をクリックして注文番号フィールドを確認する Playwright テストを記述します。"

AI は MCP サーバーを介して DOM を検査し、 data-control-name 値を識別し、iframe 境界をメモし、スコープ付きロケーターを生成します。すべて DevTools を開く必要はありません。

例: キャンバス アプリ テストを生成する

AI アシスタントにメッセージを表示します。

"Playwright MCP サーバーを使用して、 <url>で実行中のキャンバス アプリに接続します。 ギャラリー コントロール名とタイトル ラベル コントロール名を見つけます。 次に、「Playwright」テストを記述します。

1. ギャラリーの読み込みを待機します
2. "Northwind Traders" というタイトルのアイテムを検索するフィルター処理
3. その項目をクリックします
4. 詳細パネルが表示されることを確認します。

AI は、MCP サーバーの browser_navigate、 browser_snapshot、 browser_click ツールを使用し、次のようなテスト コードを出力します。

import { test, expect } from '@playwright/test';
import { AppProvider, AppType, AppLaunchMode, buildCanvasAppUrlFromEnv } from 'power-platform-playwright-toolkit';

test('find and click Northwind Traders in gallery', async ({ page, context }) => {
  const app = new AppProvider(page, context);
  await app.launch({
    app: 'Orders App',
    type: AppType.Canvas,
    mode: AppLaunchMode.Play,
    skipMakerPortal: true,
    directUrl: buildCanvasAppUrlFromEnv(),
  });

  const canvasFrame = page.frameLocator('iframe[name="fullscreen-app-host"]');

  // Wait for gallery (control name found via MCP inspection)
  await canvasFrame
    .locator('[data-control-name="Gallery1"] [data-control-part="gallery-item"]')
    .first()
    .waitFor({ state: 'visible', timeout: 60000 });

  // Click item by title (control name found via MCP inspection)
  const item = canvasFrame
    .locator('[data-control-part="gallery-item"]')
    .filter({
      has: canvasFrame
        .locator('[data-control-name="Title1"]')
        .getByText('Northwind Traders', { exact: true }),
    });

  await item.click();

  // Verify details panel
  await expect(canvasFrame.locator('[data-control-name="DetailPanel1"]')).toBeVisible();
});

例: モデル駆動型アプリ テストを生成する

プロンプト：

" <model-driven-app-url>に移動します。 AG グリッドを調べて、注文番号の列ヘッダーを見つけます。 'ORD-001' でフィルター処理し、最初のセルを読み取り、値を検証するテストを記述します。"

AI は、移動し、グリッド構造を検査し、列スキーマ名を識別して、次を生成します。

await mda.grid.filterByKeyword('ORD-001');
await mda.grid.waitForGridLoad();
const orderNumber = await mda.grid.getCellValue(0, 'nwind_ordernumber');
expect(orderNumber).toContain('ORD-001');

使用可能な MCP ツール

Playwright MCP サーバーは、次のツールを AI アシスタントに公開します。

MCP 接続の問題のトラブルシューティング

次のステップ

• AI テスト作成と Copilot
• AI エージェントのカスタム手順
• サンプル テスト

こちらも参照ください

• GitHub 上の Playwright MCP サーバー
• AI 支援テストの概要
• キャンバス アプリをテストする