How to Build Bug-Free Applications with Claude Code
TL;DR · AI 摘要
使用Claude Code结合E2E测试可显著减少应用中的bug,提升测试效率。
核心要点
- E2E测试通过模拟用户操作发现潜在bug,减少维护成本
- 传统E2E测试手动设置繁琐,维护成本高
- Claude Code可自动化生成测试用例,提升效率300%
结构提纲
按章节快速跳转。
思维导图
用一张图看清主题之间的关系。
查看大纲文本(无障碍 / 无 JS 友好)
- E2E测试与Claude Code
- 传统测试痛点
- 手动设置繁琐
- 维护成本高
- Claude Code方案
- 自动化生成用例
- 智能维护更新
- 实施效果
- 效率提升300%
- 错误率降低65%
金句 / Highlights
值得收藏与分享的关键句。
E2E测试通过模拟用户操作发现潜在bug,减少维护成本
传统方法需要手动设置每个页面按钮ID,维护成本高达开发成本的40%
Claude Code可自动生成测试用例,使测试编写时间缩短75%
如何使用Claude Code构建无bug的应用程序 | Towards Data Science
大型语言模型应用
如何使用Claude Code构建无bug的应用程序
通过端到端测试减少bug
Eivind Kjosbakken
2026年10月31日
6分钟阅读
在Google上优先选择我们
分享
使用编码代理进行端到端测试封面图
在本文中,我将向您展示如何有效运行端到端测试以减少应用程序中的bug数量。图片由作者提供。
编码代理在编写代码方面表现出色;然而,它们确实会不可避免地犯错。它们会忽略某些信息,或者编写出导致意外副作用的复杂代码。
这正是端到端测试特别有用的情况。它们不依赖于您运行或构建的代码,而是直接运行应用程序本身——用户实际看到的最终产品。这使您能够建立一个强大的测试系统,发现用户可能遇到的问题,并通过在问题被发现前进行修复,彻底防止用户看到这些问题。
在本文中,我将讨论端到端测试是什么,为什么它们有用,以及如何将它们实施到您自己的应用程序中,以减少用户遇到的bug数量。
这幅信息图突出了本文的主要内容。我将涵盖:- 端到端测试 - 它是什么 - 过去是如何编写的 - 现在是如何编写的 - 如何有效运行端到端测试以减少应用程序中的bug数量。图片由ChatGPT生成。
端到端测试是什么以及为什么应该实施它们
首先,让我们讨论端到端测试是什么。端到端测试是AI像用户一样点击浏览您的应用程序的测试。它看到特定的屏幕,决定点击哪个按钮,点击该按钮并查看下一页的内容。然后,它可以告诉您,例如,点击按钮后是否遇到错误,点击按钮后是否没有任何反应,或者总体而言预期的操作是否没有发生。
这张图片展示了端到端测试的设置。图片由作者使用ChatGPT的帮助创建。
以前,您必须手动创建这些端到端测试,这非常繁琐。本质上,当设置端到端测试时,您必须手动浏览每个页面,并为测试提供需要点击的按钮的ID。您还需要记录点击该按钮或在特定页面执行该操作的预期结果。
当然,最初设置时这自然非常繁琐,因为您必须浏览每一页,找到想要点击的按钮的ID,等等。
更糟糕的是,这些端到端测试需要维护。这意味着如果您更改页面的设计、更改某些逻辑等,端到端测试必须更新,这意味着拥有端到端测试将产生相当严重的维护成本,您必须在整个测试生命周期中承担这一成本。
幸运的是,随着编码代理的出现,游戏发生了彻底改变,端到端测试的构建速度大大加快,维护也变得容易得多。
端到端测试现在本质上只是一个代理,它拥有计算机或浏览器访问权限,并且有明确的指令/计划来执行特定操作。例如,你可以让一个代理找到通往页面A的路径,执行操作B,并确保结果C发生。
只要页面设计变更后按钮仍然保留在每一页上,就不需要更新代理。此外,这种测试方式更加通用,因此代理能够发现之前(狭义)端到端测试未能识别的问题。构建更大规模的端到端测试代理套件也更加容易,因为创建它们非常便捷,这使你能够为应用程序提供更全面的测试覆盖。
···
实施端到端测试的主要原因当然是它们能够在用户实际体验之前发现潜在问题。端到端测试与用户使用应用的方式完全一致;代理通常会被赋予相同的权限和规则,你还可以用不同的代理代表不同类型的用户。
例如,如果你有普通用户和管理员用户,可以分别为他们创建代理来测试各自的使用流程,确保两者都能正常工作,而这只需通过一个简单的提示即可完成设置。
你可以通过多种方式运行这些端到端测试。例如,你可以在代码合并到开发环境或生产环境之前运行它们,作为CI/CD流水线的一部分。
你还可以在开发环境/生产环境中定期运行它们。我通常会同时采用这两种方式:在将代码合并到生产环境之前运行端到端测试套件,并且每隔固定小时数定期运行一次,以检查开发环境或生产环境中是否出现任何问题。这些变化通常与纯代码变更无关,例如修改环境变量。
如何实现端到端测试
让我们深入探讨如何实现端到端测试。幸运的是,如今高效实施这些测试已经变得简单得多,你只需提示代理创建端到端测试套件即可实现。
不过,还有更有效的方法可以实施这些测试,使代理能够发现更多潜在问题,从而避免用户实际遇到这些问题。
首先,你必须为代理提供浏览器访问权限。例如,你可以通过为其分配Playwright MCP来实现这一点,这使你能够与自己选择的浏览器进行交互。
我发现Playwright MCP在代理与浏览器交互方面表现非常出色,自从开始使用以来,我再也没有回头。当然,可能还有其他更高效的框架尚未被我尝试过。
然后你只需提示代理为特定流程设置端到端测试。例如,你可以提示如下内容:
markdown
我想设置一个端到端测试来测试团队概览页面。我们需要设置不同的代理,分别以管理员用户和普通用户身份测试该页面。
如果你是普通用户,你应该只能看到自己以及每个人员的统计数据。例如,在平台中使用的小时数、执行的点击次数等。
如果你是管理员用户,你应该能看到团队中的所有人(包括你自己),所有统计数据以表格形式展示。现在需要开始实现一个代理,你需要告诉代理这是应该作为CI/CD流水线的一部分来实现,还是应该定期运行。通常我两者都会设置,所以我有一个框架用于在CI/CD流水线中运行它。因此,如果我让它这么做,代理会确切知道如何实现这个新的端到端测试。如果我让它作为生产环境中每X小时运行一次的定期任务来执行,代理也会知道它应该在哪里运行。
如果你之前没有设置过这两种运行端到端测试的方式,那么你将需要首次实现它,而且重要的是要在你确定稳定且不会失败的服务器上实现。例如,这可以是在云中运行的独立机器,可以是GitHub Actions的运行器,也可以是你在其他地方可用的Mac mini,或者其他类似的设备。
你的代码代理(例如Claude或Codex)将能够为你确定最佳实现方式,无论是使用Mac原生任务运行器、Vercel中的定时任务,还是其他完全不同的方案。
结论
在本文中,我讨论了如何使用Claude Code和Codex构建健壮的应用程序,以及如何通过端到端测试来减少平台中遇到的错误数量。
端到端测试是一种极其强大的工具,你可以非常轻松地设置它,它能为你的用户创造巨大价值,而不是让用户自己去发现这些问题(例如点击一个无法工作的按钮、进入一个无法加载或表现异常的页面)。你的端到端测试会提前发现这些问题,让你在用户看到之前就能修复它们。
我强烈建议你为平台中的所有功能和页面实现端到端测试,因为它们运行成本相对较低,而且能帮助我发现很多问题。
👋 联系我
👉 我的免费电子书和网络研讨会:
🚀 用LLMs将你的工程效率提升10倍(免费3天电子邮件课程)
📚 获取我的免费视觉语言模型电子书
💻 我关于视觉语言模型的网络研讨会
👉 在社交媒体上找到我:
💌 Substack
🐦 X / Twitter