1. tabs_context_mcp (createIfEmpty: true)
2. tabs_create_mcp  → get new tabId
3. navigate (url: target_url, tabId: {tab})
4. computer (action: "wait", duration: 2, tabId: {tab})
5. computer (action: "screenshot", tabId: {tab})

1. resize_window (width: 375, height: 667, tabId: {tab})
2. computer (action: "wait", duration: 1, tabId: {tab})
3. computer (action: "screenshot", tabId: {tab})
4. Repeat for other breakpoints

# Hover state
1. find (query: "submit button", tabId: {tab})
2. computer (action: "hover", ref: "ref_X", tabId: {tab})
3. computer (action: "screenshot", tabId: {tab})

# Focus state (tab to element)
4. computer (action: "key", text: "Tab", tabId: {tab})
5. computer (action: "screenshot", tabId: {tab})

# Click state
6. computer (action: "left_click", ref: "ref_X", tabId: {tab})
7. computer (action: "screenshot", tabId: {tab})

1. find (query: "email input", tabId: {tab})
2. computer (action: "left_click", ref: "ref_X", tabId: {tab})
3. computer (action: "type", text: "test@example.com", tabId: {tab})
4. computer (action: "key", text: "Tab", tabId: {tab})  # Move to next field
5. computer (action: "type", text: "password123", tabId: {tab})
6. computer (action: "screenshot", tabId: {tab})  # Capture filled form
7. find (query: "submit button", tabId: {tab})
8. computer (action: "left_click", ref: "ref_Y", tabId: {tab})
9. computer (action: "wait", duration: 2, tabId: {tab})
10. computer (action: "screenshot", tabId: {tab})  # Capture result

1. find (query: "navigation menu", tabId: {tab})
2. computer (action: "left_click", ref: "ref_X", tabId: {tab})
3. computer (action: "wait", duration: 1, tabId: {tab})
4. computer (action: "screenshot", tabId: {tab})
5. Check URL changed: read_page to verify content

# Test validation errors
1. find (query: "email input", tabId: {tab})
2. computer (action: "left_click", ref: "ref_X", tabId: {tab})
3. computer (action: "type", text: "invalid-email", tabId: {tab})
4. computer (action: "key", text: "Tab", tabId: {tab})
5. computer (action: "screenshot", tabId: {tab})  # Capture error state
6. read_page (tabId: {tab})  # Verify error message in DOM

1. read_page (tabId: {tab}, filter: "all")
   → Returns full a11y tree with roles, names, states

2. read_page (tabId: {tab}, filter: "interactive")
   → Returns only interactive elements (buttons, links, inputs)

1. computer (action: "key", text: "Tab", tabId: {tab})
2. computer (action: "screenshot", tabId: {tab})  # Focus indicator visible?
3. Repeat Tab, screenshot each focused element
4. computer (action: "key", text: "Return", tabId: {tab})  # Activate element
5. computer (action: "screenshot", tabId: {tab})

# Start recording
1. gif_creator (action: "start_recording", tabId: {tab})
2. computer (action: "screenshot", tabId: {tab})  # First frame

# Perform actions (each screenshot captures a frame)
3. computer (action: "left_click", coordinate: [x,y], tabId: {tab})
4. computer (action: "screenshot", tabId: {tab})
5. computer (action: "type", text: "...", tabId: {tab})
6. computer (action: "screenshot", tabId: {tab})
... continue flow ...

# Stop and export
7. computer (action: "screenshot", tabId: {tab})  # Last frame
8. gif_creator (action: "stop_recording", tabId: {tab})
9. gif_creator (action: "export", download: true, filename: "user-flow.gif", tabId: {tab})

gif_creator (
  action: "export",
  download: true,
  filename: "demo.gif",
  options: {
    showClickIndicators: true,   # Orange circles at clicks
    showActionLabels: true,      # Labels for actions
    showProgressBar: true,       # Progress bar at bottom
    quality: 10                  # 1-30, lower = better quality
  },
  tabId: {tab}
)

1. read_console_messages (tabId: {tab}, onlyErrors: true)
   → Shows only errors and exceptions

2. read_console_messages (tabId: {tab}, pattern: "TypeError|ReferenceError")
   → Filter specific error types

3. read_console_messages (tabId: {tab}, pattern: "MyApp", clear: true)
   → App-specific logs, clear after reading

1. read_network_requests (tabId: {tab}, urlPattern: "/api/")
   → Filter API calls only

2. read_network_requests (tabId: {tab}, limit: 50)
   → Last 50 requests

3. read_network_requests (tabId: {tab}, clear: true)
   → Clear after reading to track new requests

javascript_tool (
  action: "javascript_exec",
  text: "document.querySelector('.error-message')?.textContent",
  tabId: {tab}
)

## UI Test Report

**Page:** {url}
**Date:** {date}
**Tester:** {agent}

### Visual Verification
- [ ] Layout matches design spec
- [ ] Responsive at mobile (375px)
- [ ] Responsive at tablet (768px)
- [ ] Responsive at desktop (1440px)

### Interaction Testing
- [ ] Forms submit correctly
- [ ] Navigation works
- [ ] Error states display properly
- [ ] Loading states visible

### Accessibility
- [ ] All interactive elements keyboard accessible
- [ ] Focus indicators visible
- [ ] Labels on all inputs
- [ ] Alt text on images

### Issues Found
| Severity | Issue | Screenshot |
|----------|-------|------------|
| High | {issue} | {screenshot_id} |

### Recommendations
- {recommendation 1}
- {recommendation 2}