Test Engine と Playwright の統合 (プレビュー)

注意

プレビュー機能は運用環境での使用を想定しておらず、機能が制限されている可能性があります。これらの機能を公式リリースの前に使用できるようにすることで、顧客が事前にアクセスし、そこからフィードバックを得ることができます。

概要

Power Apps Test Engine は、コアブラウザー自動化テクノロジとして Playwright を使用します。この統合により、Test Engine は、強力で信頼性の高い、クロスブラウザテスト機能を提供すると同時に、いくつかの抽象化レイヤーを追加して、Power Platform アプリケーションのテスト作成を簡素化します。

Test Engine による Playwright の機能強化

Playwright は優れたブラウザ自動化機能を提供しますが、Test Engine はこれらの機能を Power Platform 専用に拡張します:

Test Engine の機能強化	プロパティ
アプリレベルの抽出	Test Engine では、DOM 要素ではなくアプリレベルのオブジェクトが処理されるため、UI の変更に対するテストの回復性が向上します
Power Fx 統合	Test Engine が Power Fx をサポートし、テスト作成へのローコードのアプローチを可能にします
組み込みの認証	事前に組み込まれた認証メカニズムにより、Microsoft Entra と条件付きアクセスのシナリオに対応
Dataverse 統合	Dataverse との直接統合により、包括的なエンドツーエンドのテストが可能になります
専門プロバイダー	Canvas アプリとモデル駆動アプリに最適化されたプロバイダー

技術的な実装

次のセクションでは、Test Engine が Playwright のブラウザー自動化基盤の上に構築され、Power Platform 固有の抽象化と統合されることで、堅牢で保守性の高いテスト自動化を実現する方法について説明します。

ブラウザー自動化の基盤

Test Engine は、一貫性のあるブラウザー自動化のために Playwright のコア機能を利用します。

Chrome、Firefox、Microsoft Edge の ブラウザー間サポート
要素の準備ができるまで自動的に待機する信頼性の高い待機メカニズム
API 応答のシミュレーションに対応したネットワーク要求インターセプト
テストの失敗を診断するトレースとデバッグツール

Test Engine のアーキテクチャ統合

プロバイダーレイヤー: Test Engine のプロバイダーレイヤーは、ブラウザの動作を制御するために Playwright API と直接インターフェイスします
オブジェクトモデル: 未加工の DOM 要素を扱うのではなく、Test Engine はアプリケーション固有のオブジェクトモデルにマッピングします
Power Fx レイヤー: Power Fx で記述されたテストステップは、プロバイダレイヤーを通じて解釈され、実行されます

主要な技術的機能

以下のセクションでは、アプリ固有のセレクター、ブラウザーコンテキスト管理、高度なシナリオでの Playwright 関数への直接アクセスなど、Test Engine が Playwright に追加される重要な技術機能について説明します。

アプリ固有のセレクター

Test Engine は、CSS セレクタや XPath セレクタではなく、アプリ固有のセレクタを使用します:

# Test Engine (using app-level selectors)
- testSteps: |
    Select(Button1)

# Equivalent in raw Playwright (using DOM selectors)
    Select(Button1)
# page.locator('div[data-control-name="Button1"]').click();

ブラウザーのコンテキスト管理

Test Engine では、さまざまな認証シナリオをサポートするようにブラウザーコンテキストが管理されます。

# Test Engine handles browser context automatically
pac test run `
   --provider canvas `
   --test-plan-file testplan.te.yaml `
   --tenant $tenantId `
   --environment-id $environmentId

ダイレクト Playwright 関数

Test Engine では多くの Playwright 対話が抽象化されていますが、Playwright の機能に直接アクセスすることが有益なシナリオもあります。 Test Engine には、Power Fx テストステップ内から Playwright と直接対話できるプレビュー機能がいくつかあります。

Test Engine での Playwright 関数の使用

Test Engine には、Playwright の要素選択機能を適用できる次のプレビュー関数が含まれています。

Function	プロパティ	例
Preview.PlaywrightAction	CSS または DOM セレクタを使用して要素に対してアクションを実行します	`Preview.PlaywrightAction("//button", "click")` 一般的な Playwright アクションの操作を参照してください
Preview.PlaywrightActionValue	値パラメーターを必要とするアクションを実行します	`Preview.PlaywrightActionValue("//input[@data-id='1']", "fill", "Hello")` 一般的な Playwright アクション値の操作を参照してください
Preview.PlaywrightScript	Playwright とインターフェイスするカスタム C# スクリプトを実行する	`Preview.PlaywrightScript("sample.csx")` 詳細: カスタム Playwright スクリプトを参照してください
Preview.Pause	テストの実行を一時停止し、Playwright インスペクターを表示する	`Preview.Pause()`

