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 测试主要在功能完成、版本发布和大重构时执行，以降低测试成本。
延伸问答
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）。
