3. 特征回放评审的核心概念：录制、回放、断言、基线、差异分析
特征回放评审的自动化流程建立在五个核心概念之上：录制、回放、断言、基线和差异分析。这五个概念构成了从“捕获用户行为”到“自动验证回归结果”的完整闭环。理解它们之间的依赖关系和执行顺序，是搭建自动化评审体系的第一步。
3.1 核心概念总览
下表从定义、输入、输出和典型应用场景四个维度，对这五个概念进行横向对比：
| 概念 | 定义 | 输入 | 输出 | 典型场景 |
|---|---|---|---|---|
| 录制 | 捕获用户在界面上的操作序列及系统响应 | 用户操作、页面状态 | 录制文件（操作日志 + 截图） | 首次建立特征用例 |
| 回放 | 按录制顺序自动重放操作，并收集新响应 | 录制文件、被测环境 | 回放结果（新截图、新日志） | 回归测试、版本验证 |
| 断言 | 定义“什么算通过”的规则（元素存在、文本匹配等） | 录制时的预期状态 | 断言脚本 / 规则集 | 关键节点校验 |
| 基线 | 被认定为“正确”的参考版本（截图、DOM、数据） | 录制或首次回放结果 | 基线仓库（版本化管理） | 版本对比的基准 |
| 差异分析 | 对比回放结果与基线，输出差异报告 | 回放结果、基线 | 差异报告（像素级、结构级） | 缺陷定位、变更审查 |
3.2 概念间的执行流程
下图展示了从录制到差异分析的完整数据流向。每个阶段产生的产物都会作为下一阶段的输入，形成可追溯的评审链路。
3.3 各概念深度解析
3.3.1 录制（Record）
录制是自动化评审的起点。系统通过监听用户操作事件（点击、输入、滚动、导航等），将操作序列连同每个操作发生时的页面截图、DOM 快照一并保存为结构化文件。录制质量直接决定后续回放的稳定性。
- 操作层：记录事件类型、目标元素选择器、坐标、输入值。
- 状态层：记录操作前后的页面截图（PNG）和关键 DOM 属性。
- 元数据：记录录制时间、浏览器类型、分辨率、被测版本号。
实践建议：录制时尽量使用稳定的 CSS 选择器（如 data-testid 属性），避免使用易变的 class 或动态 id。录制完成后，建议人工复核一次操作序列，剔除不必要的中间步骤。
3.3.2 回放（Replay）
回放引擎按录制文件中的操作序列，在目标环境中自动执行相同的操作。回放过程中，引擎会重新采集每个步骤的截图和 DOM 状态，生成“回放结果包”。回放的核心挑战在于时序稳定性——必须等待页面元素就绪后再执行下一步。
# 回放引擎核心伪代码示例
def replay(record_file, target_url):
steps = load_record(record_file)
driver = create_driver(target_url)
replay_result = []
for step in steps:
wait_for_element(step.selector, timeout=5)
perform_action(driver, step)
screenshot = capture_screenshot(driver)
dom = capture_dom(driver)
replay_result.append({
'step_index': step.index,
'screenshot': screenshot,
'dom': dom
})
return replay_result3.3.3 断言（Assertion）
断言定义了“什么是正确的”。在录制阶段或首次回放通过后，用户可以在关键步骤上添加断言规则。常见的断言类型包括：
| 断言类型 | 描述 | 示例 |
|---|---|---|
| 元素存在性 | 检查目标元素是否出现在 DOM 中 | 确认“提交成功”提示框出现 |
| 文本匹配 | 验证元素的文本内容是否与预期一致 | 确认总金额显示为“¥1,200.00” |
| 属性校验 | 验证元素的特定属性值 | 确认按钮的 disabled 属性为 false |
| 截图相似度 | 通过像素对比判断视觉一致性 | 确认图表区域相似度 > 98% |
3.3.4 基线（Baseline）
基线是经过人工确认的“正确版本”的快照集合。它通常包含每个步骤的参考截图、参考 DOM 结构和断言结果。基线需要纳入版本控制（如 Git LFS），每次发布新版本时，回放结果都会与基线进行对比。
- 基线建立时机：首次录制并人工审核通过后，或每次发布正式版本后。
- 基线更新策略：当功能发生预期变更时，需要人工审批后更新基线。
- 基线存储结构：按特征/用例/步骤三级目录组织，每个步骤包含 .png 和 .json 文件。
3.3.5 差异分析（Diff Analysis）
差异分析是评审的核心环节。系统自动对比回放结果与基线，从多个维度输出差异报告：
- 像素级对比：逐像素比较截图，标记差异区域并计算差异百分比。
- DOM 结构对比：比较 DOM 树的节点增删、属性变化、文本变化。
- 断言结果汇总：列出所有断言通过/失败的状态。
- 差异分级：将差异分为“严重”（布局错位、元素缺失）、“一般”（颜色偏差、字体变化）、“轻微”（像素偏移 < 3px）。
常见陷阱：不要将所有差异都视为缺陷。动态内容（如时间戳、随机 ID、广告位）会导致大量误报。建议在差异分析前配置“忽略区域”或“正则匹配规则”，过滤掉已知的动态内容。
3.4 概念间的依赖关系
下图以更直观的方式展示了五个概念在评审流程中的依赖与协作关系，重点突出“基线”作为对比锚点的核心地位：