使用Playwright与Azure DevOps实现自动化UI测试的完整指南

介绍

现代Web应用程序需要一致、可靠的跨浏览器测试来确保质量。Playwright已迅速成为端到端自动化的领先工具，提供速度、灵活性以及对当今浏览器和框架的开箱即用支持。另一方面，Azure DevOps提供了微软强大的基于云的CI/CD解决方案。当两者结合时，它们为构建可靠、可扩展的自动化UI测试流水线奠定了强大基础。

本文逐步向您展示如何将Playwright与Azure DevOps集成：

在每次推送时自动运行测试
使用自托管代理获得完整的浏览器支持
生成并发布Playwright的HTML和JUnit测试报告
扩展流水线以并行运行测试

到最后，您将熟悉一个完全可用的Playwright流水线，该流水线可以无头或有头运行并存储结果。

前置条件

微软账户（Hotmail或Outlook即可）
本地安装VS Code
基本的Node.js和npm知识
访问Azure DevOps

高级步骤

创建Azure DevOps组织和项目
设置Git仓库并克隆
安装Playwright并在本地验证
将测试推送到Azure DevOps仓库
配置自托管代理
创建并运行YAML流水线
发布Playwright HTML/JUnit报告
启用CI触发器以实现自动执行

步骤1：创建Azure DevOps组织和项目

转到Azure DevOps
使用您的微软账户登录。如果没有微软账户，请创建一个
点击"新建组织"，然后设置一个唯一的名称
在组织内部，点击"新建项目"（例如：Playwright-Azure_Integration）

步骤2：创建Git仓库

导航到"仓库">“文件”
如果尚不存在仓库，点击"新建仓库"
复制仓库克隆URL。我们需要在VS Code中使用它

步骤3：在VS Code中本地克隆仓库

打开VS Code
安装Azure Repos扩展以便更轻松地提交和推送
打开命令面板（Ctrl+Shift+P），输入Git: Clone，并粘贴仓库URL
选择一个本地文件夹作为测试存放位置

步骤4：安装Playwright并验证

在VS Code终端中运行：

1

npm init playwright@latest

选择JavaScript。由于我们使用Azure DevOps，对GitHub Actions选择"No"。

安装后，项目应包含以下构件：

1
2
3
4
5
6


node_modules/
tests/
package.json
playwright.config.js
playwright-report/
test-results/

步骤5：编写示例测试

在tests文件夹内，创建sample.spec.js用于简单的UI自动化：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { test, expect } from '@playwright/test';

test('Open Google', async ({ page }) => {
  await page.goto('https://www.google.com/');
  expect(await page.title()).toContain('Google');
});

test('Open Playwright', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  expect(await page.title()).toContain('Playwright');
});

注意： Playwright测试默认以无头模式运行。如果想在运行期间看到浏览器，请添加(–headed)：

1

npx playwright test --headed --project=chromium --workers=2

步骤6：添加HTML和JUnit报告器

在playwright.config.js中，配置报告器以同时拥有HTML和Junit报告：

1
2
3
4


reporter: [
  ['html'],
  ['junit', { outputFile: 'test-results/TEST-junitreport.xml' }]
],

步骤7：推送到Azure DevOps仓库

在VS Code源代码管理中暂存更改
使用清晰的消息提交，例如"Initial Playwright Setup"
点击"推送"
确认您的文件出现在Azure DevOps的"仓库">“文件"下

步骤8：设置自托管代理

Playwright需要真实的浏览器，因此最好在自托管代理上运行测试，而不是微软的默认代理。

为什么？

Playwright可能在Microsoft托管的代理上没有安装浏览器依赖项
您获得完全控制并减少队列延迟

如何安装：

转到"项目设置”>“代理池”>“默认”>“新建代理”
选择您的操作系统：Windows、Linux或macOS
下载代理zip文件
将其解压缩到某个位置（例如：C:\agent）
在命令提示符中：

1
2


cd C:\agent
config.cmd

按如下方式提供信息：
- DevOps组织URL（https://dev.azure.com/）
- 个人访问令牌（PAT）（在"用户设置">“个人访问令牌"下创建）
- 代理名称（例如：MyPlaywrightAgent）

要启动，运行命令：run.cmd

在代理池中验证代理必须在线。

注意：如果您的代理离线，重新运行run.cmd使其恢复在线。

步骤9：创建YAML流水线

转到"流水线”>“新建流水线”，选择YAML，选择仓库，并粘贴以下内容来配置流水线：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


trigger:
  - none
  
pool:
  name: Default  # 使用自托管代理

steps:
  - script: npm ci
    displayName: 'Install Dependencies'
    
  - script: npx playwright install --with-deps
    displayName: 'Install Playwright Browsers'
    
  - script: npx playwright test --headed --project=chromium --workers=2
    displayName: 'Run Playwright Tests'
    env:
      CI: 'true'
      
  - task: PublishPipelineArtifact@1
    inputs:
      targetPath: 'playwright-report'
      artifact: 'playwright-report'
      publishLocation: 'pipeline'
    condition: succeededOrFailed()
    
  - task: PublishTestResults@2
    inputs:
       testResultsFormat: 'JUnit'
       testResultsFiles: '**/TEST-*.xml'
    condition: succeededOrFailed()

步骤10：运行和检查

保存YAML流水线
点击"运行流水线"
按照日志查看：
- 安装依赖项
- 安装浏览器
- 运行Playwright测试
- 上传HTML和JUnit报告

转到"构件"选项卡→下载playwright-report→打开index.html查看测试结果！

在"测试"选项卡中，检查JUnit结果。

注意：将命令从–headed更改为–headless以更快地运行流水线：

1

npx playwright test --project=chromium --workers=2

步骤11：启用CI触发器

我们可以在每次提交时自动运行测试。更改触发器如下：

1
2


trigger:
  - main

现在，每次推送到主分支都会自动启动Playwright流水线。

故障排除

问题	解决方案
代理卡在离线状态	确保run.cmd仍在运行
在Microsoft代理上测试失败	使用安装了所需浏览器的自托管代理
playwright install步骤失败	添加(–with-deps)以确保Playwright下载所有必要的浏览器二进制文件

结果

并行执行
丰富的HTML和JUnit报告
自托管代理以实现控制
每次提交时自动运行

这种集成有助于团队快速获得UI更改的反馈，及早发现回归，并在Azure DevOps内维护一个跨现代浏览器的强大测试自动化流水线。

进一步步骤？

为跨浏览器运行添加更多Playwright项目
在Azure Artifacts或外部存储中存储测试构件
与部署流水线结合以实现端到端CI/CD

社交资料

您尝试过将Playwright与其他CI工具一起使用吗？如果您有任何建议，请留言。如果您喜欢我的帖子，请在LinkedIn上与我联系：www.linkedin.com/in/ramana-pochampally-b2423a172