visual-qa-testing
Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests. Use after making UI changes to verify they look correct.
By spencerpauly · 516 installs
npx skills add spencerpauly/awesome-cursor-skills --skill visual-qa-testing
Source repository · Upstream listing
Visual QA
Use this skill after making UI changes to visually verify the result, catch console errors, and audit network requests — all without leaving 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.
Steps
1. Ensure the dev server is running — check if there's already a terminal running the dev server. If not, start one in the background:
Wait for the server to be ready (watch for the "ready" or localhost URL in the output).
2. Navigate to the page — use browser navigate to open the relevant page:
If the change is on a specific route, navigate directly to it (e.g., /settings , /dashboard ).
3. Take a screenshot — capture the current state:
Review the screenshot for visual issues: layout breaks, missing content, wrong colors, misaligned elements.
4. Check console for errors — look for JavaScript errors or warnings:
Report any errors, especially TypeError , ReferenceError , failed imports, or React hydration mismatches.
5. Audit network requests — check for failed API calls or unexpected requests:
Look for: 4xx/5xx status codes, CORS errors, excessively large responses, unnecessary duplicate requests.
6. 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.
7. 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)
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.