visual-qa-testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Visual QA

可视化QA

Use this skill after making UI changes to visually verify the result, catch console errors, and audit network requests — all without leaving Cursor.

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

How It Works

工作原理

Cursor has a built-in browser (

cursor-ide-browser

MCP) that can navigate to URLs, take screenshots, read console messages, inspect network requests, and interact with page elements. This skill uses those tools to do a quick visual QA pass.

Cursor内置了一款浏览器（

cursor-ide-browser

MCP），可用于导航至URL、截取屏幕截图、读取控制台消息、检查网络请求以及与页面元素交互。此技能借助这些工具快速完成一次可视化QA检查。

Steps

步骤

Ensure the dev server is running — check if there's already a terminal running the dev server. If not, start one in the background:
bash
```
npm run dev
```
Wait for the server to be ready (watch for the "ready" or localhost URL in the output).

Navigate to the page — use

browser_navigate

to open the relevant page:

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

If the change is on a specific route, navigate directly to it (e.g.,

/settings

/dashboard

Take a screenshot — capture the current state:
```
Tool: browser_take_screenshot
Arguments: { "fullPage": true }
```
Review the screenshot for visual issues: layout breaks, missing content, wrong colors, misaligned elements.
Check console for errors — look for JavaScript errors or warnings:
```
Tool: browser_console_messages
```
Report any errors, especially
```
TypeError
```
,
```
ReferenceError
```
, failed imports, or React hydration mismatches.
Audit network requests — check for failed API calls or unexpected requests:
```
Tool: browser_network_requests
```
Look for: 4xx/5xx status codes, CORS errors, excessively large responses, unnecessary duplicate requests.
Interact if needed — if the change involves interactive elements (buttons, forms, modals), use
```
browser_click
```
,
```
browser_fill
```
, or
```
browser_hover
```
to test the interaction, then take another screenshot to verify.
Report findings — summarize:
- Screenshot shows the UI looks correct (or what's wrong)
- Console is clean (or list errors found)
- Network requests are healthy (or list failures)

确保开发服务器正在运行——检查是否已有终端在运行开发服务器。如果没有，在后台启动一个：
bash
```
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 hydration不匹配问题。
审核网络请求——检查失败的API调用或意外请求：
```
Tool: browser_network_requests
```
留意以下情况：4xx/5xx状态码、CORS错误、响应过大、不必要的重复请求。
必要时进行交互——如果更改涉及交互元素（按钮、表单、模态框），使用
```
browser_click
```
、
```
browser_fill
```
或
```
browser_hover
```
测试交互，然后再次截取截图以验证效果。
报告结果——总结内容：
- 截图显示UI外观正常（或说明存在的问题）
- 控制台无异常（或列出发现的错误）
- 网络请求状态良好（或列出失败的请求）

Notes

注意事项

Always use
```
browser_snapshot
```
before clicking elements to get the correct element refs.
For responsive testing, use
```
browser_resize
```
to check different viewport sizes.
Use
```
browser_navigate
```
with
```
position: "side"
```
to open the browser beside your code.

在点击元素前务必使用
```
browser_snapshot
```
以获取正确的元素引用。
如需响应式测试，使用
```
browser_resize
```
检查不同视口尺寸。
使用
```
browser_navigate
```
并设置
```
position: "side"
```
可在代码旁打开浏览器。