关于 visual-qa-testing
用于在 Cursor 内通过内置浏览器检查 UI 变更的技能。它引导执行 QA 流程，涵盖截图、控制台消息、网络请求和页面交互。
主要功能
- 01打开页面并截取屏幕截图
- 02检查浏览器控制台消息
- 03检查网络请求是否失败
- 04测试交互元素
- 05检查响应式布局
适用场景
- 01验证 UI 修改后的页面
- 02在 QA 检查中发现浏览器错误
- 03检查 API 失败和异常请求
MCP 相关
通过 `cursor-ide-browser` MCP 使用 Cursor 内置浏览器打开页面、截图、检查控制台与网络活动，并与页面元素交互。
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/visual-qa-testing确认已加载。
详细介绍
视觉 QA
在进行 UI 更改后使用此技能，以直观验证结果、捕获控制台错误并审查网络请求，全程无需离开 Cursor。
工作原理
Cursor 内置了浏览器（cursor-ide-browser MCP），可以导航到 URL、截取屏幕截图、读取控制台消息、检查网络请求并与页面元素交互。此技能使用这些工具快速完成一轮视觉 QA。
步骤
-
确保开发服务器正在运行 — 检查是否已有终端在运行开发服务器。如果没有，请在后台启动一个：
npm run dev等待服务器就绪（留意输出中的 “ready” 或 localhost URL）。
-
导航到页面 — 使用
browser_navigate打开相关页面：Tool: browser_navigate Arguments: { "url": "http://localhost:3000", "take_screenshot_afterwards": true }如果更改针对特定路由，请直接导航到该路由（例如
/settings、/dashboard）。 -
截取屏幕截图 — 捕获当前状态：
Tool: browser_take_screenshot Arguments: { "fullPage": true }检查截图中是否存在视觉问题：布局错乱、内容缺失、颜色错误或元素未对齐。
-
检查控制台错误 — 查找 JavaScript 错误或警告：
Tool: browser_console_messages报告所有错误，尤其是
TypeError、ReferenceError、导入失败或 React 水合不匹配。 -
审查网络请求 — 检查 API 调用是否失败或是否存在意外请求：
Tool: browser_network_requests留意：4xx/5xx 状态码、CORS 错误、响应过大、不必要的重复请求。
-
根据需要进行交互 — 如果更改涉及交互元素（按钮、表单、模态框），请使用
browser_click、browser_fill或browser_hover测试交互，然后再截取一张屏幕截图进行验证。 -
报告发现 — 总结：
- 截图显示 UI 正常（或指出问题）
- 控制台无错误（或列出发现的错误）
- 网络请求正常（或列出失败项）
备注
- 点击元素前，始终使用
browser_snapshot获取正确的元素引用。 - 如需测试响应式效果，请使用
browser_resize检查不同的视口尺寸。 - 使用带有
position: "side"的browser_navigate，将浏览器打开在代码旁边。