如何在Azure DevOps Pipeline中运行Playwright测试

以下是将Playwright本地测试流程转换为Azure DevOps Pipeline任务的具体步骤，附完整YAML示例：

1. 指定代理池 #

选择支持Playwright的微软托管代理，推荐使用ubuntu-latest（兼容性最优），也可根据测试需求选择windows-latest或macos-latest：

pool:
  vmImage: 'ubuntu-latest'

2. 拉取代码仓库 #

默认会自动执行代码拉取任务，若需自定义（如拉取子模块），可显式添加：

steps:
- checkout: self
  submodules: true

3. 安装Node.js环境 #

根据项目使用的Node.js版本，用NodeTool任务配置：

- task: NodeTool@0
  inputs:
    versionSpec: '20.x' # 替换为你的项目Node版本
  displayName: 'Install Node.js'

4. 安装项目依赖 #

使用npm ci（CI环境更稳定，依赖lockfile）安装项目依赖：

- script: npm ci
  displayName: 'Install project dependencies'

5. 安装Playwright浏览器及系统依赖 #

执行Playwright的安装命令，自动下载对应浏览器并安装系统级依赖：

- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers and dependencies'

6. 运行Playwright测试 #

执行测试命令，可指定配置文件、报告格式（如JUnit格式用于Azure DevOps测试结果展示）：

- script: npx playwright test --config=playwright.config.ts --reporter=junit,html
  displayName: 'Run Playwright tests'
  env:
    # 若测试依赖环境变量，在此添加
    TEST_ENV: 'production'

7. 发布测试结果与报告 #

• 上传JUnit测试结果到Azure DevOps，便于在管道中查看测试统计：

- task: PublishTestResults@2
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: '**/playwright-report/junit.xml'
    failTaskOnFailedTests: true # 测试失败时终止管道，可根据需求调整
  displayName: 'Publish JUnit test results'
  condition: succeededOrFailed() # 无论测试成功失败都执行

• 保存HTML测试报告作为管道产物，方便后续查看详细测试步骤：

- task: PublishPipelineArtifact@1
  inputs:
    targetPath: 'playwright-report'
    artifact: 'playwright-html-report'
    publishLocation: 'Container'
  displayName: 'Publish Playwright HTML report'
  condition: succeededOrFailed()

完整YAML示例 #

trigger:
- main # 触发管道的分支，可根据需求修改

pool:
  vmImage: 'ubuntu-latest'

steps:
- checkout: self

- task: NodeTool@0
  inputs:
    versionSpec: '20.x'
  displayName: 'Install Node.js'

- script: npm ci
  displayName: 'Install project dependencies'

- script: npx playwright install --with-deps
  displayName: 'Install Playwright browsers and dependencies'

- script: npx playwright test --config=playwright.config.ts --reporter=junit,html
  displayName: 'Run Playwright tests'

- task: PublishTestResults@2
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: '**/playwright-report/junit.xml'
    failTaskOnFailedTests: true
  displayName: 'Publish JUnit test results'
  condition: succeededOrFailed()

- task: PublishPipelineArtifact@1
  inputs:
    targetPath: 'playwright-report'
    artifact: 'playwright-html-report'
    publishLocation: 'Container'
  displayName: 'Publish Playwright HTML report'
  condition: succeededOrFailed()

注意事项 #

• 若使用pnpm或yarn，需将npm ci替换为pnpm install --frozen-lockfile或yarn install --frozen-lockfile，并确保代理环境安装了对应包管理器（可添加前置任务安装）。
• 若测试需要访问特定服务（如数据库、API），需在管道中配置对应的连接或环境变量。
• Windows代理下需注意命令格式，可将script替换为powershell任务，命令保持不变。

内容的提问来源于stack exchange，提问作者Punter Vicky