Playwright HTML报告无法显示错误截图问题求助

我搭建了一个Playwright项目，通过ADO流水线运行测试，已配置测试失败时自动捕获截图和trace。目前遇到两个问题：

• HTML报告中的错误截图无法直接预览，必须下载才能查看
• 点击截图或trace链接时出现报错

相关截图 #

生成的HTML报告 #

点击链接时的错误页面 #

已发布的ADO工件 #

当前配置代码 #

playwright.config.ts #

export default defineConfig({
  testDir: './tests',
  fullyParallel: false,
  reporter: [['html', { open: 'never' }]],
  use: {
    screenshot: 'only-on-failure',
    trace: 'retain-on-failure',
  },
})

ado_pipeline.yaml #

- task: PublishPipelineArtifact@1
  inputs:
    targetPath: tests/playwright-report
    artifact: playwright-report
    publishLocation: 'pipeline'
  condition: succeededOrFailed()

问题原因及解决方法 #

核心原因 #

Playwright生成的HTML报告中，截图和trace的资源链接使用相对路径，但ADO通过PublishPipelineArtifact@1发布工件后，报告的访问URL与资源的实际存储路径不匹配，导致浏览器无法正确加载资源，只能触发下载，点击链接则返回404错误。

解决方法 #

方法1：使用ADO专属的HTML报告发布任务（推荐）

替换PublishPipelineArtifact@1为PublishHtmlReport@1任务，该任务会自动处理资源路径映射，无需手动配置：

- task: PublishHtmlReport@1
  inputs:
    reportDir: 'tests/playwright-report'
    reportName: 'Playwright Test Report'
  condition: succeededOrFailed()

发布后，在ADO流水线的测试标签页中查看报告，截图可直接预览，trace链接也能正常打开。

方法2：手动配置Playwright报告的路径前缀

如果必须使用PublishPipelineArtifact@1，则需要在Playwright配置中指定资源的绝对路径前缀：

1. 修改playwright.config.ts的reporter配置，添加pathPrefix：

reporter: [['html', { 
  open: 'never',
  // 利用ADO预定义变量动态生成工件访问路径前缀
  pathPrefix: `/_apis/build/builds/${process.env.BUILD_BUILDID}/artifacts?artifactName=playwright-report&api-version=7.1&%24format=zip`
}]]

2. ADO默认已提供BUILD_BUILDID环境变量，确保Playwright运行时能获取到该变量。

方法3：确认报告目录结构完整

测试运行后，检查tests/playwright-report目录下是否包含screenshots、tracings子目录及对应资源文件，避免发布时遗漏关键资源。

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