| 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
- Ensure Storybook running:
npm run storybook
- Navigate:
browser_navigate to http://localhost:6006
- Take snapshot:
browser_snapshot or browser_take_screenshot
- Verify component states
Web App Testing
- Ensure dev server:
npm run dev
- Navigate:
browser_navigate to http://localhost:3000
- Interact:
browser_click, browser_type
- 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 |