Day 22 - HTML, JUnit, and Allure Reports

今日目标

掌握 Playwright 内置报告。
了解 CI 常用报告格式。

学习时间安排（60–120 分钟）

时间	模块	做什么
0-20 分钟	核心概念与词汇	读概念表，区分四种 reporter 的读者和场景。
20-45 分钟	官方文档阅读	读 Reporters 文档，重点看 HTML 和 JUnit 部分。
45-75 分钟	实操练习	生成 HTML report 和 JUnit XML。
75-105 分钟	示例代码改写	配置多 reporter 组合，观察各自输出。
105-120 分钟	复盘与作业	完成“报告如何用于缺陷分析”笔记，完成今日问题。

核心概念与词汇

English	中文	场景用法
HTML report	HTML 报告	Use it when humans review pass/fail, screenshots, traces, and videos.
JUnit XML	JUnit 格式报告	Use it when CI systems consume machine-readable results.
Allure	Allure 报告	Use it when you need trend history and richer failure categorization.
list reporter	列表报告	Use it when you watch a live run in the terminal.
artifact	CI 产物	Use it when reports are uploaded and downloadable from CI runs.
pass rate	通过率	Use it when you summarize a run for the team.
failure reason	失败原因	Use it when you read the error and step details of a failed test.
retry info	重试信息	Use it when you check whether a test passed on a retry.
execution time	执行时长	Use it when you spot slow tests in the report.
trend analysis	趋势分析	Use it when reports accumulate over runs for quality metrics.

学习材料

必读：[HTML Reporter](https://playwright.dev/docs/test-reporters#html-reporter)
必读：[JUnit reporter](https://playwright.dev/docs/test-reporters#junit-reporter)
选读：[Allure reporter](https://playwright.dev/docs/test-reporters#allure-reporter)

重点理解

配置报告：

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

查看报告：

npx playwright show-report

报告应该包含：

测试通过率。
失败用例。
失败原因。
截图。
Trace。
视频。
重试信息。
执行时间。

实操步骤

运行一组包含成功和失败的测试，生成 HTML report 和 JUnit XML。

示例代码

# 运行并生成报告
npx playwright test --reporter=html,list

# 指定 JUnit 输出
npx playwright test --reporter=junit --output=test-results

# 打开 HTML 报告
npx playwright show-report

# CI 中上传报告产物
- uses: actions/upload-artifact@v4
  if: always()
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 30

常见坑

只配 HTML 不配 JUnit，CI 无法消费结果、趋势统计做不了。
报告产物没上传，CI 失败后只能本地重跑。
if: always() 没写，测试失败时报告产物不生成。
报告目录被 Git 提交，仓库膨胀。
报告只看“红没红”，不分析失败原因和重试信息。

今日产出

HTML report。
JUnit XML。
一份“报告如何用于缺陷分析”的笔记。

今日问题

HTML report 适合谁看？
JUnit XML 适合什么场景？
报告中最关键的失败信息是什么？
视频和 Trace 哪个更适合定位问题？
测试报告如何帮助团队决策？

复盘要点

报告是分层的：HTML 给人看，JUnit/JSON 给机器看，Allure 给长期趋势看。
一个完整 CI 闭环 = 运行 + 报告 + 产物上传 + 失败通知，今天你补齐的是中间两环。
报告的价值在“被看到”：上传产物、保留天数、失败通知缺一不可。

AI 时代扩展：AI 辅助 Playwright 测试

新增概念

English	中文
report summarization	报告摘要
failure clustering	失败聚类
quality metrics	质量度量

适用场景

让 AI 把 JUnit XML 或失败列表汇总成团队日报（分类、占比、最可疑用例），或者从历史失败数据里聚类出反复失败的用例。

可复用表达 / 提示词

以下是本次 CI 的失败用例列表和错误信息，请汇总为测试日报：失败分类、占比、最可疑的 3 条、建议动作。
这是过去 2 周的 JUnit 结果，请找出反复失败的用例并归类失败模式。

追问加练

AI 汇总的日报里，哪类结论需要你人工核对数据源？
失败聚类能帮团队做什么决策？
让 AI 直接看 HTML 报告截图可行吗？更好的输入是什么？

今日作业

生成 HTML report + JUnit XML，截图保存报告概览。
完成“报告如何用于缺陷分析”笔记（谁看、看什么、怎么用）。
让 AI 根据你的 JUnit XML 生成一份测试日报草稿。

自检清单

我能配置 html、list、junit 三种 reporter。
我知道 HTML 报告和 JUnit XML 各自的读者。
我的 CI 流程会上传报告产物。
我知道 retry 信息在报告里怎么看。
明天学习并行时，我能说清报告如何汇总多 worker 结果。