Cursor Browser Testing

---
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>