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

1. 前言写自动化测试最头疼的是什么不是写代码而是测试突然失败了还不知道怎么debug一步步加console.log好烦。明明昨天还能跑今天就红了。终端甩过来一大段报错翻了半天结果可能只是定位器写错了或者断言写得太死。好在 Playwright 自带了不少调试工具。这篇就拿 Bing 搜索做个小实验让测试失败看看怎么一步步找到问题。2. 先写一个会失败的 Demo创建tests/demo/bing.spec.ts故意设计一个失败的断言因为这个程序会执行到最后失败所以过程可以看的很清晰import{test,expect}fromplaywright/test;test(Bing Playwright,async({page}){awaitpage.goto(https://www.bing.com/);constsearchpage.locator(#sb_form_q);// 输入关键词awaitsearch.fill(Playwright);// 点击搜索awaitpage.locator(#search_icon).click();// 验证搜索页面 URLawaitexpect(page).toHaveTitle(Google);});});运行npx playwrighttesttests/demo/bing.spec.ts--projectchromium不出意外测试失败。终端报错信息从控制台的提示简单判断最后是断言失败expect和receive不一致但如果想知道浏览器到底执行了什么操作该怎么看3. --headed先看看浏览器在干什么npx playwrighttesttests/demo/bing.spec.ts--projectchromium--headed加上--headed浏览器就不再躲在后台运行了。我们可以直接看到它打开 Bing、输入关键词、提交搜索。不过执行速度有时候挺快眼睛还没看清楚浏览器就关了。想慢慢看那就轮到 Debug Mode 了。【Bing 搜索页面】4. --debug一步一步查问题npx playwrighttesttests/demo/bing.spec.ts--projectchromium--debug运行后会打开 Playwright Inspector 和浏览器。这次不用追着浏览器跑了可以自己控制执行节奏。比如先执行goto()看看页面有没有打开再执行fill()确认关键词有没有输入接着执行press(Enter)看看搜索有没有提交成功。最后执行到toHaveTitle(Google)测试失败。哦原来前面都没问题是我们自己把预期标题写错了。Inspector 单步调试我觉得 Debug Mode 特别适合刚写完测试、还不确定每一步是否正确的时候使用。按最右侧有个绿色按钮单步执行5. --ui不想盯着终端试试 UI Modenpx playwrighttesttests/demo/bing.spec.ts--uiUI Mode 是 Playwright 自带的图形界面。可以在里面选择测试、点击运行还能查看操作步骤、页面快照和报错信息。相比 Debug Mode 的“边执行边检查”UI Mode 更像是把测试过程整理出来让我们回头慢慢看。比如这次 Bing 搜索测试我们可以点击失败的断言看看预期标题和实际标题有什么区别。UI Mode 的测试步骤与失败信息平时反复运行、修改测试用例时我觉得这个界面挺方便不用每次都去终端翻log6. Trace Viewer测试跑完了还能回看有时候测试在本地跑得好好的一放到 CI 就失败。这时候总不能对着终端猜它到底在哪一步出了问题吧Playwright 的 Trace Viewer 就派上用场了。先开启 Tracenpx playwrighttesttests/demo/bing.spec.ts--projectchromium--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