Playwright debug 技巧-CSDN博客

本文链接：https://blog.csdn.net/a405028157/article/details/128437248

本文介绍了在使用 Playwright 进行单元测试时的一些调试技巧，包括在本地设置断点观察执行过程，以及如何在 CI 环境中通过录制视频和生成 trace 文件来定位失败原因。当测试在 CI 上失败时，可以通过配置 GitHub Actions 上传回放文件，便于下载分析。同时，讨论了如何配置 Playwright 的测试结果输出路径和全局配置文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用 Playwright 写单测保护业务功能之前，首先要写出正确的 playwright 单测，这个环节有时候也会花费很多时间，但是好在 playwright 有不少 debug 技巧）。在本地打断点永远是最方便的方式，可以观察单步语句执行浏览器内容的变化。如果单测在本地执行没问题，但是在 CI 环境上失败，有时候仅靠日志不容易找到根本原因，这时候就可以借助回放。首先 playwright 可以配置将测试过程中浏览器的变化生成录像或者 trace 文件（录像和 trace 都可以看到浏览器的操作回放，trace 额外可以看到调用栈），默认保存在 test-results 文件夹（这个文件夹和 playwright.config.ts 在同一目录层级），为了提高单测运行效率，也可以设置仅当 retry 时再保存录像。然后可以在 github CI 在单测 job 后配置一个 upload-artifact 的 job，当单测失败时执行，将 test-results 文件夹上传。这样每次有单测失败时，在 github CI 页面就能下载到浏览器跑单测的回放了。

github CI 上传 artifact
actions/upload-artifact (github.com)

playwright record video
Videos | Playwright

playwright record test trace
Configuration | Playwright

playwright 设置回放输出文件夹位置
TestConfig | Playwright (cuketest.com)

全局 config file
Configuration | Playwright (cuketest.com)