请教各位 Claude Code 怎么测试业务流程复杂的前端代码？

[Danswerme]

例如维护一个拖拽生成表单和数据看板的组件，涉及到表单嵌套、嵌套后拖拽等问题；让 CC 新增了一部分业务内容，写完之后怎么才能让它测试拖拽操作是否生效呢？

[maplezzz]

我有尝试过让 AI 写 cypress 之类 E2E 测试案例，但很多时候它写的案例经常跑不通，让他自己调试的话直接拿页面 dom Token 耗的特别多

[SD10]

可以加一个 https://github.com/ChromeDevTools/chrome-devtools-mcp

[Peikon]

关注+1 ，chrome-devtools-mcp 在测试的时候感觉没想象中那么好用

[Danswerme]

@SD10
@Peikon
@maplezzz chrome-devtools-mcp 确实不好用，我和 Gemini 聊了下，它建议让我让 CC 用 playwright 写个测试脚本，不要让 CC 直接调用 devtools-mcp

[pluviacon]

chrome-devtools-mcp 用来操作 dom 太消耗 token 了，但是让它检测 log 倒是挺好用，我都是在关键位置写 log 然后让它读，然后我手动操作让 ai 监测 log

[maplezzz]

@Danswerme 如果你想要让 AI 直接操作 Web 来测试的的话，也可以试试 vercel 出的 agent-browser ，这个能拿到页面精简后的 DOM 结构信息回来。但是我试了说实话，也没有达到很好用的程度，AI 直接操作网页还是会有很大的不确定性

[maplezzz]

@Danswerme agent-browser 也是基于 playwright 的, 精简后的 DOM 信息再给 AI 相对来说不那么耗费 Token

[kenshinhu]

我看在 cursor / claude code 也有一个 debug 模式，这里是可以通过指定代码块注入日志代码，之后 LLM 会通过这个日志代码产生的文件分析打印结果，应该可以通过人机协助来联调代码，但用这个的 token 就相当惊人

[yhxx]

试一下这个插件？
https://chromewebstore.google.com/detail/claude/fcoeoabgfenejglbffodgkkbkcdhcgfn