阅读,与值得关注的内容Readance

用 AI 调试 Playwright 测试:更快、更省心的排查工作流

 

调试失败的测试,又耗时又磨人——报错信息动辄一屏,快照 diff 还不好读。但 Playwright 最新的 AI 辅助功能,让排查失败用例这件事快了很多,也直观了很多。

从一个最常见的失败说起

先看一个基础场景:一个用快照断言的 Playwright 测试,验证 getByRole('main') 里的内容与之前存的快照一致。快照里可能有两个标题。

这时如果应用把标题层级改了——从 <h1> 改成 <h2>——测试如预期失败,报错是快照不匹配。

按老习惯,接下来你要读堆栈、分析 diff、手动改测试或更新快照。一套下来,十几分钟就没了。

一键 AI 修复

Playwright 的 AI 集成把这套流程简化成了"点一个按钮"。

测试失败时,报错信息旁边有一个 AI Fix(AI 修复)按钮。点一下,它会自动分析上下文——快照 diff、测试代码、完整的报错信息——然后直接给出修复建议。

fix with ai in vs code error message

这个建议可以在开发环境里直接审阅、一键接受。应用之后重跑测试,多数情况下不用任何手动调试,直接就绿了。

这个 AI Fix 按钮在 VS Code 的 Test Explorer 里同样可用——写代码的当口遇到失败,顺手就修了。

fix with ai in vs code test explorer

UI 模式下的 AI 调试

Playwright 的 UI 模式也支持 AI 辅助调试。跑一句:

npx playwright test --ui

会打开一个交互式界面,用可视化的方式跑测试。

测试失败时,报错旁边会出现一个 Copy Prompt(复制提示词)按钮

fix with ai in ui mode

复制出来的这段提示词,包含了全部相关上下文:完整的页面快照、报错信息、对应的测试代码。把它贴给 Copilot 或者任何你顺手的 AI 工具——DeepSeek、豆包、Claude 都行——就能拿到针对性的修复建议。

AI 给出修复后,点 Apply in Editor,在编辑器里检查并确认改动,重跑测试,通常就回到通过了。

报告和 CI 里也能用

生成 AI 提示词的能力,不只在开发工具里。

HTML 报告里同样有 Copy Prompt。一轮测试跑完,打开报告、复制提示词、贴给你常用的 AI 助手,就能接着排查。

copy prompt html reporter

在 CI 环境里调试测试时,Trace Viewer 也提供同样的提示词功能。也就是说,哪怕是远程跑出来的测试结果,你也能用同一套 AI 工作流高效处理。

写在最后

AI 辅助调试,省掉的是"读堆栈、对 diff、找行号"这些机械劳动。无论本地开发、UI 模式,还是排查 CI 失败,这些功能都能帮团队更快、更有信心地交付。

下次测试红了,先别急着硬啃报错——点一下那个按钮试试。

一文一码,就找欢乐马

往期更多干货
Playwright Skill #1:登录态持久化,一次人工登录脚本/AI无限复用
Playwright 1.59 新特性:3 个 API 帮你告别 F12 手动找定位
AI提示词模板库:1.测试用例设计|10分钟学会让ai帮你生成合格测试用例(附完整源码)
Playwright+MCP:给POM和pytest加一层AI能力(AI实战落地企业·源码)
Playwright+Pytest+POM:3个fixture让你的测试框架稳定运行100+用例(源码包02)
接口+UI一体化测试天花板!Playwright API测试实战(附完整源码)
Locust 压测实战:从 API 到 UI,一套代码压透全链路(附源码包


 

前往微信阅读全文

内容来自公众号,可前往微信查看原文。

查看作者的更多文章 →