Power Apps テスト エンジンからの移行

Power Appsテスト エンジンは、特殊なテスト ホストに対して実行される YAML ベースのテスト定義を使用します。 Power Platform Playwright サンプルでは、TypeScript と標準の Playwright テスト ランナーを使用して、完全な Playwright API、エコシステム ツール、CI/CD 統合にアクセスできます。

このガイドでは、テスト エンジンの概念をプレイライトの同等の概念にマップし、具体的な移行の例について説明します。

概念マッピング

次の表は、テスト エンジンの概念が Playwright の概念にどのように対応するかを示しています。

始める前の準備

移行を開始する前に、これらの前提条件を完了してください。

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. テスト エンジンの YAML appLogicalName または Power Apps make ポータルからアプリの URL をコピーします。

3. 認証を設定する - 認証ガイドを参照してください。

手順 1: アプリの種類を特定する

テスト エンジンでは、キャンバス アプリがサポートされています。 移行する場合:

• キャンバス アプリのテスト → テスト キャンバス アプリに従います。
• カスタム ページ テスト → テスト カスタム ページに従います。
• モデル駆動アプリのテスト → モデル駆動アプリをテストします。

手順 2: テスト構造をマップする

テスト エンジン YAML

一般的なテスト エンジンのテスト定義は次のようになります。

testSuite:
  testSuiteName: OrdersTests
  testCases:
    - testCaseName: CreateOrder
      testSteps: |
        Select(AddButton);
        SetProperty(OrderNumberInput, "ORD-TEST");
        Select(SaveButton);
        Assert(Label1.Text = "Saved");

Playwright TypeScript に相当する

Playwright と Power Platform ツールキットを使用して書き換えたのと同じテストを次に示します。

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

test.describe('OrdersTests', () => {
  test('CreateOrder', 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 app to load
    await canvasFrame
      .locator('[data-control-part="gallery-item"]')
      .first()
      .waitFor({ state: 'visible', timeout: 60000 });

    // Select(AddButton)
    await canvasFrame.locator('[data-control-name="AddButton"] [role="button"]').click();

    // SetProperty(OrderNumberInput, "ORD-TEST")
    await canvasFrame.locator('input[aria-label="Order Number"]').fill('ORD-TEST');

    // Select(SaveButton)
    await canvasFrame.locator('[data-control-name="SaveButton"] [role="button"]').click();

    // Assert(Label1.Text = "Saved")
    await expect(canvasFrame.locator('[data-control-name="Label1"]')).toHaveText('Saved');
  });
});

手順 3: コントロール セレクターをマップする

テスト エンジンでは、Power Apps Studio のコントロール名が YAML で直接使用されます。 Playwright では、同じ値 data-control-name 属性を使用します。

手順 4: 環境変数をマップする

テスト エンジンでは、YAML の environmentVariables セクションを使用します。 これらの値を .env ファイルに移動します。

# Test Engine YAML
environmentVariables:
  - name: appUrl
    value: https://apps.powerapps.com/play/...

# packages/e2e-tests/.env
CANVAS_APP_URL=https://apps.powerapps.com/play/...

手順 5: マップのセットアップと破棄

テスト エンジンのライフサイクル フックを Playwright の組み込みの beforeEach および afterEach 関数に変換します。

# Test Engine
testSuite:
  onTestCaseStart: |
    Navigate(HomeScreen);

// Playwright
test.beforeEach(async ({ page, context }) => {
  // Re-launch the app for each test (equivalent to onTestCaseStart navigation)
  const app = new AppProvider(page, context);
  await app.launch({ ... });
});

手順 6: Power Fx アサーションを置き換える

テスト エンジンは、 Assert()で Power Fx 式を使用します。 Playwright expect() アサーションを使って置き換えます。

注意すべき主な違い

テストを移行するときは、これらの動作の違いに留意してください。

移行されたテストを実行する

テストを移行した後、これらのコマンドを使用してテストを認証して実行します。

cd packages/e2e-tests
npm run auth:headful      # authenticate
npx playwright test       # run all tests
npx playwright test --ui  # run with interactive UI

移行に関する問題のトラブルシューティング

移行に関する一般的な問題とその解決策については、次の表を参照してください。

次のステップ

• キャンバス アプリをテストする
• モデル駆動型アプリをテストする
• サンプル テスト

こちらも参照ください

• はじめに
• 認証ガイド
• Page オブジェクト モデル