测试引擎和 Playwright 集成（预览版）

概览

Power Apps Test Engine 使用 Playwright 作为 其核心浏览器自动化技术。 这种集成为测试引擎提供了强大、可靠和跨浏览器的测试功能，同时添加了多层抽象以简化应用程序的 Power Platform 测试创建。

测试引擎如何增强 Playwright

虽然 Playwright 提供了出色的浏览器自动化功能，但 Test Engine 专门将这些功能扩展为 Power Platform：

技术实现

以下部分介绍了测试引擎如何建立在 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 的元素选择功能：

常见的剧作家动作作

可以使用 Preview.PlaywrightAction 执行以下作：

常见的剧作家动作值运算

可以使用 Preview.PlaywrightActionValue 执行以下作：

何时使用直接 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
    }
}

与开发过程集成

以下部分介绍了如何在本地开发和 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 函数
• 查看生成的测试 以优化可读性和维护性