webapp-testing - SKILL.md Agent Skill

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