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

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