SuperAPI AI 工具集

ui-check-framework

通用与其它

查看项目

更新于 10-16 02:27

技能介绍

用途:为 Web UI(React/Vite 或纯 HTML)构建或扩展可自动发现、可扩展的 UI 自检框架,基于 Playwright,通过 data-qa 标签发现界面区块,并对主题、动画、加载、布局稳定性、弹窗可用性与错误可见性等行为/视觉契约进行校验,新增卡片、弹窗、Toast 与操作无需每次编写新测试用例。

主要能力:自动收集以 qa: 开头的 data-qa 或 data-testid 元素;对卡片、弹窗、菜单、工具栏、Toast 在多种尺寸下截图;校验弹窗内部滚动、单一关闭按钮、小窗口高度下头部可见;校验深浅色/系统主题对比度、动画与过渡、异步加载状态机(idle → loading → success/error → idle)、布局稳定性、按钮与弹窗头尾重叠、错误可见与空白页检测。

使用方式:优先复用已有 ui-tests/ 目录,阅读 ui-tests/docs/UI_TESTING.md 与 QA_TAGGING.md(如存在);确认根 package.json 中的 ui:test、ui:update-baseline、ui:report、ui:check、ui:watch 脚本指向 Playwright 流程。交互验证入口为 ui-tests/scripts/ui-check.mjs 与 ui-tests/scripts/ui-watch.mjs。可添加最小化 window.ui_check 辅助方法并补充必要 data-qa 标签。产物存于 artifacts/ui-check/(快照、帧、视频、report.html)。

适用场景:需要持续、可扩展地对前端界面进行契约式自检的项目。

限制:具体运行命令、依赖版本与配置资料未提供;实际效果依赖项目已有的 data-qa 打标和文档约定。