---
name: webapp-testing
description: Test web app UI using Browser MCP and Storybook
---

# Webapp Testing Skill

Use Browser MCP to test the web application.

## Storybook Testing

1. Ensure Storybook running: `npm run storybook`
2. Navigate: `browser_navigate` to `http://localhost:6006`
3. Take snapshot: `browser_snapshot` or `browser_take_screenshot`
4. Verify component states

## Web App Testing

1. Ensure dev server: `npm run dev`
2. Navigate: `browser_navigate` to `http://localhost:3000`
3. Interact: `browser_click`, `browser_type`
4. Verify: `browser_snapshot`, `browser_console_messages`

## Available Browser Tools

| Tool | Purpose |
|------|---------|
| `browser_navigate` | Go to URL |
| `browser_click` | Click element |
| `browser_type` | Type text |
| `browser_hover` | Hover over element |
| `browser_snapshot` | Get page state |
| `browser_take_screenshot` | Capture image |
| `browser_console_messages` | Check for errors |
| `browser_network_requests` | Debug API calls |
| `browser_resize` | Test responsive layouts |
| `browser_press_key` | Keyboard interactions |

## Testing Workflow

### 1. Component Testing (Storybook)

```
browser_navigate → http://localhost:6006
browser_snapshot → verify component renders
browser_click → interact with controls
browser_console_messages → check for errors
```

### 2. Integration Testing (Web App)

```
browser_navigate → http://localhost:3000
browser_type → fill forms
browser_click → submit/navigate
browser_network_requests → verify API calls
browser_snapshot → verify state changes
```

## Testing Checklist

- [ ] Component renders correctly
- [ ] No console errors
- [ ] Responsive at different sizes (`browser_resize`)
- [ ] Keyboard navigation works (`browser_press_key`)
- [ ] Loading/error states display properly
- [ ] Network requests succeed

## Common Issues

| Issue | Debug With |
|-------|------------|
| Blank page | `browser_console_messages` |
| API failures | `browser_network_requests` |
| Layout broken | `browser_take_screenshot` |
| Click not working | `browser_snapshot` to find selector |