tomevault-io Webapp Testing Skill
Use Browser MCP to test the web application.
Storybook Testing
- Ensure Storybook running:
npm run storybook - Navigate:
browser_navigatetohttp://localhost:6006 - Take snapshot:
browser_snapshotorbrowser_take_screenshot - Verify component states
Web App Testing
- Ensure dev server:
npm run dev - Navigate:
browser_navigatetohttp://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 |
Converted and distributed by TomeVault — claim your Tome and manage your conversions.