Webapp Testing Skill Skill

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 |

Agent Skills: Webapp Testing Skill

Install this agent skill to your local

Skill Files