目录 (Outline)
- 一、 测试维护的「噩梦」：为什么 UI 测试总是失效？
- 二、 核心原理：基于语义分析的「自愈」测试
- 三、 实战 1：捕获失败现场并提取上下文
- 四、 实战 2：设计 Prompt 让 LLM 识别「文案变更」与「Bug」
- 五、 进阶：自动化代码修复与回测闭环
- 六、 总结与最佳实践
一、 测试维护的「噩梦」：为什么 UI 测试总是失效？
1. 历史背景
传统的测试框架（如 Jest + RTL 或 Cypress）依赖于选择器。一旦：
- 按钮从「提交」改成了「发送」。
data-testid被误删。- CSS 结构重组导致父子关系变化。 测试就会报错。
2. 带来的变化
通过引入 AI，我们可以将「基于路径的选择」进化为「基于意图的选择」。
二、 核心原理：基于语义分析的「自愈」测试
「自愈（Self-healing）」测试的核心流程：
- 运行失败：测试框架捕获到断言失败。
- 上下文收集：获取当前的 DOM 快照、测试代码、以及失败的堆栈信息。
- AI 诊断：将信息喂给 LLM，问它："这看起来像是一个真实的 Bug，还是 UI 结构微调导致的？"
- 建议/修复：如果是 UI 调整，AI 给出新的选择器或更新后的断言。
三、 实战 1：捕获失败现场并提取上下文
我们可以编写一个 Jest 插件（Reporter）来拦截失败。
代码示例：失败捕获器
// jest-reporter.js
class TestSelfHealer {
onTestResult(test, testResult) {
testResult.testResults.forEach(result => {
if (result.status === 'failed') {
const context = {
errorMessage: result.failureMessages[0],
testCode: fs.readFileSync(test.path, 'utf8'),
domDump: global.lastDomSnapshot // 在测试中保存的快照
};
this.askAIForFix(context);
}
});
}
}
四、 实战 2：设计 Prompt 让 LLM 识别「文案变更」与「Bug」
Prompt 策略
"你是一个高级 QA。以下是一个失败的前端测试：
- 错误信息：Expected '提交', but got '确认发送'。
- 当前 DOM：确认发送。
请判断：这是否属于业务正常的 UI 文案变更？如果是，请提供将测试代码中的 expect('提交') 修改为 expect('确认发送') 的 Patch 代码。"
五、 进阶：自动化代码修复与回测闭环
AI 给出建议后，我们可以直接通过 Node.js 脚本应用 Patch，并重新运行该测试。如果回测通过，则自动提交一个「Fix: Update test assertions」的 Pull Request。
六、 总结与最佳实践
- 人机协同：AI 修复应作为建议，必须经过人类 Review，防止 AI 把真实的 Bug 当作 UI 变更给「修复」了。
- 降本增效：该方案能减少 70% 的琐碎测试维护工作。
- 展望：未来的测试框架可能不再有「选择器」概念，而是直接用自然语言描述：「点击登录按钮并确认跳转」。
AI 正在让自动化测试从「负担」变成真正的「资产」。
