关于 qa-web-test
使用 PinchTab 在浏览器中检查目标 URL 的 Web QA 技能。它可截取页面、检查响应式布局和 CSS，并生成包含通过或失败结果的报告。
主要功能
- 01访问目标 URL
- 02测试选定的视口宽度
- 03截取屏幕截图
- 04检查 CSS 和布局
- 05生成 QA 报告
适用场景
- 01检查网站在不同视口尺寸下的表现
- 02排查布局溢出和样式问题
- 03记录视觉 QA 结果
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/qa-web-test确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/breakpoints.mdcss-inspection.mdsteps/step-01-connect.mdstep-02-breakpoints.mdstep-03-emulate-and-capture.mdstep-04-css-inspection.mdstep-04b-visual-inspection.mdstep-05-report.md详细介绍
使用 PinchTab 进行 QA Web 测试
所有浏览器交互（导航、截图、视口模拟和 DOM 检查）均使用 Skill("pinchtab")。描述你的需求，让 pinchtab 处理具体细节。
输入
原始参数：$ARGUMENTS
根据参数推断：
- TARGET_URL：要测试的 URL
- OUT_DIR：QA 报告和截图的输出目录；如果未提供，则为
./qa-reports
输出位置
- 创建或更新
OUT_DIR/qa-report-{timestamp}.md - 截图保存到
OUT_DIR/screenshots/ - 写入前运行
mkdir -p OUT_DIR/screenshots，确保目录存在。
工作流
按顺序执行以下步骤。阅读每个步骤文件以了解详细说明。
- 连接并导航 — 导航至目标 URL（包括身份验证检查，必要时登录）
- 确定断点 — 选择要测试的视口宽度
- 模拟并截图 — 设置视口、截图并检查尺寸
- CSS 检查 — 检查计算样式和容器查询
- 视觉设计检查 — 检查排版、颜色、间距、边框和可见性
- 报告结果 — 使用通过/失败表格汇总发现
参考文件
| 参考资料 | 阅读时机 |
|---|---|
| references/breakpoints.md | 常见断点值、容器查询与媒体查询的注意事项 |
| references/css-inspection.md | 用于溢出检测、网格/弹性布局检查和 DOM 遍历的 JS 代码片段 |
评论
支持 Markdown