Power Platform Playwright サンプルから始めよう

このガイドは、リポジトリの複製、環境変数の構成、認証、最初のエンド ツー エンド テストの実行によって、Power Platform Playwright サンプルの使用を開始するのに役立ちます。

前提条件

開始する前に、以下の項目があることを確認します:

• Node.js 20 以降
• Git
• 少なくとも 1 つのアプリがデプロイされている Power Platform 環境
• テストするアプリにアクセスできるユーザー アカウント

手順 1: リポジトリを複製する

git clone https://github.com/microsoft/power-platform-playwright-samples.git
cd power-platform-playwright-samples

手順 2: 依存関係をインストールする

リポジトリでは 、Rush を使用して monorepo を管理します。 次を使用して依存関係をインストールします。

node common/scripts/install-run-rush.js install

e2e-tests パッケージを直接操作する場合:

cd packages/e2e-tests
npm install

手順 3: ブラウザーをインストールする

Microsoft Edge (Power Platform テスト用の既定のブラウザー) をインストールします。

cd packages/e2e-tests
npx playwright install msedge

手順 4: 環境を構成する

環境テンプレートをコピーし、値を入力します。

cp .env.example .env

.envを開き、必要な変数を設定します。

# Power Apps
POWER_APPS_BASE_URL=https://make.powerapps.com
POWER_APPS_ENVIRONMENT_ID=<your-environment-guid>

# Model-driven app (for model-driven app tests)
MODEL_DRIVEN_APP_URL=https://<org>.crm.dynamics.com/main.aspx?appid=<app-guid>

# Canvas app (for canvas tests)
CANVAS_APP_ID=<canvas-app-guid>
CANVAS_APP_TENANT_ID=<tenant-guid>

# Authentication
MS_AUTH_EMAIL=<your-test-user@domain.com>
MS_AUTH_CREDENTIAL_TYPE=password
MS_USER_PASSWORD=<password>

環境変数の完全な一覧については、「環境変数のリファレンス」を 参照してください。

手順 5: 認証

認証は、すべてのテストで再利用されるブラウザーストレージ状態をキャプチャするために 1 回実行されます。

Power Appsに対する認証

次のコマンドを実行します。 サインインするためのブラウザー ウィンドウが開きます。

npm run auth:headful

ストレージの状態は .playwright-ms-auth/state-<email>.jsonに保存されます。

モデル駆動型アプリに対する認証 (省略可能)

モデル駆動型アプリをテストする場合は、Dynamics 365 ドメインに対して 2 つ目の認証を実行します。

npm run auth:mda:headful

モデル駆動型アプリのストレージ状態は、 .playwright-ms-auth/state-mda-<email>.jsonに保存されます。

手順 6: テストを実行する

すべてのテストを実行します。

npx playwright test

キャンバス アプリ テストのみを実行します。

npx playwright test tests/northwind/canvas --project=default

モデル駆動型アプリ テストのみを実行します。

npx playwright test tests/northwind/mda --project=model-driven-app

実行後に HTML レポートを表示します。

npx playwright show-report

手順 7: 初めての Power Platform Playwright テストを記述する

次の例は、最小限のキャンバス アプリ テストを示しています。 tests/my-app/my-app.test.tsでファイルを作成します。

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

const CANVAS_APP_URL = process.env.CANVAS_APP_URL!;

test('should load the app and display the gallery', async ({ page, context }) => {
  const app = new AppProvider(page, context);

  await app.launch({
    app: 'My Canvas App',
    type: AppType.Canvas,
    mode: AppLaunchMode.Play,
    skipMakerPortal: true,
    directUrl: CANVAS_APP_URL,
  });

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

  await expect(canvasFrame.locator('[data-control-name="Gallery1"]')).toBeVisible();
});

テストを実行します。

npx playwright test tests/my-app/my-app.test.ts --project=default

次のステップ

• 認証ガイド CI/CD の証明書認証を設定する
• キャンバス アプリをテストする キャンバス アプリのテスト パターンの完全なガイド
• モデル駆動型アプリのテスト グリッド、フォーム、コマンドバーのテスト
• AI 支援テスト Playwright MCP を使用して AI でテストを生成する

こちらも参照ください

• 構成リファレンス
• 環境変数
• サンプル テスト