Argent 视觉回归测试指南：OCR 截图对比如何揪出每一个意外 UI 变化

【免费下载链接】argentAn agentic toolkit to control, debug, and profile iOS and Android apps. Made by Software Mansion.项目地址: https://gitcode.com/gh_mirrors/arg/argent

Argent 是由 Software Mansion 打造的 agentic 工具包，可帮你控制、调试、剖析 iOS 与 Android 应用。其中，screenshot-diff工具通过像素级比对与 OCR 文字感知，让 AI Agent 在每次 UI 改动后自动捕捉每一个意外的布局、颜色、文字或裁剪变化，成为移动端开发者做视觉回归测试的得力助手。

为什么需要视觉回归测试？

传统单元测试关注"代码逻辑是否正确"，但用户看到的是像素。一次字体大小改动、一个按钮颜色调整，都可能悄悄破坏整页排版。 Argent 的视觉回归流程让 Agent 在交互前后各截一张屏，自动完成比对并输出可读报告，省去了人工逐像素检查的繁琐。

截图对比的三步工作流

整个流程由 Agent 驱动，开发者无需手动操作：

1. 建立基线— Agent 把应用带到已知状态，截取一张baseline.png。
2. 执行变更— 你修改代码或 Agent 执行一次交互。
3. 比对报告— Agent 再截一张屏，调用screenshot-diff输出差异摘要。

对比报告包含什么？

Argent 的输出不只是"有 N 个像素不同"，而是一份结构化的三段式摘要：

OCR 文字感知

Argent 对两张截图都执行 OCR（基于 Tesseract 引擎），因此它能识别出：

• "Save" 变成了 "Saved"
• 标题向下移动了一行
• 某段文字颜色被悄悄改浅

即便文字内容相同，Argent 还会比较字形轮廓与笔画宽度，从而发现字体替换这类纯像素比对难以察觉的回归。

差异图：让变化一目了然

对比完成后，Argent 会生成两张产物图：

• 全尺寸 diff 图— 变亮的像素标绿、变暗的标红，每个变化区域用黄色矩形框出；
• 上下文缩略图— 缩放到 30%，适合在 Agent 会话中快速内联查看。

状态栏（时钟、电池图标）会被自动屏蔽，避免每次对比都误报。

📍 核心对比逻辑位于 screenshot-diff.ts，OCR 提取在 screenshot-diff-ocr.ts，字形几何分析见 font-diff.ts。

把基线写进 Flow，让 CI 自动把关

Argent 的 Flow（可视化测试流）支持snapshot步骤。你只需：

1. 在 flow YAML 中插入一个快照步骤；
2. 首次运行加--update-baselines，把当前画面存为基线；
3. 之后每次 CI 运行都会与基线比对，差异超过容差即失败。

这样，视觉回归检查就可以提交到仓库，像单元测试一样跑在 CI 上。

📄 官方特性说明：visual-regression.mdx

何时该用、何时别用

✅适合

• 布局、间距、颜色、字体、图标 / 图片渲染、裁剪、溢出的前后对比
• 担心"改了一处，别处悄悄变了"的回归风险

❌不适合

• 导航可达性、无障碍树结构、日志 / 网络行为（这些应交给其他工具）
• 画面含持续动画、实时时钟、广告或随机数据——先停下来等画面稳定再对比

快速上手提示

对 Agent 说一句自然语言即可触发，例如：

"截取设置页的基线，然后应用我的改动并对比。" "给我确认：标题字体改完之后，屏幕上其他什么都没变。"

小结

Argent 的screenshot-diff把"像素比对 + OCR 文字感知 + 字形几何分析"打包成一份可读的回归报告，让 AI Agent 替你盯住每一处意外的 UI 变化。配合 Flow 快照步骤，视觉回归检查从此可以无缝融入 CI，成为移动端开发日常。

【免费下载链接】argentAn agentic toolkit to control, debug, and profile iOS and Android apps. Made by Software Mansion.项目地址: https://gitcode.com/gh_mirrors/arg/argent