‹ 首页

webapp-testing

@wellapp-ai · 收录于 5 天前 · 上游提交 1 个月前

Test web app UI using Browser MCP and Storybook

场景ui测试前端验收组件检查

适合你，如果需要在浏览器中自动验证网页界面和组件

/ 下载安装
https://github.com/wellapp-ai/well/tree/main/cursor-rules/skills/webapp-testing ↗
/ 通过 npx 安装 校验哈希
npx oh-my-skill add wellapp-ai/well/webapp-testing
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- wellapp-ai/well/webapp-testing
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify wellapp-ai/well/webapp-testing
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
340GitHub stars
~360上下文体积 · 单文件
索引托管

怎么用

商店整理自技能原文 · 版本 782601c · 表述以原文为准
它做什么

装上后，Claude能使用浏览器工具测试本地运行的Web应用和Storybook组件的界面、交互和错误。

什么时候触发

当用户要求测试本地的Web应用或Storybook组件，且开发服务器已启动时触发。

装好后可以这样说
触发后Claude会使用浏览器工具操作和检查界面。
技能原文 SKILL.md作者撰写 · MIT · 782601c

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 |

按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…