mcpField
R
responsive-testing

responsive-testing

github.com/spencerpauly测试与质量868572 次安装13 周前更新
代码仓库

关于 responsive-testing

用于 UI 改动后检查响应式布局的测试技能，按多个视口尺寸检查页面并记录问题。适合需要验证移动端、平板和桌面布局的开发流程。

主要功能

  1. 01覆盖五种标准视口宽度
  2. 02通过浏览器导航调整视口
  3. 03使用截图和无障碍树检查布局
  4. 04检查溢出、隐藏内容与触控目标
  5. 05记录测试结果并复测修复项

适用场景

  1. 01验证 UI 改动在移动端的表现
  2. 02检查平板和桌面导航布局
  3. 03查找横向滚动或被遮挡内容
  4. 04修复后重测受影响视口

安装

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

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --skill responsive-testing

安装后在 Claude Code 中输入/responsive-testing确认已加载。

详细介绍

响应式测试

更改 UI 后，请在所有标准断点下验证应用的显示是否正确。

要测试的视口

名称宽度Tailwind
手机（小屏）375pxdefault
手机（大屏）428pxdefault
平板768pxmd:
桌面1280pxxl:
超宽屏1536px2xl:

工作流

1. 导航到页面

使用 browser_navigate 打开目标 URL（通常是 http://localhost:3000，或开发服务器实际运行的地址）。

2. 测试每种视口尺寸

对于每种视口尺寸：

  1. 使用带视口参数的 browser_navigate 调整视口大小，或使用 browser_snapshot 检查布局
  2. 使用 browser_take_screenshot 截取屏幕截图
  3. 检查 browser_snapshot 中的 aria 树，留意以下问题：
    • 内容溢出或被其他元素遮挡
    • 应折叠为汉堡菜单的导航
    • 文本太小，难以阅读
    • 按钮或链接间距过近（触控目标问题）
    • 不应出现的水平滚动条
3. 检查常见的布局问题
  • 溢出：元素宽度超出视口，导致水平滚动
  • 布局未折叠：在手机上应堆叠显示、却没有堆叠的 Flex/Grid 项目
  • 内容隐藏：某些元素在特定尺寸下消失，却没有菜单切换按钮
  • 字体缩放：文本在桌面上清晰可读，在手机上却太小
  • 固定定位：模态框、提示消息或粘性页眉在小屏幕上显示异常
  • 图像：尺寸过大的图像未能缩小
4. 报告
Responsive Test Results:
  375px (mobile):  PASS — layout stacks correctly
  428px (mobile):  PASS
  768px (tablet):  WARN — nav items overlap, need hamburger menu
  1280px (desktop): PASS
  1536px (ultrawide): WARN — content not centered, stretched too wide

修复发现的所有问题，然后重新测试受影响的视口。

评论

支持 Markdown