webapp-testing

📁 wellapp-ai/well 📅 3 days ago
3
总安装量
2
周安装量
#57688
全站排名
安装命令
npx skills add https://github.com/wellapp-ai/well --skill webapp-testing

Agent 安装分布

opencode 2
cursor 2
claude-code 2
antigravity 2
kilo 1

Skill 文档

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

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