跳到正文
cccskills
免费在 GitHub 公开

webapp-testing

Test web app UI using Browser MCP and Storybook

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md2.1 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

ToolPurpose
browser_navigateGo to URL
browser_clickClick element
browser_typeType text
browser_hoverHover over element
browser_snapshotGet page state
browser_take_screenshotCapture image
browser_console_messagesCheck for errors
browser_network_requestsDebug API calls
browser_resizeTest responsive layouts
browser_press_keyKeyboard 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

IssueDebug With
Blank pagebrowser_console_messages
API failuresbrowser_network_requests
Layout brokenbrowser_take_screenshot
Click not workingbrowser_snapshot to find selector

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

ar-aging

免费

Produce an accounts-receivable aging report and surface overdue invoices for a Well workspace. Use when the user asks who owes them money, an AR aging report, overdue invoices, days sales outstanding (DSO), or which customers to chase.

中文简介正在准备中。当前显示原文说明。

WellApp-ai/Well3452026年10月15日 更新

Iterate until success or limit, composing existing skills with Jidoka integration

中文简介正在准备中。当前显示原文说明。

WellApp-ai/Well3452026年10月15日 更新

Build a balance sheet (bilan) from a Well workspace. Use when the user asks for a balance sheet, bilan, assets/liabilities/equity, or financial position at a point in time.

中文简介正在准备中。当前显示原文说明。

WellApp-ai/Well3452026年10月15日 更新

Generate and maintain BPMN 2.0 diagrams linked to Gherkin scenarios

中文简介正在准备中。当前显示原文说明。

WellApp-ai/Well3452026年10月15日 更新

Forecast cash flow and runway for a Well workspace from booked invoices and collected bank transactions. Use when the user asks for a cash-flow forecast, runway, how long until they run out of cash, projected balance, or expected inflows/outflows.

中文简介正在准备中。当前显示原文说明。

WellApp-ai/Well3452026年10月15日 更新

Review code changes against hard rules and conventions

中文简介正在准备中。当前显示原文说明。

WellApp-ai/Well3452026年10月15日 更新

查看 WellApp-ai 的全部技能

报告此技能的问题