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--ui

UI 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. 常用命令整理

8. 总结

这次故意写错 Bing 搜索测试的断言，分别体验了几种调试方式。

• 想看看浏览器在干什么，用--headed。
• 想一步一步执行代码，用--debug。
• 想在图形界面里运行、查看测试，用--ui。
• 想在测试结束后回放执行过程，用 Trace Viewer。

我个人建议，先直接看terminal终端的报错，大部分报错信息，尤其是代码写错了，找不到，一些比较容易解决的bug这里都是看得出来的。如果看这里解决不了，就去看ui，首推debug，因为可以一步步看，尤其是遇到页面加载不出来直接断言失败，这个就可以很有效的检测出来。如果test很多，那就去html里面看具体的某一个是什么原因。如果不想看视频想看图片，就用trace，可以回溯执行过程、页面状态和网络请求，功能很全面。

参考文档：

• https://playwright.dev/docs/debug