本文へ移動
cccskills
無料GitHub で公開

webapp-testing

Test web app UI using Browser MCP and Storybook

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.1 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

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月8日 更新

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

日本語の概要は準備中です。原文の説明を表示しています。

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

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月8日 更新

Generate and maintain BPMN 2.0 diagrams linked to Gherkin scenarios

日本語の概要は準備中です。原文の説明を表示しています。

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

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月8日 更新

Review code changes against hard rules and conventions

日本語の概要は準備中です。原文の説明を表示しています。

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

WellApp-ai のスキルをすべて見る

このスキルの問題を報告する