Playwright 实战指南 — 第六部分：像专家一样调试 — 追踪查看器、检查器与 VS Code
“凌晨两点在持续集成环境中失败的测试告诉你哪里出了问题。而追踪查看器告诉你原因。”
在第一部分中，我们编写了可靠的测试。在第二部分到第五部分中，我们层层构建——网络拦截、多用户流程、应用程序接口测试、视觉回归测试。
现在，某些东西出错了。
这总是会发生。
问题不在于你的测试是否会失败，而在于你能多快地理解失败的原因。
大多数工程师是这样调试 Playwright 的：
// 🔴 经典的调试方法
console.log('到达此处 1');
await page.click(someLocator);
console.log('到达此处 2');
或者更糟糕的是——他们添加 waitForTimeout(5000) 并希望问题自行消失。
有一种更好的方法。Playwright 自带一套功能强大的调试工具包，一旦你开始使用它，你就再也不会回到使用 console.log 的日子了。
追踪查看器。Playwright 检查器。VS Code 集成。page.pause()。
这些工具在一个可视化的时间轴上向你展示每一次点击、每一次网络调用、每一次文档对象模型快照、每一个控制台错误——逐步精确地重建发生的一切。
让我们将调试层构建到我们的框架中。🎯
🏗️ 我们停在哪里
在第五部分之后，我们完整的项目结构如下：
playwright-playbook/
├── tests/
│ ├── auth/
│ │ └── login.spec.ts ✅ 第一部分
│ ├── tasks/
│ │ └── task-management.spec.ts ✅ 第一部分
│ ├── network/ ✅ 第二部分
│ │ ├── api-mocking.spec.ts
│ │ ├── error-simulation.spec.ts
│ │ └── network-assertions.spec.ts
│ ├── multi-user/ ✅ 第三部分
│ │ ├── role-permissions.spec.ts
│ │ └── realtime-collaboration.spec.ts
│ ├── multi-tab/ ✅ 第三部分
│ │ └── multi-tab-flows.spec.ts
│ ├── api/ ✅ 第四部分
│ │ ├── tasks-api.spec.ts
│ │ ├── auth-api.spec.ts
│ │ ├── graphql-api.spec.ts
│ │ └── api-ui-chain.spec.ts
│ └── visual/ ✅ 第五部分
│ ├── dashboard-visual.spec.ts
│ ├── task-visual.spec.ts
│ └── responsive-visual.spec.ts
├── pages/
│ ├── LoginPage.ts ✅ 第一部分
│ ├── TaskPage.ts ✅ 第一部分
│ └── DashboardPage.ts ✅ 第三部分
├── api/
│ ├── TaskApiClient.ts ✅ 第四部分
│ └── AuthApiClient.ts ✅ 第四部分
├── fixtures/
│ ├── auth.fixture.ts ✅ 第一部分
│ ├── tasks.json ✅ 第二部分
│ ├── empty-tasks.json ✅ 第二部分
│ ├── tasks-har.har ✅ 第二部分
│ ├── multi-user.fixture.ts ✅ 第三部分
│ └── api.fixture.ts ✅ 第四部分
├── scripts/
│ └── record-har.ts
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
