你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn。
快速入门:使用 Microsoft Playwright Testing(预览版)设置持续端到端测试
在本快速入门中,你将使用 Microsoft Playwright Testing(预览版)设置持续端到端测试,以验证 Web 应用在每次提交代码时是否可以在不同浏览器和操作系统上正确运行,并使用服务仪表板轻松对测试进行故障排除。 了解如何将 Playwright 测试添加到持续集成 (CI) 工作流,例如 GitHub Actions、Azure Pipelines 或其他 CI 平台。
完成本快速入门后,你将拥有一个 CI 工作流,此工作流使用 Microsoft Playwright Testing 大规模运行 Playwright 测试套件并帮助你轻松对测试进行故障排除。
重要
Microsoft Playwright Testing 目前以预览版提供。 有关 beta 版、预览版或尚未正式发布的 Azure 功能所适用的法律条款,请参阅 Microsoft Azure 预览版的补充使用条款。
先决条件
具有活动订阅的 Azure 帐户。 如果没有 Azure 订阅,请在开始之前创建一个免费帐户。
Microsoft Playwright Testing 工作区。 完成快速入门:大规模运行 Playwright 测试创建工作区。
- 一个 GitHub 帐户。 如果没有 GitHub 帐户,可以免费创建一个。
- 包含 Playwright 测试规范和 GitHub Actions 工作流的 GitHub 存储库。 若要创建存储库,请参阅创建新存储库。
- GitHub Actions 工作流。 如需 GitHub Actions 入门方面的帮助,请参阅创建第一个工作流
- 设置从 GitHub Actions 到 Azure 的身份验证。 请参阅使用 GitHub Actions 连接到 Azure
获取服务区域终结点 URL
在服务配置中,必须提供特定于区域的服务终结点。 终结点取决于在创建工作区时选择的 Azure 区域。
若要获取服务终结点 URL 并将其存储为 CI 工作流机密,请执行以下步骤:
使用 Azure 帐户登录到 Playwright 门户。
在工作区主页上,选择“查看设置指南”。
提示
如果有多个工作区,可以通过选择页面顶部的工作区名称切换到另一个工作区,然后选择“管理所有工作区”。
在“在设置中添加区域终结点”中,复制服务终结点 URL。
终结点 URL 与创建工作区时选择的 Azure 区域匹配。
将服务终结点 URL 存储在 CI 工作流机密中:
密钥名称 值 PLAYWRIGHT_SERVICE_URL 粘贴之前复制的终结点 URL。
添加服务配置文件
如果尚未配置 Playwright 测试以用服务运行测试,请将服务配置文件添加到存储库。 下一步,在 Playwright CLI 上指定此服务配置文件。
连同
playwright.config.ts
文件一起创建新文件playwright.service.config.ts
。(可选)使用示例存储库中的
playwright.service.config.ts
文件。向新文件添加以下内容:
import { defineConfig } from '@playwright/test'; import { getServiceConfig, ServiceOS } from '@azure/microsoft-playwright-testing'; import config from './playwright.config'; /* Learn more about service configuration at https://aka.ms/mpt/config */ export default defineConfig( config, getServiceConfig(config, { exposeNetwork: '<loopback>', timeout: 30000, os: ServiceOS.LINUX, useCloudHostedBrowsers: true }), { /* Playwright Testing service reporter is added by default. This will override any reporter options specified in the base playwright config. If you are using more reporters, please update your configuration accordingly. */ reporter: [['list'], ['@azure/microsoft-playwright-testing/reporter']], } );
默认情况下,服务配置可让你:
- 使用云托管浏览器并行运行测试,以加速生成管道。
- 简化故障排除,轻松访问发布到服务的测试结果和工件。
但是,你可以选择同时使用这两种功能或使用其中一个。 请参阅如何使用服务功能,并根据需要更新服务配置文件。
保存文件并提交到源代码存储库。
更新 package.json 文件
更新存储库中的 package.json
文件,以在 devDependencies
部分中添加有关 Microsoft Playwright Testing 服务包的详细信息。
"devDependencies": {
"@azure/microsoft-playwright-testing": "^1.0.0-beta.6"
}
在 Playwright 配置中启用工件
在项目的 playwright.config.ts
文件中,请确保收集所有必需的工件。
use: {
trace: 'on-first-retry',
video:'retain-on-failure',
screenshot:'on'
},
设置服务配置
在项目的根目录中创建一个新文件
PlaywrightServiceSetup.cs
。 此文件有助于使用服务对客户端进行身份验证。向新文件添加以下内容:
using Azure.Developer.MicrosoftPlaywrightTesting.NUnit; using NUnit.Framework; namespace PlaywrightTests; // Remember to change this as per your project namespace [SetUpFixture] public class PlaywrightServiceSetup : PlaywrightServiceNUnit { };
保存文件并提交到源代码存储库。
安装服务包
在项目中安装 Microsoft Playwright Testing 包。
dotnet add package Azure.Developer.MicrosoftPlaywrightTesting.NUnit --prerelease
这会通过将服务包详细信息添加到 ItemGroup
部分来更新项目的 csproj
文件。 请记得提交这些更改。
<ItemGroup>
<PackageReference Include="Azure.Developer.MicrosoftPlaywrightTesting.NUnit" Version="1.0.0-beta.2" />
</ItemGroup>
为项目添加或更新 .runsettings
文件。
如果尚未配置 Playwright 测试以用服务运行测试,请将 .runsettings
文件添加到存储库。 下一步,在 Playwright CLI 上指定此服务配置文件。
创建新的
.runsettings
文件。(可选)使用示例存储库中的
.runsettings
文件。向新文件添加以下内容:
<?xml version="1.0" encoding="utf-8"?> <RunSettings> <TestRunParameters> <!-- The below parameters are optional --> <Parameter name="Os" value="linux" /> <!--<Parameter name="RunId" value="sample-run-id1" />--> <Parameter name="ServiceAuthType" value="EntraId" /> <Parameter name="UseCloudHostedBrowsers" value="true" /> <Parameter name="AzureTokenCredentialType" value="DefaultAzureCredential" /> <!--<Parameter name="ManagedIdentityClientId" value="{clientId-value}" />--> <Parameter name="EnableGitHubSummary" value="false" /> <!--<Parameter name="ExposeNetwork" value="*" />--> </TestRunParameters> <!-- NUnit adapter --> <NUnit> <!-- Adjust parallel workers, parallel worker would also be bound by number of unit test files --> <NumberOfTestWorkers>10</NumberOfTestWorkers> </NUnit> <!-- General run configuration --> <RunConfiguration> <EnvironmentVariables> <!-- For debugging selectors, it's recommend to set the following environment variable --> <!--<DEBUG>pw:api*</DEBUG>--> </EnvironmentVariables> </RunConfiguration> <!-- Playwright --> <Playwright> <BrowserName>chromium</BrowserName> <ExpectTimeout>5000</ExpectTimeout> <LaunchOptions> <Headless>false</Headless> <!--Channel>msedge</Channel--> </LaunchOptions> </Playwright> <LoggerRunSettings> <Loggers> <!--microsoft playwright testing service logger for reporting --> <Logger friendlyName="microsoft-playwright-testing" enabled="True" /> <!--could enable any logger additionally --> <Logger friendlyName="trx" enabled="false" /> </Loggers> </LoggerRunSettings> </RunSettings>
此文件中的设置使你能够:
- 使用云托管浏览器并行运行测试,以加速生成管道。
- 将测试结果和生成工件发布到服务,以便更快地进行故障排除。
但是,你可以选择同时使用这两种功能或使用其中一个。 请参阅如何使用服务功能,并根据需要更新服务配置文件。
保存文件并提交到源代码存储库。
在 Playwright 设置中启用工件
启用 Playwright 捕获的项目,例如屏幕截图、视频和跟踪。
收集这些项目后,将它们附加到 TestContext
,以确保它们在测试报告中可用。 有关详细信息,请参阅我们的 NUnit 示例项目
更新工作流定义
更新 CI 工作流定义,以使用 Playwright CLI 运行 Playwright 测试。 将服务配置文件作为 Playwright CLI 的输入参数传递。 通过指定环境变量来配置环境。
打开 CI 工作流定义
添加以下步骤以在 Microsoft Playwright Testing 中运行 Playwright 测试。
以下步骤介绍了 GitHub Actions 或 Azure Pipelines 的工作流更改。 同样,可以在其他 CI 平台中使用 Playwright CLI 运行 Playwright 测试。
# This step is to sign-in to Azure to run tests from GitHub Action workflow. # Choose how to set up authentication to Azure from GitHub Actions. This is one example. on: push: branches: [ main, master ] pull_request: branches: [ main, master ] permissions: # Required when using Microsoft Entra ID to authenticate id-token: write contents: read jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Login to Azure with AzPowershell (enableAzPSSession true) uses: azure/login@v2 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} enable-AzPSSession: true - name: Install dependencies working-directory: path/to/playwright/folder # update accordingly run: npm ci - name: Run Playwright tests working-directory: path/to/playwright/folder # update accordingly env: # Regional endpoint for Microsoft Playwright Testing PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }} PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }} run: npx playwright test -c playwright.service.config.ts --workers=20 - name: Upload Playwright report uses: actions/upload-artifact@v3 if: always() with: name: playwright-report path: path/to/playwright/folder/playwright-report/ # update accordingly retention-days: 10
更新 CI 工作流定义,以使用 Playwright NUnit CLI 运行 Playwright 测试。 将 .runsettings
文件作为 Playwright CLI 的输入参数传递。 通过指定环境变量来配置环境。
打开 CI 工作流定义。
添加以下步骤以在 Microsoft Playwright Testing 中运行 Playwright 测试。
以下步骤介绍了 GitHub Actions 或 Azure Pipelines 的工作流更改。 同样,可以在其他 CI 平台中使用 Playwright CLI 运行 Playwright 测试。
on: push: branches: [ main, master ] pull_request: branches: [ main, master ] permissions: # Required when using AuthType as EntraId id-token: write contents: read jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 # This step is to sign-in to Azure to run tests from GitHub Action workflow. # Choose how to set up authentication to Azure from GitHub Actions. This is one example. - name: Login to Azure with AzPowershell (enableAzPSSession true) uses: azure/login@v2 with: client-id: ${{ secrets.AZURE_CLIENT_ID }} tenant-id: ${{ secrets.AZURE_TENANT_ID }} subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }} enable-AzPSSession: true - name: Setup .NET uses: actions/setup-dotnet@v4 with: dotnet-version: 8.0.x - name: Restore dependencies run: dotnet restore working-directory: path/to/playwright/folder # update accordingly - name: Build run: dotnet build --no-restore working-directory: path/to/playwright/folder # update accordingly - name: Run Playwright tests working-directory: path/to/playwright/folder # update accordingly env: # Regional endpoint for Microsoft Playwright Testing PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }} PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }} run: dotnet test --settings:.runsettings --logger "microsoft-playwright-testing" -- NUnit.NumberOfTestWorkers=20 - name: Upload Playwright report uses: actions/upload-artifact@v3 if: always() with: name: playwright-report path: path/to/playwright/folder/playwright-report/ # update accordingly retention-days: 10
保存并提交更改。
触发 CI 工作流后,Playwright 测试将在云托管浏览器上的 Microsoft Playwright Testing 工作区中运行,并且将跨 20 个并行辅助角色运行。 收集的结果和项目将发布到服务,可以在服务门户中查看。
可在 .runsettings
文件中定义测试性运行的设置。 有关详细信息,请参阅如何使用服务包选项
注意
默认为现有工作区启用报告功能。 这将分阶段推出,需要几天时间。 为避免失败,请在继续操作之前,确认工作区的 Rich diagnostics using reporting
设置为“开”。 有关详细信息,请参阅为工作区启用报告。
注意
使用 Microsoft Playwright Testing 时,你将根据消耗的总测试分钟数和发布的测试结果数付费。 如果你是第一次使用或开始使用免费试用版,可以大规模运行单个测试(而不是完整测试套件),以避免耗尽免费测试分钟数和测试结果数。
验证测试是否成功运行后,可以使用服务运行更多测试以逐步增加测试负载。
可以使用以下命令行对服务运行单个测试:
npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts
在 Playwright 门户中查看测试运行和结果
现在,你可以在 Playwright 门户中排查 CI 管道问题。
测试性运行完成后,会在终端中获得 Playwright 门户的链接。 打开此链接即可查看详细的测试结果和关联的工件。 该门户会显示基本信息,包括:
- CI 生成详细信息
- 总体测试运行状态
- 链接到测试运行的提交 ID
Playwright 门户会提供故障排除所需的所有信息。 您可以:
- 查看详细的错误日志和附加项目(例如屏幕截图或视频)。
- 直接导航到“跟踪查看器”,进行更深入的分析。
注意
某些元数据(例如所有者、说明和类别)当前未显示在服务仪表板上。 如果希望添加其他信息,请在我们的存储库中提交 GitHub 问题。
提示
可以独立使用 Microsoft Playwright Testing 服务功能。 无需使用云托管的浏览器功能即可将测试结果发布到门户,并可以仅使用云托管的浏览器来加快测试套件的速度,而无需发布测试结果。 有关详细信息,请参阅如何使用服务功能。
注意
发布的测试结果和项目会在服务上保留 90 天。 之后,它们会自动删除。
相关内容
你已成功设置一个持续端到端测试工作流,以便在云托管浏览器上大规模运行 Playwright 测试。