visual-qa-testing

视觉 QA

在进行 UI 更改后使用此技能，以直观验证结果、捕获控制台错误并审查网络请求，全程无需离开 Cursor。

工作原理

Cursor 内置了浏览器（cursor-ide-browser MCP），可以导航到 URL、截取屏幕截图、读取控制台消息、检查网络请求并与页面元素交互。此技能使用这些工具快速完成一轮视觉 QA。

步骤

1. 确保开发服务器正在运行 — 检查是否已有终端在运行开发服务器。如果没有，请在后台启动一个：

   npm run dev
   

   等待服务器就绪（留意输出中的 “ready” 或 localhost URL）。

2. 导航到页面 — 使用 browser_navigate 打开相关页面：

   Tool: browser_navigate
   Arguments: { "url": "http://localhost:3000", "take_screenshot_afterwards": true }
   

   如果更改针对特定路由，请直接导航到该路由（例如 /settings、/dashboard）。

3. 截取屏幕截图 — 捕获当前状态：

   Tool: browser_take_screenshot
   Arguments: { "fullPage": true }
   

   检查截图中是否存在视觉问题：布局错乱、内容缺失、颜色错误或元素未对齐。

4. 检查控制台错误 — 查找 JavaScript 错误或警告：

   Tool: browser_console_messages
   

   报告所有错误，尤其是 TypeError、ReferenceError、导入失败或 React 水合不匹配。

5. 审查网络请求 — 检查 API 调用是否失败或是否存在意外请求：

   Tool: browser_network_requests
   

   留意：4xx/5xx 状态码、CORS 错误、响应过大、不必要的重复请求。

6. 根据需要进行交互 — 如果更改涉及交互元素（按钮、表单、模态框），请使用 browser_click、browser_fill 或 browser_hover 测试交互，然后再截取一张屏幕截图进行验证。

7. 报告发现 — 总结：

   • 截图显示 UI 正常（或指出问题）
   • 控制台无错误（或列出发现的错误）
   • 网络请求正常（或列出失败项）

备注

• 点击元素前，始终使用 browser_snapshot 获取正确的元素引用。
• 如需测试响应式效果，请使用 browser_resize 检查不同的视口尺寸。
• 使用带有 position: "side" 的 browser_navigate，将浏览器打开在代码旁边。