---
description: Standards and workflow for using Browser MCP tools to test UI changes
globs:
alwaysApply: true
---
# Browser Testing Workflow
Standards and workflow for using Browser MCP tools to test UI changes. Auto-included for all files.
<rule>
name: browser_testing
description: Standards and workflow for using Browser MCP tools to test UI changes. Auto-included for all files.
globs: ["**/*"]
actions:
- type: suggest
message: |
Follow this workflow when testing UI components or features:
- Whenever you implement or modify UI components, you MUST test them using the browser tools before completing the task.
- **CRITICAL:** Before starting any test, you MUST COMPLETELY CLEAR the `/app/test/page.tsx` file and start fresh.
- Create or overwrite `/app/test/page.tsx` with your test component:
- `// Example test page structure
export default function TestPage() {
return (
<div className="min-h-screen p-8">
<h1 className="text-2xl font-bold mb-4">Component Test</h1>
{/* Your component tests here */}
</div>
);
}
`
- **Rules for test page:**
- ALWAYS completely clear the existing content first
- Include clear labels for what you're testing
- Test all variants and states of the component
- Include interactive elements if applicable
- Use semantic HTML and proper accessibility attributes
- `// Navigate to the test page
mcp_cursor-playwright_browser_navigate({
url: "http://localhost:3000/test"
})
// Take a snapshot to see the page structure
mcp_cursor-playwright_browser_snapshot()
`
- Use appropriate browser tools to test functionality:
- **Clicking Elements:**
- `mcp_cursor-playwright_browser_click({
element: "Description of button",
ref: "element-ref-from-snapshot"
})
`
- **Typing in Inputs:**
- `mcp_cursor-playwright_browser_type({
element: "Description of input",
ref: "element-ref-from-snapshot",
text: "Test input text"
})
`
- **Filling Forms:**
- `mcp_cursor-playwright_browser_fill_form({
fields: [
{ name: "Email field", type: "textbox", ref: "ref1", value: "test@example.com" },
{ name: "Accept terms", type: "checkbox", ref: "ref2", value: "true" }
]
})
`
- **Taking Screenshots:**
- `// For visual verification
mcp_cursor-playwright_browser_take_screenshot({
filename: "component-test-result.png",
fullPage: true
})
`
- After interactions:
1. Take another snapshot to verify changes
2. Check console messages: `mcp_cursor-playwright_browser_console_messages()`
3. Check network requests if relevant: `mcp_cursor-playwright_browser_network_requests()`
4. Take screenshots for visual confirmation
- After testing is complete and everything works:
- `pnpm checks
`
- Fix any linting or TypeScript errors before finalizing.
- **MANDATORY:** After completing all tests, inform the user with:
1. **What was tested:** Brief description of the component/feature
2. **Test results:** What worked, what didn't
3. **Test page contents:** Show the user the COMPLETE content of `/app/test/page.tsx` so they can run the same tests manually
4. **Validation results:** Output from `pnpm checks`
5. **How to test manually:** Instructions like "Run `pnpm dev` and visit http://localhost:3000/test"
- **Navigation:**
- `browser_navigate`: Navigate to a URL
- `browser_navigate_back`: Go back to previous page
- `browser_tabs`: Manage multiple browser tabs
- **Inspection:**
- `browser_snapshot`: Get accessibility tree (best for actions)
- `browser_take_screenshot`: Capture visual screenshot
- `browser_console_messages`: View console logs
- `browser_network_requests`: View network activity
- **Interaction:**
- `browser_click`: Click elements
- `browser_type`: Type into inputs
- `browser_fill_form`: Fill multiple form fields
- `browser_hover`: Hover over elements
- `browser_drag`: Drag and drop
- `browser_select_option`: Select dropdown options
- `browser_press_key`: Press keyboard keys
- **Advanced:**
- `browser_evaluate`: Run JavaScript on the page
- `browser_wait_for`: Wait for text or time
- `browser_handle_dialog`: Handle alerts/confirms
- `browser_file_upload`: Upload files
- `browser_resize`: Change viewport size
- Before marking a task as complete:
- [ ] Test page (`/app/test/page.tsx`) completely cleared and rewritten
- [ ] All component variants tested
- [ ] Interactive elements work correctly
- [ ] Visual appearance verified with screenshots
- [ ] Console has no errors
- [ ] Code quality checks pass (`pnpm checks`)
- [ ] User informed of test page contents
- [ ] Manual testing instructions provided
1. **Always use snapshot before actions** - You need element refs
2. **Test all interactive states** - Hover, focus, disabled, error
3. **Test responsive behavior** - Use `browser_resize` to test different viewports
4. **Verify accessibility** - Check ARIA attributes in snapshots
5. **Check console for errors** - Silent errors can hide bugs
6. **Test edge cases** - Empty states, long text, invalid inputs
7. **Clean up test page** - Completely clear before each new test
8. **Document test cases** - Add comments in test page explaining what's being tested
- **Testing a Button Component:**
- `// 1. Create test page with all button variants
// 2. Navigate and snapshot
// 3. Click each button variant
// 4. Verify visual feedback and actions
// 5. Screenshot final result
`
- **Testing a Form Component:**
- `// 1. Create test page with form
// 2. Navigate and snapshot
// 3. Fill form fields
// 4. Test validation (empty, invalid, valid)
// 5. Submit and verify
// 6. Check console and network for submission
`
- **Testing Interactive UI:**
- `// 1. Create test page with component
// 2. Navigate and snapshot
// 3. Interact (clicks, typing, hover)
// 4. Snapshot after each interaction
// 5. Verify state changes
// 6. Screenshot for visual verification
`
examples:
- input: |
// ❌ DON'T: Skip testing and assume it works
// [Implement component]
// [Mark task as complete without testing]
output: |
// ✅ DO: Always test with browser tools
// [Implement component]
// [Create test page]
// [Use browser tools to verify]
// [Run pnpm checks]
// [Report results to user]
- input: |
// ❌ DON'T: Append to existing test page
export default function TestPage() {
return <div>Old test still here...</div>
}
// [Add new test below]
output: |
// ✅ DO: COMPLETELY CLEAR the test page first
// Step 1: Clear /app/test/page.tsx completely
// Step 2: Write fresh test content
export default function TestPage() {
return (
<div className="p-8">
<h1>Button Component Test</h1>
{/* Fresh, clean test */}
</div>
);
}
- input: |
// ❌ DON'T: Test without taking snapshots
mcp_cursor-playwright_browser_navigate({ url: "http://localhost:3000/test" })
mcp_cursor-playwright_browser_click({ element: "button", ref: "???" })
output: |
// ✅ DO: Always snapshot before interacting
mcp_cursor-playwright_browser_navigate({ url: "http://localhost:3000/test" })
mcp_cursor-playwright_browser_snapshot() // Get element refs
mcp_cursor-playwright_browser_click({
element: "Submit button",
ref: "ref-from-snapshot"
})
mcp_cursor-playwright_browser_snapshot() // Verify change
- input: |
// ❌ DON'T: Finish without informing user
// [Complete testing]
// "Done!"
output: |
// ✅ DO: Always inform user with complete details
// Testing complete! Results:
//
// Tested: Button component with 5 variants
// Results: All variants render and respond correctly
//
// Test page content (/app/test/page.tsx):
// `typescript // export default function TestPage() { ... } // `
//
// Validation: `pnpm checks` passed
//
// To test manually:
// 1. Run `pnpm dev`
// 2. Visit http://localhost:3000/test
// 3. Try clicking each button variant
metadata:
priority: high
version: 1.0
</rule>
