功能测试流程与自动化脚本
8.11 运行测试与调试
Tip
优秀的侦探从不猜测，他们只看监控录像。
1. 为什么要学这个?
你的测试脚本在 CI (云端) 上跑挂了。 你抓破头也想不通：明明本地跑得好好的，为什么到了云上就挂？是服务器网速慢？还是按钮被挡住了？
在没有录像的情况下调试自动化测试，就像蒙着眼睛在高速公路上修车。 Playwright 提供了黑匣子 (Trace Viewer)，能让你像看电影一样回放 Bug 发生前的那一秒。
2. 核心概念：Trace Viewer (黑匣子)
Trace Viewer 记录了测试过程中的一切：
- 屏幕快照：每一帧画面，像 GIF 一样可回放。
- DOM 快照：你可以检查每一个历史时刻的 HTML 元素。
- 网络请求：当时发了什么包，后端回了什么数据。
3. 解决方案 (HOW)
场景一：本地调试 (UI Mode)
这是最爽的调试方式，像玩游戏一样。
npx playwright test --ui
它会打开一个控制台。
- 点击进度条，时间倒流，回到报错前的那一刻。
- 鼠标悬停在按钮上，看看它的 CSS 属性到底算出了什么。
场景二：云端调试 (Trace File)
GitHub Actions 没有屏幕，怎么看录像？
配置 playwright.config.ts：
use: {
// 只有在测试重试第一次时，才保留录像 (节省资源)
trace: 'on-first-retry',
},
当 CI 挂了，它会生成一个 trace.zip。
下载它，访问 trace.playwright.dev，把 ZIP 拖进去。瞬间还原案发现场。
4. 真实案例
Story
“周一早晨的幽灵 Bug”
某团队有一个测试，平时都过，但每逢周一早上必挂。 工程师本地跑了 100 遍都没事，甚至怀疑服务器有“周一综合症”。
后来他们打开了 Trace Viewer 的录像。 真相大白： 录像显示，每周一早上 9 点，市场部配置的一个“本周特惠”全屏弹窗会自动生效。 这个弹窗挡住了登录按钮。 而工程师本地跑测试是在下午，弹窗已经关闭了。
Vibe 心法：不要在脑子里模拟代码运行。代码的运行环境极其复杂，只有真实的录像能告诉你真相。Trace Viewer 是终结“我的电脑没问题”这句话的最佳武器。
5. 本章小结
- UI 模式：本地写测试时常驻
npx playwright test --ui。 - CI 录像：一定要开启 CI 的 Trace 记录，否则报错了你只能干瞪眼。
- 信任数据：如果 Trace 显示元素不可见，那它就是不可见，别怀疑是机器出了错。