[Playwright] [02]常用命令与调试：Debug UI、Mode和 Trace Viewer

1. 前言

写自动化测试最头疼的是什么？

不是写代码，而是测试突然失败了，还不知道怎么debug，一步步加console.log好烦。

明明昨天还能跑，今天就红了。终端甩过来一大段报错，翻了半天，结果可能只是定位器写错了，或者断言写得太死。

好在 Playwright 自带了不少调试工具。这篇就拿 Bing 搜索做个小实验，让测试失败，看看怎么一步步找到问题。

2. 先写一个会失败的 Demo

创建 tests/demo/bing.spec.ts：

故意设计一个失败的断言，因为这个程序会执行到最后失败，所以过程可以看的很清晰

typescript 复制代码

import { test, expect } from '@playwright/test';

test('Bing Playwright', async ({ page }) => {
  await page.goto('https://www.bing.com/');
 
  const search = page.locator('#sb_form_q');
 
  // 输入关键词
  await search.fill('Playwright');
  // 点击搜索
  await page.locator('#search_icon').click();

  // 验证搜索页面 URL
  
 await expect(page).toHaveTitle('Google');
});



});

运行：

bash 复制代码

npx playwright test tests/demo/bing.spec.ts --project=chromium

不出意外，测试失败。

终端报错信息

从控制台的提示简单判断，最后是断言失败，expect和receive不一致

但如果想知道浏览器到底执行了什么操作，该怎么看？

3. --headed：先看看浏览器在干什么

bash 复制代码

npx playwright test tests/demo/bing.spec.ts --project=chromium --headed

加上 --headed，浏览器就不再躲在后台运行了。

我们可以直接看到它打开 Bing、输入关键词、提交搜索。

不过执行速度有时候挺快，眼睛还没看清楚，浏览器就关了。

想慢慢看？那就轮到 Debug Mode 了。

【Bing 搜索页面】

4. --debug：一步一步查问题

bash 复制代码

npx playwright test tests/demo/bing.spec.ts --project=chromium --debug

运行后会打开 Playwright Inspector 和浏览器。

这次不用追着浏览器跑了，可以自己控制执行节奏。

比如先执行 goto()，看看页面有没有打开；再执行 fill()，确认关键词有没有输入；接着执行 press('Enter')，看看搜索有没有提交成功。

最后执行到 toHaveTitle('Google')，测试失败。

哦，原来前面都没问题，是我们自己把预期标题写错了。

Inspector 单步调试

我觉得 Debug Mode 特别适合刚写完测试、还不确定每一步是否正确的时候使用。

按最右侧有个绿色按钮，单步执行

5. --ui：不想盯着终端？试试 UI Mode

bash 复制代码

npx playwright test tests/demo/bing.spec.ts --ui

UI Mode 是 Playwright 自带的图形界面。

可以在里面选择测试、点击运行，还能查看操作步骤、页面快照和报错信息。

相比 Debug Mode 的"边执行边检查"，UI Mode 更像是把测试过程整理出来，让我们回头慢慢看。

比如这次 Bing 搜索测试，我们可以点击失败的断言，看看预期标题和实际标题有什么区别。

UI Mode 的测试步骤与失败信息

平时反复运行、修改测试用例时，我觉得这个界面挺方便，不用每次都去终端翻log

6. Trace Viewer：测试跑完了，还能回看？

有时候测试在本地跑得好好的，一放到 CI 就失败。

这时候总不能对着终端猜：它到底在哪一步出了问题吧？

Playwright 的 Trace Viewer 就派上用场了。

先开启 Trace：

bash 复制代码

npx playwright test tests/demo/bing.spec.ts --project=chromium --trace on

然后打开报告：

bash 复制代码

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