Viking Zhang, 一个前端开发工程师以及独立开发者的故事
·
我是怎样使用 AI 构建 E2E 测试体系的？
内容提要
本文介绍了如何利用AI构建E2E测试体系，以确保TinyShip多框架应用的功能开发不出现回归。作者提出了五个阶段的开发流程：定义验收标准、编写代码、视觉确认、编写E2E测试和确保测试通过。通过AI辅助，测试过程高效且准确，确保核心流程得到100%覆盖。E2E测试在功能完成、版本发布和大重构时执行，以降低测试成本。
关键要点
-
TinyShip 是一个支持多种前端框架和数据库的 monorepo，开发新功能时需要确保没有回归。
-
E2E 测试是 TinyShip 的基石，AI 的辅助使得测试过程高效且准确，确保核心流程 100% 覆盖。
-
开发新功能的流程分为五个阶段：定义验收标准、编写代码、视觉确认、编写 E2E 测试和确保测试通过。
-
在每个新功能开发前，首先由 AI 编写验收标准，然后进行代码实现，接着用 agent-browser 进行视觉确认。
-
使用 agent-browser 可以节省测试编写时的上下文和 Token，确保选择器的稳定性。
-
Playwright 测试在 UI 确认无误后进行，选择器的编写依赖于真实的 DOM 结构。
-
E2E 测试不在 CI 上运行，而是在本地进行，以提高效率和安全性。
-
E2E 测试主要在功能完成、版本发布和大重构时执行，以降低测试成本。
延伸解读
E2E测试的重要性
在多框架和多数据库的环境中，E2E测试是确保功能开发不出现回归的关键。通过AI的辅助，测试过程变得高效且准确，能够覆盖核心流程，降低了手动测试的复杂性和成本。
五阶段开发流程的优势
TinyShip的五阶段开发流程（定义验收标准、编写代码、视觉确认、编写E2E测试和确保测试通过）确保了每个新功能的开发都有明确的标准和步骤。这种结构化的方法有助于提高开发效率和测试的可靠性。
使用agent-browser的好处
agent-browser的使用显著提高了测试的稳定性和效率。它通过减少上下文和Token的消耗，确保了选择器的稳定性，使得后续的Playwright测试能够更顺利地进行，降低了测试失败的风险。
E2E测试的执行时机
E2E测试并不在CI上运行，而是在本地进行，这样可以避免长时间的等待和复杂的环境配置。测试主要在功能完成、版本发布和大重构时执行，确保了测试的针对性和有效性。
延伸问答
TinyShip 是什么？
TinyShip 是一个支持多种前端框架和数据库的 monorepo，旨在确保功能开发不出现回归。
如何利用 AI 构建 E2E 测试体系？
通过定义验收标准、编写代码、视觉确认、编写 E2E 测试和确保测试通过五个阶段来构建 E2E 测试体系。
E2E 测试的主要执行时机是什么？
E2E 测试主要在功能完成、版本发布和大重构时执行，以降低测试成本。
使用 agent-browser 的好处是什么？
agent-browser 可以节省测试编写时的上下文和 Token，确保选择器的稳定性，并提高测试的效率。
E2E 测试不在 CI 上运行的原因是什么？
E2E 测试不在 CI 上运行是因为速度慢、依赖多，且 CI 主要用于快速反馈类型和编译问题。
构建新功能的五个阶段具体是什么？
构建新功能的五个阶段是：定义验收标准（Spec）、编写代码（Code）、视觉确认（Verify）、编写 E2E 测试（Test）和确保测试通过（Green）。
