拒绝“裸奔”上线！AI 时代的前端自动化测试生存指南

来源：稀土掘金

1. 灵魂拷问：为什么以前我们不爱写测试？

　　在 AI 介入之前，前端自动化测试简直就是**“反人性”**的存在：

　　性价比极低：写业务代码 1 小时，为了测它，构造 Mock 数据、写断言得花 2 小时。ROI 感人。

　　脆弱不堪：E2E 测试脚本里满屏的 .div > span:nth-child(2)，前端改个 DOM 结构，测试全挂。维护测试的时间比修 Bug 还长。

　　为了测而测：很多时候是为了应付 KPI，覆盖率是上去了，但测的都是 expect(1+1).toBe(2) 这种废话，核心业务逻辑依然在“裸奔”。

　　但现在，规则变了。

　　AI 就像一个不知疲倦、精通 API 的实习生。你嫌烦的 Mock 数据，它秒出；你头疼的正则断言，它手拿把掐。

　　我们需要做的，从“搬砖”变成了“监工”。

2. 架构蓝图：我们要搭建什么样的“防御塔”？

　　别整那些复杂的金字塔模型了，咱们就整一套实用主义的**“奖杯模型”**。

2.1 核心技术栈 (抄作业系列)

·L1 单元/组件测试：Vitest + Vue Test Utils

　　理由：Vitest 快，真的快。兼容 Jest API，零配置上手。

· L2 业务流程测试 (E2E)：Playwright

　　理由：Cypress 很好，但 Playwright 的 Codegen (录制) + Trace Viewer (调试) 实在是太香了，而且对多 Tab 支持更友好。

· L3 视觉回归：Chromatic (可选)

　　理由：专门治各种“样式微调导致布局崩坏”的疑难杂症。

2.2 AI 介入的工作流

　　别再闷头写代码了，试试这个新姿势：

3. 实战：Prompt “炼丹”指南

　　AI 吐出来的代码能不能用，全看你会不会提问。随便扔一句“帮我写个测试”，AI 只能给你生成一堆垃圾。

3.1 拒绝“垃圾代码”

错误示范：

　　"帮我给这个 Vue 组件写个测试。"

AI 输出的垃圾：

// 这种测试脆弱得像纸一样，改个 class 名就挂
expect(wrapper.find('.submit-btn').exists()).toBe(true)
expect(wrapper.vm.count).toBe(1) // 居然测私有属性？

3.2 架构师级的 Prompt 模板

　正确姿势 (建议收藏)：

　　System Prompt (设定人设):

　　你是一个对代码质量有洁癖的前端测试专家，精通 Vue3 和 Vitest。

　　User Prompt (具体指令):

　　请为当前的 UserCard.vue 组件编写测试用例。

　　黄金法则 (必须遵守):

　　行为驱动：不要测 vm.count 这种内部状态，要测用户看到了什么（比如 wrapper.text() 包含了 '1'）。

　　选择器规范：严禁使用 class 选择器（如 .btn）！优先使用 data-testid，其次是文本内容 (findByText)。

　　Mock 一切：外部 API 必须用 vi.mock 模拟，不要发真实请求。Pinia store 需要构造初始 mock state。

　　覆盖边界：props 传空、传错、API 报错时，组件会不会白屏？

AI 优化后的代码：

// 稳如老狗，重构代码都不怕挂
　　await wrapper.get('[data-testid="submit-btn"]').trigger('click')
expect(wrapper.text()).toContain('提交成功')
expect(userApi.login).toHaveBeenCalledTimes(1)

　4. 关键环节：Code Review 2.0

　　有了 AI 写代码，你的职责主要就是 Review。别以为轻松，这才是体现技术深度的地方。

Review 里的“三不原则”

　　不测实现细节：

　　看到 expect(vm.methods.handleClick).toBeCalled() 直接打回。

　　用户不关心你调了哪个函数，用户只关心点击按钮后弹窗出没出来。

不写“假”断言：

　　有些 AI 会写 expect(true).toBe(true) 来凑数，这种不仅没用，还误导人。

　不过度 Mock：

　　别把子组件全 Mock 成了 <div>，那还测个寂寞？保留核心业务组件的集成性。

5. 落地建议：如何说服老板？

　　如果老板问：“为什么要花时间搞这个？”

　　请把这段话甩给他（注意语气）：

　　“老板，以前我们不敢重构代码，因为一动就怕崩。

　　现在有了这套 AI 测试体系，单元测试生成效率提升了 90%。

　　以前核心流程回归要测半天，现在 CI 流水线 5 分钟跑完。

　　这不是在浪费时间，这是给我们的系统穿了一层‘防弹衣’，保证上线那天大家都能睡个好觉。”

6. 最后的碎碎念

　　技术圈有个怪圈：大家都知道是对的事情，却很少有人坚持做。

　　自动化测试就是典型。

　　但在 AI 时代，借口不攻自破。门槛已经降到脚踝了，再不迈过去，就真说不过去了。

　　从今天开始，试着让 AI 帮你写第一个测试用例，你会发现，睡觉都踏实了。

顾翔凡言：AI时代，掌握已知的未知已非难事，关键在于如何发现未知的未知——而它往往就藏在探索已知之未知的过程中。