Playwright Trace Viewer定位前端偶现失败

2023年10月记录，分类「Playwright」。内容按测试执行视角整理，尽量把背景、操作和验收口径讲清楚。

为什么看trace

前端偶现失败只看截图经常不够。Trace Viewer 能把 DOM、请求、控制台、操作步骤串起来，适合排查偶发等待和接口慢导致的问题。

记录这篇的目的，是让下次遇到同类问题时少走一轮弯路。

保留哪些信息

• CI 中失败用例保留 trace，成功用例不长期保存。
• 定位时先看 action 前后的 DOM 和网络请求。
• 把前端 console 错误和后端 traceId 一起贴进缺陷。

npx playwright test tests/order.spec.ts --trace on
npx playwright show-trace test-results/order/trace.zip

定位步骤

• 能区分页面没加载、按钮不可点、接口返回慢。
• trace 文件和用例版本能对应。
• 偶现问题有足够现场给开发复现。

这类内容最怕只靠口头传递，所以我会把命令、样本和异常分支一起留下。

经验

Trace 的价值是还原过程，不是单纯多一个附件。如果放到流水线里，建议先从最小冒烟开始，再逐步扩大覆盖。