mcpField
U
ui-check-framework

ui-check-framework

github.com/yiyousiow000814测试与质量041 次安装15 周前更新
代码仓库

关于 ui-check-framework

UI Check Framework 是用于构建或完善自动化 UI 自检的 Skill，通过 data-qa 标签发现界面元素。它以通用行为和视觉约定验证组件，避免每增加一个界面元素都编写新测试。

主要功能

  1. 01发现带标签的 UI 元素
  2. 02捕获组件截图
  3. 03检查主题与动画行为
  4. 04验证异步加载状态
  5. 05保存测试产物与报告

适用场景

  1. 01为新增 UI 组件添加自动检查
  2. 02验证弹窗在较小高度下的可用性
  3. 03发现布局偏移与不可见错误

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/yiyousiow000814/xauusd-calendar-agent --skill ui-check-framework

安装后在 Claude Code 中输入/ui-check-framework确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
contracts.md
qa-tagging.md
workflow.md

详细介绍

UI 检查框架

概述

创建或优化自动化 UI 自检系统，通过 data-qa 标签发现 UI 模块，并强制执行行为与视觉契约（主题、动画、加载状态、布局稳定性、模态框易用性、错误可见性）。该框架必须能够扩展到新的卡片、模态框、提示框和操作，而无需每次都编写新的测试用例。

工作流（按顺序执行）

  1. 检查现有脚手架

    • 如果项目存在 ui-tests/ 文件夹，优先复用。
    • 如果存在，请阅读 ui-tests/docs/UI_TESTING.md 和 ui-tests/docs/QA_TAGGING.md。
    • 确认根目录 package.json 中的脚本（ui:test、ui:update-baseline、 ui:report、ui:check、ui:watch）指向 Playwright 流程。

  2. 强制执行发现

    • 自动收集所有以 qa: 开头的 data-qa 或 data-testid 元素。
    • 在小、中、大尺寸下截取组件截图（卡片、模态框、菜单、工具栏、提示框）。
    • 对于模态框：验证内部滚动、单个关闭按钮，以及窗口高度较小时标题栏的可见性。

  3. 强制执行契约（通用，而非硬编码）

    • 检查深色、浅色和系统主题的对比度与可读性（参见参考资料）。
    • 检查微调器、过渡效果和提示框的动画与动效。
    • 检查异步操作的加载状态机：空闲 -> 加载中 -> 成功/错误 -> 空闲。
    • 检查布局稳定性（临时状态或提示框不应导致布局偏移）。
    • 检查操作按钮与模态框标题栏/页脚是否重叠。
    • 检查错误是否可见，以及是否出现空白页面。

  4. 接入用于自动化的 UI 钩子

    • 添加最少量的 window.__ui_check__ 助手（例如，追加日志、触发提示框），使契约无需硬编码选择器即可测试。
    • 新增卡片、模态框和操作时，添加所需的 data-qa 标签。

  5. 产物与报告

    • 将产物存放在 artifacts/ui-check/ 下（快照、帧、视频、report.html）。
    • 确保 ui:check 支持交互（打开/关闭模态框、悬停/按下、切换主题、滚动）。

项目专属定位

  • 主要 UI 测试位于 ui-tests/，并使用 Playwright。
  • 使用 ui-tests/scripts/ui-check.mjs 和 ui-tests/scripts/ui-watch.mjs 作为交互式验证入口。
  • 面向用户的文档保存在 ui-tests/docs/UI_TESTING.md 和 ui-tests/docs/QA_TAGGING.md 中。

参考资料

  • references/workflow.md - 扩展工作流与验证检查清单。
  • references/qa-tagging.md - 所需的 QA 标记与命名约定。
  • references/contracts.md - 所需的通用契约及其检查方法。

评论

支持 Markdown