![[Playwright] [02]常用命令与调试：Debug UI、Mode和 Trace Viewer](http://pic.xiahunao.cn/yaotu/[Playwright] [02]常用命令与调试：Debug UI、Mode和 Trace Viewer)
1. 前言
写自动化测试最头疼的是什么？
不是写代码，而是测试突然失败了，还不知道怎么debug，一步步加console.log好烦。
明明昨天还能跑，今天就红了。终端甩过来一大段报错，翻了半天，结果可能只是定位器写错了，或者断言写得太死。
好在 Playwright 自带了不少调试工具。这篇就拿 Bing 搜索做个小实验，让测试失败，看看怎么一步步找到问题。
2. 先写一个会失败的 Demo
创建tests/demo/bing.spec.ts：
故意设计一个失败的断言，因为这个程序会执行到最后失败，所以过程可以看的很清晰
import{test,expect}from'@playwright/test';test('Bing Playwright',async({page})=>{awaitpage.goto('https://www.bing.com/');constsearch=page.locator('#sb_form_q');// 输入关键词awaitsearch.fill('Playwright');// 点击搜索awaitpage.locator('#search_icon').click();// 验证搜索页面 URLawaitexpect(page).toHaveTitle('Google');});});运行：
npx playwrighttesttests/demo/bing.spec.ts--project=chromium不出意外，测试失败。
终端报错信息
从控制台的提示简单判断，最后是断言失败，expect和receive不一致
但如果想知道浏览器到底执行了什么操作，该怎么看？
3. --headed：先看看浏览器在干什么
npx playwrighttesttests/demo/bing.spec.ts--project=chromium--headed加上--headed，浏览器就不再躲在后台运行了。
我们可以直接看到它打开 Bing、输入关键词、提交搜索。
不过执行速度有时候挺快，眼睛还没看清楚，浏览器就关了。
想慢慢看？那就轮到 Debug Mode 了。
【Bing 搜索页面】
4. --debug：一步一步查问题
npx playwrighttesttests/demo/bing.spec.ts--project=chromium--debug运行后会打开 Playwright Inspector 和浏览器。
这次不用追着浏览器跑了，可以自己控制执行节奏。
比如先执行goto()，看看页面有没有打开；再执行fill()，确认关键词有没有输入；接着执行press('Enter')，看看搜索有没有提交成功。
最后执行到toHaveTitle('Google')，测试失败。
哦，原来前面都没问题，是我们自己把预期标题写错了。
Inspector 单步调试
我觉得 Debug Mode 特别适合刚写完测试、还不确定每一步是否正确的时候使用。
按最右侧有个绿色按钮，单步执行
5. --ui：不想盯着终端？试试 UI Mode
npx playwrighttesttests/demo/bing.spec.ts--uiUI Mode 是 Playwright 自带的图形界面。
可以在里面选择测试、点击运行，还能查看操作步骤、页面快照和报错信息。
相比 Debug Mode 的“边执行边检查”，UI Mode 更像是把测试过程整理出来，让我们回头慢慢看。
比如这次 Bing 搜索测试，我们可以点击失败的断言，看看预期标题和实际标题有什么区别。
UI Mode 的测试步骤与失败信息
平时反复运行、修改测试用例时，我觉得这个界面挺方便，不用每次都去终端翻log
6. Trace Viewer：测试跑完了，还能回看？
有时候测试在本地跑得好好的，一放到 CI 就失败。
这时候总不能对着终端猜：它到底在哪一步出了问题吧？
Playwright 的 Trace Viewer 就派上用场了。
先开启 Trace：
npx playwrighttesttests/demo/bing.spec.ts--project=chromium--traceon然后打开报告：
npx playwright show-report在测试详情里打开 Trace，就可以回看执行过程。
里面可以查看操作步骤、页面快照、网络请求和对应代码。
Trace Viewer 操作时间线
有点像给自动化测试装了一个“行车记录仪”：出问题了，不用全靠猜，可以回头看看当时发生了什么。
不过 Trace 也不是万能的。它能帮我们找到线索，具体为什么失败，还是需要结合代码和页面行为分析。
7. 常用命令整理
| 命令 | 用途 |
|---|---|
npx playwright test | 运行测试 |
--headed | 显示浏览器执行过程 |
--debug | 打开 Inspector，逐步调试 |
--ui | 图形界面运行和查看测试 |
--trace on | 记录测试过程 |
npx playwright show-report | 查看 HTML 测试报告 |
npx playwright show-trace | 打开 Trace 文件 |
8. 总结
这次故意写错 Bing 搜索测试的断言，分别体验了几种调试方式。
- 想看看浏览器在干什么，用
--headed。 - 想一步一步执行代码，用
--debug。 - 想在图形界面里运行、查看测试，用
--ui。 - 想在测试结束后回放执行过程，用 Trace Viewer。
我个人建议，先直接看terminal终端的报错，大部分报错信息，尤其是代码写错了，找不到，一些比较容易解决的bug这里都是看得出来的。如果看这里解决不了，就去看ui，首推debug，因为可以一步步看，尤其是遇到页面加载不出来直接断言失败，这个就可以很有效的检测出来。如果test很多，那就去html里面看具体的某一个是什么原因。如果不想看视频想看图片，就用trace，可以回溯执行过程、页面状态和网络请求，功能很全面。
参考文档：
- https://playwright.dev/docs/debug
