mcpField
R
responsive-testing

responsive-testing

github.com/revitalb-port测试与质量055 次安装10 周前更新
代码仓库

关于 responsive-testing

一项用于在界面改动后检查五种标准视口布局的技能，指导开发者通过浏览器检查、截图、排查常见响应式问题并汇报结果。

主要功能

  1. 01测试五种视口宽度
  2. 02导航并调整浏览器视口
  3. 03截图并检查 aria 树
  4. 04排查溢出、缩放与布局问题
  5. 05汇报结果并复测修复

适用场景

  1. 01验证界面改动后的页面布局
  2. 02发现移动端导航或触控目标问题
  3. 03检查小屏上的图片和模态框表现

安装

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

$npx skills add https://github.com/revitalb-port/skills-registry-demo --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