サンプル テスト

このリポジトリには、Northwind Traders 環境を対象とするサンプル テストの完全なセットが含まれています。 これらのサンプルは、ツールキットでサポートされているさまざまなテスト パターンを示し、独自のテストの開始点として機能します。

例のテストスイート

サンプルを実行する

環境を設定し、Northwind Traders 環境に対してサンプル テスト スイートを実行するには、次の手順に従います。

前提条件

1. リポジトリを複製し、依存関係をインストールします。

   git clone https://github.com/microsoft/power-platform-playwright-samples.git
   cd power-platform-playwright-samples
   node common/scripts/install-run-rush.js install
   

2. packages/e2e-tests/.envで環境変数を構成します。

   MS_AUTH_EMAIL=testuser@contoso.com
   MS_USER_PASSWORD=<password>
   CANVAS_APP_URL=https://apps.powerapps.com/play/<app-id>
   MODEL_DRIVEN_APP_URL=https://<org>.crm.dynamics.com/main.aspx?appid=<app-id>
   CUSTOM_PAGE_NAME=AccountsCustomPage
   

3. 認証：

   cd packages/e2e-tests
   npm run auth:headful
   npm run auth:mda:headful
   

すべてのサンプル テストを実行する

リポジトリ内のすべてのテストを実行するには、 packages/e2e-tests ディレクトリから次のコマンドを実行します。

cd packages/e2e-tests
npx playwright test

1つのスイートを実行する

特定のテスト スイートをターゲットにするには、そのファイルまたはフォルダーのパスを playwright test コマンドに渡します。

npx playwright test tests/northwind/canvas
npx playwright test tests/northwind/mda/model-driven-crud.test.ts

Playwright UI を使用して実行する

--ui フラグを使用して Playwright の対話型テスト ランナーを起動します。これにより、テストを視覚的に監視、デバッグ、再実行できます。

npx playwright test --ui

キャンバス アプリの CRUD サンプル

キャンバス アプリ テスト (canvas-app-crud.test.ts) キャンバス アプリ テスト (canvas-app-crud.test.ts) では、次の方法を示します。

• skipMakerPortal: trueを使用してキャンバス アプリを直接起動します。
• ギャラリーが 60 秒のタイムアウトで読み込むのを待ちます。
• テキスト コンテンツ別にギャラリー項目を選択します。
• 注文フォームに入力して保存します。
• ギャラリーに変更が表示されることを確認します。

使用される主なパターン:

// Wait for gallery with sufficient timeout
await canvasFrame
  .locator('[data-control-part="gallery-item"]')
  .first()
  .waitFor({ state: 'visible', timeout: 60000 });

// Select gallery item by title text
const galleryItem = canvasFrame
  .locator('[data-control-part="gallery-item"]')
  .filter({
    has: canvasFrame
      .locator('[data-control-name="Title1"]')
      .getByText('Order 001', { exact: true }),
  });

モデル駆動型 CRUD サンプル

モデル駆動テスト (model-driven-crud.test.ts) は、次の方法を示しています。

• directUrlを使用してモデル駆動型アプリを起動します。
• エンティティ名でグリッド ビューに移動します。
• キーワードと列の値でグリッドをフィルター処理します。
• 列スキーマ名でセル値を読み取ります。
• レコードを開き、フィールドを編集します。
• 移動する前に、フォームを保存して確認します。
• コマンド バーを使用してレコードを削除します。

使用される主なパターン:

// Filter and wait for grid
await mda.grid.filterByKeyword('ORD-TEST');
await mda.grid.waitForGridLoad();

// Read cell value and open record
const orderNumber = await mda.grid.getCellValue(0, 'nwind_ordernumber');
await mda.grid.openRecord({ rowNumber: 0 });

// Save form and verify
await mda.form.save();
expect(await mda.form.isDirty()).toBe(false);

カスタム ページ CRUD サンプル

カスタム ページ テスト (custom-page-crud.test.ts) では、次の方法を示します。

• モデル駆動型アプリを起動し、サイトマップを使用してカスタム ページに移動します。
• すべての操作を iframe[name="fullscreen-app-host"]に限定します。
• 埋め込みキャンバス ページにレコードを作成します。
• アプリのルートに移動してから戻ることでギャラリーを更新します。
• 新しく作成されたレコードが表示されていることを確認します。

使用される主なパターン:

// Navigate to custom page via sitemap
const sidebarItem = page.locator(`[role="presentation"][title="${CUSTOM_PAGE_NAME}"]`).first();
await sidebarItem.waitFor({ state: 'visible', timeout: 30000 });
await sidebarItem.click();

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

// Refresh by navigating to app root and back
await page.goto(MODEL_DRIVEN_APP_URL, { waitUntil: 'load', timeout: 60000 });
await sidebarItem.click();

サンプルを拡張する

環境に合わせてサンプルを調整するには:

• エンティティ名の置換 - dataverse テーブルと一致するように、 nwind_orders、 nwind_ordernumber、および類似のスキーマ名を更新します。
• コントロール名を置き換える - キャンバス アプリ コントロールに合わせて data-control-name 値を更新します。
• アプリの URL を置き換える - CANVAS_APP_URL と MODEL_DRIVEN_APP_URL をあなたのアプリに指します。
• 列名を置き換える - 'Order Number'呼び出しのgetCellValue()などの表示名を更新します。

次のステップ

• AI 支援テストの概要
• Page オブジェクト モデル
• 構成リファレンス

こちらも参照ください

• キャンバス アプリをテストする
• モデル駆動型アプリをテストする
• カスタム ページをテストする
• 認証ガイド