注意

これらのプレビュー関数を使用するには、テストの設定セクションの許可リストにプレビュー関数を追加する必要があります。

Playwright の一般的なアクション操作

Preview.PlaywrightAction で実行できる操作は以下の通りです:

Action	プロパティ	例
`click`	クリックイベントを使用した要素の選択	`Preview.PlaywrightAction("//button[@id='submit']", "click")`
`exists`	要素が存在するかどうかを確認する	`Preview.PlaywrightAction("//div[@class='error-message']", "exists")`
`wait`	要素が使用可能になるまで待機する	`Preview.PlaywrightAction("//table[@data-loading='false']", "wait")`

一般的な Playwright アクション値の操作

Preview.PlaywrightActionValue で実行できる操作は以下の通りです:

Action	プロパティ	例
`fill`	フォームフィールドにテキストを入力します	`Preview.PlaywrightActionValue("//input[@name='search']", "fill", "Product name")`
`select`	選択リストからオプションを選択する	`Preview.PlaywrightActionValue("//select", "select", "Option2")`
`setAttribute`	要素に属性を設定する	`Preview.PlaywrightActionValue("//div", "setAttribute", "data-custom='value'")`

Playwright の直接関数を使用する場合

アプリレベルの抽象化が推奨されますが、次のシナリオでは直接の Playwright 関数が役立ちます。

Test Engine の標準機能ではカバーできない複雑な UI インタラクション
特別な処理が必要な Power Platform アプリケーション内のサードパーティコンポーネント
より多くの制御が必要な複雑なテストシナリオのデバッグ
要素の状態またはプロパティの高度な検証

例: 複合アプローチ

この例では、アプリレベルの抽象化と Playwright の直接アクションを組み合わせる方法を示します。

testSteps: |
  # Use app-level abstraction for Power Apps control
  Select(SubmitButton);
  
  # Use direct Playwright action for a third-party component
  Preview.PlaywrightAction("//div[@class='custom-calendar']//button[@data-day='15']", "click");
  
  # Wait for a specific condition using Playwright
  Preview.PlaywrightAction("//div[@data-status='complete']", "wait");
  
  # Resume using app-level abstractions
  Assert(Label1.Text = "Submission Complete");

上級者向け: カスタム Playwright スクリプト

高度に専門化されたシナリオでは、カスタムの Playwright スクリプトを作成できます。

カスタム Playwright ロジックで .csx ファイルを作成する
必要な Playwright アセンブリを参照する
必要なクラス構造を実装する
テストステップからスクリプトを呼び出す

// sample.csx
#r "Microsoft.Playwright.dll"
#r "Microsoft.Extensions.Logging.dll"
using Microsoft.Playwright;
using Microsoft.Extensions.Logging;

public class PlaywrightScript {
    public static void Run(IBrowserContext context, ILogger logger) {
        Execute(context, logger).Wait();
    }

    public static async Task Execute(IBrowserContext context, ILogger logger) {
        var page = context.Pages.First();
        // Custom Playwright logic here
    }
}

注意

Preview.PlaywrightScript は、ソースからビルドされた Test Engine のデバッグビルドにのみ実装されているため、リリースされた pac test run ツールには実装されていません。

開発プロセスとの統合

次のセクションでは、ローカル開発環境と CI/CD 環境の両方で Test Engine と Playwright を使用して、対話型デバッグから自動パイプライン実行まで、さまざまなワークフローをサポートする方法について説明します。

ローカル開発

ローカル開発の場合、Test Engine には完全な環境が用意されています。

UI の可視性によるローカルブラウザーの実行
段階的なテスト実行
詳細なログと診断

CI/CD 統合

CI/CD 環境では、Test Engine は Playwright をヘッドレスモードで実行できます。

# Example Azure DevOps pipeline step
- task: PowerShell@2
  displayName: 'Run Test Engine Tests'
  inputs:
    script: |
      pac test run `
        --provider canvas `
        --test-plan-file "$(Build.SourcesDirectory)/tests/testplan.te.yaml" `
        --tenant "$(TenantId)" `
        --environment-id "$(EnvironmentId)"

ベストプラクティス

Test Engine の Playwright 統合を使用する場合:

DOM 要素よりもアプリレベルのオブジェクトを重視
複雑なロジックには、未加工の JavaScript ではなくPower Fx 関数を使用
組み込みの認証メカニズムを活用
アプリレベルの抽象化では不十分なシナリオに向けて、Playwright の直接関数を予約する
生成されたテストをレビューし、読みやすさとメンテナンス性を最適化する

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-08-12