如何在Azure DevOps中通过TypeScript版Playwright发布测试图片附件？

完全可行，以下是具体实现步骤：

1. 确保测试中正确附加截图 #

在Playwright测试用例里，使用testInfo.attach()时必须指定正确的contentType，让Azure DevOps识别为图片格式：

test('示例测试用例', async ({ page }, testInfo) => {
  await page.goto('https://your-test-url.com');
  
  // 执行测试操作...
  
  // 截图并附加到测试结果
  const screenshotBuffer = await page.screenshot();
  await testInfo.attach('测试截图', {
    body: screenshotBuffer,
    contentType: 'image/png' // 必须指定，否则Azure可能无法识别为图片
  });
});

2. 配置Playwright生成JUnit格式报告 #

Azure DevOps对JUnit格式的测试报告支持更好，能自动关联附件。在playwright.config.ts中添加JUnit报告配置：

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['html', { outputFolder: 'tests-out/html' }], // 保留HTML报告方便本地查看
    ['junit', { outputFile: 'tests-out/results.xml' }] // 生成JUnit报告给Azure DevOps
  ],
  use: {
    screenshot: 'on', // 你已配置的自动截图
    // 其他配置...
  },
  // 其他配置...
});

3. 更新Azure DevOps YAML流水线配置 #

替换原有的仅发布artifacts的步骤，添加发布测试结果任务（该任务会自动处理附件关联）：

- task: PublishTestResults@2
  displayName: '发布测试结果及截图'
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: '**/results.xml'
    searchFolder: '$(System.DefaultWorkingDirectory)/tests-out'
    publishRunAttachments: true # 关键：启用附件发布，让截图关联到测试用例
  condition: always() # 不管测试成功失败都执行

关键说明 #

• 原理和C# NUnit一致：都是通过标准测试报告格式（JUnit/TRX）将附件与测试用例绑定，Azure DevOps解析报告后自动在测试详情页展示图片。
• 无需单独发布artifacts，PublishTestResults@2任务会自动上传报告关联的附件到测试结果中。
• 如果保留原有的artifacts发布步骤也没问题，但核心是通过测试报告关联截图到测试详情。

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