用途:Responsive UI QA 用于检查、诊断、修复并验证响应式前端缺陷,覆盖不同路由、状态、容器和输入模式,适合移动端或桌面端 QA、溢出等问题排查。其目标是找到根因,而不是针对某张截图打补丁,并产出证据证明所报告状态在修复后可用。
主要能力与工作流:先阅读仓库的运行与测试说明,用项目常规命令启动应用;建立紧凑测试矩阵,包含关键路由或组件,默认、加载、空、错误、长内容与交互状态,以及窄移动端、移动端、平板或窄容器、桌面、宽桌面等视口。编辑前先复现所报告的确切缺陷,记录视口、路由、状态与交互。检查布局机制,包括包含块、grid/flex 约束、固有尺寸、min-width、换行、定位、层叠、溢出以及 fixed/sticky 偏移。按严重程度分类:Blocker 表示操作或内容不可访问;Major 表示交互或理解受到实质影响;Minor 表示可见的打磨缺陷但任务未失败。用最小且连贯的改动修复底层约束,避免仅针对视口的偏移,除非设计确实在该处变化。
测试与修复规则:进行内容压力测试,如长标签、不可断字符串、本地化扩展、缺失或超大媒体、校验文本与动态列表;测试输入与偏好模式,如键盘、触控尺寸目标、焦点可见性、可行时的缩放与减少动态效果。重新运行失败用例及相邻宽度和状态,确认未引入新的横向滚动或隐藏内容。报告证据、剩余风险以及本地无法测试的内容。修复时优先使用固有布局、换行、minmax()、min-width: 0、max-width、aspect-ratio 与容器感知规则;当仅靠重排不足时,在断点处调整信息架构;不要通过全局隐藏溢出或把文字缩小到不可读来“修复”溢出;为具有真实尺寸契约的控件和媒体保留固定尺寸;避免 fixed 或 sticky UI 遮挡聚焦元素与锚定内容;通过检查渲染像素与缩放行为验证 canvas、WebGL、视频、图表、地图与嵌入内容;在触发缺陷的确切状态保留行为。
交付契约:返回已测试矩阵(路由/状态/视口/输入)、发现(严重程度、复现与根因)、修复(更改的文件及为何该约束正确)、证据(前后截图或明确的浏览器观察)、剩余风险(未测试的浏览器、数据状态或环境)。参考 references/qa-checklist.md 进行最终的跨视口与交互检查。
限制:资料未提供具体安装命令、收费、价格、平台或效果信息,暂未提供。