用途:这是一个 QA 网页测试技能,借助 PinchTab 浏览器自动化完成视觉回归测试、响应式断点验证与 CSS 布局调试。所有浏览器交互(导航、截图、视口模拟、DOM 检查)均通过 Skill("pinchtab") 完成。
输入:从原始参数 $ARGUMENTS 推断 TARGET_URL(待测 URL)与 OUT_DIR(QA 报告和截图的输出目录,未提供时默认 ./qa-reports)。
输出:创建或更新 OUT_DIR/qa-report-{timestamp}.md,截图保存到 OUT_DIR/screenshots/。写入前需运行 mkdir -p OUT_DIR/screenshots 确保目录存在。
工作流(按顺序执行,每步读取对应步骤文件获取详细说明):1) 连接并导航到目标 URL,包含鉴权检查与必要登录;2) 确定要测试的视口宽度断点;3) 模拟视口、截图并检查尺寸;4) CSS 检查,查看计算样式与容器查询;5) 视觉设计检查,核对排版、颜色、间距、边框与可见性;6) 汇总结果,输出带通过/失败表格的报告。
参考文件:references/breakpoints.md 提供常见断点值及容器查询与媒体查询的注意事项;references/css-inspection.md 提供用于溢出检测、grid/flex 检查与 DOM 遍历的 JS 片段。
限制:资料未提供具体安装命令、依赖版本、支持的浏览器或平台、收费信息及实际效果说明,暂未提供。