共用方式為


測試引擎和 Playwright 整合 (預覽版)

注意

預覽功能不供生產時使用,而且可能功能受限。 這些功能是在正式發行前先行推出,讓客戶能夠搶先體驗並提供意見反應。

概觀

Power Apps Test Engine 使用 Playwright 作為 其核心瀏覽器自動化技術。 這種集成為測試引擎提供了強大、可靠和跨瀏覽器的測試功能,同時添加了多層抽象以簡化應用程式的 Power Platform 測試創建。

測試引擎如何增強 Playwright

雖然 Playwright 提供了出色的瀏覽器自動化功能,但 Test Engine 專門將這些功能擴展為 Power Platform:

測試引擎增強功能 Description
應用級抽象 測試引擎與應用級物件而不是 DOM 元素配合使用,使測試對 UI 更改更具彈性
Power Fx 集成 測試引擎增加了 Power Fx 支援,支援低代碼方法進行測試創作
內置身份驗證 預生成的身份驗證機制處理 Microsoft Entra 和條件訪問方案
Dataverse 集成 直接 Dataverse 集成,可實現全面的端到端測試
專業供應商 畫布應用 模型驅動應用的 優化提供程式

技術實現

以下部分介紹了測試引擎如何建立在 Playwright 的瀏覽器自動化基礎上,並將其與 Power Platform特定的抽象集成,從而實現強大且可維護的測試自動化。

瀏覽器自動化基礎

測試引擎利用 Playwright 的核心功能實現一致的瀏覽器自動化:

  • 對 Chrome 的跨瀏覽器支援 , Firefox以及 Microsoft Edge
  • 自動等待元素準備就緒的可靠等待機制
  • 用於類比 API 回應的網路請求攔截
  • 用於診斷測試失敗的跟蹤和調試工具

Test Engine 的架構集成

  • 提供程式層:測試引擎中的提供程式層直接與 Playwright API 交互以控制瀏覽器行為
  • 物件模型:測試引擎不是使用原始 DOM 元素,而是映射到特定於應用程式的物件模型
  • Power Fx 層:編寫的 Power Fx 測試步驟通過提供者層進行解釋和執行

主要技術特點

以下部分重點介紹了 Test Engine 在 Playwright 之上添加的重要技術功能,包括特定於應用程式的選擇器、瀏覽器上下文管理以及直接訪問高級場景的 Playwright 函數。

特定於應用的選擇器

測試引擎使用特定於應用的選擇器,而不是 CSS or 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 handles browser context automatically
pac test run `
   --provider canvas `
   --test-plan-file testplan.te.yaml `
   --tenant $tenantId `
   --environment-id $environmentId

直接劇作家功能

雖然測試引擎抽象了許多 Playwright 交互,但在某些情況下,直接訪問 Playwright 功能可能很有價值。 測試引擎提供了多個預覽功能,可以在測試步驟中 Power Fx 與 Playwright 直接交互。

在測試引擎中使用 Playwright 函數

測試引擎包括以下預覽函數,允許您應用 Playwright 的元素選擇功能:

函式 Description 範例
預覽.Playwright 作 使用或 DOM 選擇器對 CSS 元素執行作 Preview.PlaywrightAction("//button", "click")
參見 常見的劇作家動作作
預覽.劇作家動作值 執行需要值參數的作 Preview.PlaywrightActionValue("//input[@data-id='1']", "fill", "Hello")
參見 常見的劇作家動作值作
預覽.劇作家腳本 執行與 Playwright 互動的自訂 C# 腳本 Preview.PlaywrightScript("sample.csx")
參見 高級:自定義劇作家腳本
預覽.暫停 暫停測試執行並顯示 Playwright Inspector Preview.Pause()

注意

若要使用這些預覽函數,必須將預覽函數添加到測試設置部分的允許清單中。

常見的劇作家動作作

可以使用 Preview.PlaywrightAction 執行以下作:

動作​ Description 範例
click 使用單擊事件選擇元素 Preview.PlaywrightAction("//button[@id='submit']", "click")
exists 檢查元素是否存在 Preview.PlaywrightAction("//div[@class='error-message']", "exists")
wait 等待元素可用 Preview.PlaywrightAction("//table[@data-loading='false']", "wait")

常見的劇作家動作值運算

可以使用 Preview.PlaywrightActionValue 執行以下作:

動作​ Description 範例
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 函數在以下情況下很有用:

  • 標準測試引擎函數未涵蓋的複雜 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 腳本:

  1. 使用自定義 Playwright 邏輯創建 .csx
  2. 引用所需的劇作家程式集
  3. 實現所需的類結構
  4. 從測試步驟調用腳本
// 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 僅針對從原始程式碼構建的測試引擎的調試版本實現,而不是在已發佈 pac test run 的工具中實現。

與開發過程集成

以下部分介紹了如何在本地開發和 CI/CD 環境中使用 Test Engine 和 Playwright,支援從互動式調試到自動管道執行的一系列工作流程。

地方發展

對於本地開發,Test Engine 提供了一個完整的環境:

  • 具有 UI 可見性的本地瀏覽器執行
  • 分步測試執行
  • 詳細日誌和診斷

CI/CD 集成

在 CI/CD 環境中,測試引擎可以在無頭模式下運行 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)"

最佳作法

使用測試引擎的 Playwright 整合時:

  • 專注於應用級物件 而不是 DOM 元素
  • 將函數 Power Fx 用於 複雜邏輯,而不是原始 JavaScript
  • 利用內置的身份驗證 機制
  • 為應用級抽象不足的場景預留直接 Playwright 函數
  • 查看生成的測試 以優化可讀性和維護性