SuperAPI AI 工具集

web-visual-verification

通用与其它

查看项目

更新于 10-15 23:45

技能介绍

用途:该技能用于验证网页 UI 是否按预期运行,通过 Playwright 驱动真实渲染的页面,回答“它行为是否正确”。适用于交互层变更、视觉资源变更、布局或 CSS 变更后,以及发布或交付前;不用于文件或数据一致性检查。

主要能力:产出四类脚本,各司其职。verify-.mjs 含断言,输出通过/失败与截图,用于运行时回归;capture-.mjs 不含断言,仅截图作为证据;diagnose-.mjs 不做断言但大量记录,输出控制台、DOM 树与截图,用于排查失败原因;check-.mjs、find-*.mjs 为临时探针,输出控制台结果。

使用方式:脚本基于 Playwright,可多视口运行,监听 pageerror 与 console.error 并在结尾断言为空。常用断言包括水平溢出、窗口滚动、移动端侧边栏开合、localStorage 往返持久化、内容缩放隔离等。等待策略默认用 networkidle,超时则改用 domcontentloaded 加显式 waitForSelector。截图按域存放于 data/{domain}-verify/,命名 {profile-id}-{state}.png。可通过 package.json 组合 verify 与 capture 命令,verify 在 CI 中必须通过,capture 在设计评审前手动运行。

限制:资料未提供具体安装命令、依赖版本、支持的浏览器范围及收费信息。脚本需自行适配目标站点选择器与流程;探针脚本不应包装成 verify 脚本;避免无断言的 verify、单一巨型脚本、忽略控制台错误、硬编码 localhost 等反模式。