最新消息表明，前两篇我们用 ui-testscript-generator 解决了脚本生成，用 ui-testscript-enhancer 解决了脚本稳定性。到这一步，你的 UI 自动化脚本已经能稳定跑了。 科技新闻。
增强完成后的项目，相比增强前，新增了以下能力：
方案： 用 ui-visual-assert Skill，自动扫描项目生成视觉断言代码、配置响应式视口 fixtures、配置多浏览器兼容容差，输出含视觉断言的跨浏览器测试脚本和完整基线图库。
AI背景与起因
接下来，Skill 会自动完成以下步骤：
答案是，可以。而且这一步做完，你的 UI 自动化才真正从「功能验证」升级为「全维度校验」。
前端重构了 CSS 变量，某个按钮的背景色从蓝色变成了白色。data-testid 还在、文本还在、disabled 属性也正确。DOM 断言全过。但用户看到的是一个白色按钮混在白色背景里，根本找不到。
AI事件经过
在 pages/base_page.py 中新增视觉断言方法，在配置文件中更新多浏览器项目配置。
每个浏览器 × 每个视口都有独立的基线。 这样 Chromium 桌面端、Firefox 平板、WebKit 手机各自的基线互不干扰，避免渲染差异导致的误报。
视觉断言的核心机制是「截图比对」，这离不开基线管理。这个 Skill 的基线策略设计得比较务实：
AI各方回应
通过参数化 fixture 实现，可自定义任意分辨率。
这里有几条实操经验特别重要：
2. 响应式布局校验
AI影响分析
将技能安装好，在技能列表中，选择 ui-visual-assert 技能。
它解决的核心议题是，突破 DOM 断言的天花板。
工具选型的关键不是「用最新的技术」，而是「用最合适的技术」。 像素比对用 pixelmatch，验证码识别用 ddddocr，各有各的最佳场景。
核心能力（三大维度）：
输入项目路径，触发视觉增强：
ui-visual-assert 是专门用于为 UI 自动化脚本补充视觉断言能力的 Skill，完成跨浏览器、多分辨率的界面兼容性校验。
它接收增强后的脚本，逐文件扫描分析，自动生成视觉断言代码、响应式适配 fixtures、多浏览器兼容配置，最终输出含视觉断言的跨浏览器测试脚本和完整的视觉基线图库。
布局错位。
自动适配不同浏览器的渲染差异，例如 Firefox 的元素点击偏移事项，避免因浏览器特性差异导致的误报。
那能不能用 Agent Skill 自动补全视觉断言，顺便解决多浏览器和响应式的兼容校验？
Skill 会扫描现有的 POM 类和测试脚本，确定哪些页面和元素需要视觉覆盖，输出一份视觉断言计划清单。
同一段 CSS 动画，Chromium 正常播放，WebKit 闪烁了一下，Firefox 直接跳过了中间帧。功能层面没有影响，但视觉体验完全不同。
核心思路是，AI 负责扫描和生成视觉断言，人负责确认基线和阈值。
举几个真实的例子：
输入：
这篇文章就带你完整拆解这个过程。
AI 负责把视觉断言从 0 搭到 80，人负责确认基线和阈值，把它校准到 100。 视觉断言的可靠性，最终取决于基线质量和阈值调校。
打个比方，DOM 断言像是在问「零件齐不齐」，视觉断言像是在问「装好之后好不好看」。零件齐全不代表装出来是对的。
自动适配多种视口分辨率，验证不同尺寸下的布局一致性：
DOM 断言验证的是「功能对不对」，视觉断言验证的是「长得对不对」。两者缺一不可。
很多团队做 UI 自动化好几年，断言覆盖很全，但线上还是会出现「功能没坏但界面炸了」的问题。因素很简单，DOM 断言的粒度只到属性级别，不到视觉级别。
目前这套 AI 测试赋能的 Skill 技能组合，「狂师 . AI 进化社」的成员都在使用，很多同学反馈，终于不用靠人肉翻截图做视觉回归了，多浏览器兼容的效率也提升了好几个量级。
将响应式视口参数化和跨浏览器配置合并到 conftest.py，实现一套 fixture 覆盖所有维度。
第一步，扫描项目脚本，识别视觉断言目标。
基线提醒： 首次运行时会自动创建基线图，人工需要确认基线是否正确，再决定是否提交到 Git 进行版本控制。
痛点： DOM 断言测不出样式 bug、多浏览器兼容成本高、响应式布局是盲区、视觉回归靠人眼、差异判断凭感觉、基线管理混乱。
第四，基线更新要走流程。 前端有意的 UI 改版（比如换了配色、调整了布局），需要更新基线。但更新基线不能随意操作，应该走「前端提 UI 变更 → 测试确认 → 更新基线 → 提交 Git」的流程，避免无意中把 bug 固化成基线。
第三，容差阈值要按浏览器分别设置。 不同浏览器的渲染引擎不同，字体抗锯齿、阴影渲染、动画插值都有细微差异。Chromium 渲染最稳定，阈值设最低（0.10）；Firefox 和 WebKit 的渲染差异更大，阈值适当放宽（0.15、0.12）。这个 Skill 已经预置了合理的默认值，但建议根据实际项目微调。
前端改了 flex 布局的 gap 属性，商品列表从一行三个挤成了一行两个。每个商品卡片的定位、文本、价格都正确。DOM 断言全过。但页面排版明显错乱了。
1. 视觉断言生成
基于 Playwright 原生截图能力 + pixelmatch（像素比对）+ Pillow（图像处理）实现视觉比对。内置 Pillow + numpy 降级方案，保证在不同环境下都能运行。
3. 多浏览器兼容处理
视觉断言这个领域，人机边界跟前几个 Skill 有一个重要区别，AI 生成断言代码没问题，但「什么算通过」这件事，必须人来定义。
自动生成视觉测试模块，包含各页面的视觉测试脚本。比如登录页视觉测试、注册页视觉测试、首页视觉测试。
这些问题，DOM 断言一个都抓不到。只有视觉层面的截图比对，才能发现。
你的脚本断言写得再完整，本质上验证的也只是「元素在不在」「文本对不对」「URL 跳没跳」。页面长得对不对，脚本完全不知道。
整体产出清单：
回顾一下整个流程：
在测试脚本模块下，新增了 visual 视觉测试模块，包含各页面的视觉测试脚本：
样式回归。
但这里有一个问题。
把上面整个过程用命令行风格串起来：
第二步，生成视觉比对引擎。
温馨提醒，「AI 测试」只是 AI 进化社八大技能版块之一。
第五步，更新配置文件和增强 BasePage。
最终生成增强报告，展示修改了哪些文件、新增了哪些文件：
先看一下这个 Skill 在完整链路里的位置：
核心价值：突破传统 DOM 断言的局限，不仅校验页面元素与接口数据是否正常，还能直观判断页面视觉展示效果是否符合预期，实现界面全维度校验。
最后聊一个设计上的考量。这个 Skill 在实现方案设计上有一个细节值得注意，它采用了 pixelmatch + Pillow 而不是直接依赖 AI 视觉大模型做比对。
上一步 ui-testscript-enhancer 输出的增强脚本，功能逻辑已经稳定了。ui-visual-assert 做的事情，是在功能断言之上，再加一层视觉维度的校验。
效果： 传统模式下，人工编写视觉断言 + 配置多浏览器 + 调试容差阈值，一个项目至少需要一周。而 ui-visual-assert 只需要几分钟，就能完成全量视觉增强，让脚本从「功能验证」升级为「全维度校验」。
桌面端好好的，到了手机分辨率，导航栏折行、按钮重叠、图片溢出。如果不专门针对不同视口跑一遍，这些问题完全发现不了。
大家可以自己根据本文提供的思路进行开发 skill，如果需要现成的教程和 skill，也可以加入「狂师 . AI 进化社」获取，里面有各类 AI 技术落地保姆级图文教程、视频教程，包括 AI 赋能测试全流程的实战教程（保姆级手把手喂饭教程，跟着步骤操作，零基础也能快速上手，目前含有 30 多个 AI 测试全场景的 Agent Skill）
第三步，合并响应式与跨浏览器 fixtures 到 conftest.py。
做过 UI 自动化的同学，下面这些场景应该都遇到过：
响应式断裂。
比如在 pages/base_page.py 中新增了视觉断言方法：
跨浏览器差异。
边界： AI 负责生成断言代码和配置，人负责确认基线和阈值。基线质量决定视觉断言的可靠性，动态区域忽略和容差阈值需要根据实际项目调校。
ui-visual-assert 能帮你完成的是「扫描 + 生成 + 配置」这个动作。但以下这些事情，仍然需要人来把关：
第一，基线确认是重中之重。 视觉断言的本质是「跟基线比对」，基线错了，后面所有的比对结果都不可信。首次生成基线后，务必逐张截图人工确认，确认无误后再提交到 Git。
为什么？因为视觉断言的核心需求是「精确的像素级比对」，不是「语义理解」。pixelmatch 轻量、快速、确定性高，同一组截图比对一万次成效都一样。而 AI 视觉大模型存在推理不确定性，同一组截图跑两次可能给出不同判断，这在测试场景中是不可接受的。
第二，动态区域一定要忽略。 页面上有很多动态内容（时间戳、随机验证码、广告位、用户头像），如果不配置忽略区域，每次运行都会因为这些动态内容而报失败。Skill 支持自定义忽略区域，上线前务必配好。
第四步，生成视觉测试脚本。
到这里，UI 自动化的核心链路「解析 → 生成 → 增强 → 视觉」已经基本完整了。下一篇我们聚焦 ui-auto-maintainer，聊聊如何实现页面变更检测、定位策略自动修复、视觉基线自动更新，让 UI 自动化脚本真正实现「自愈」，彻底解决维护成本高这个终极难题。
