본문으로 건너뛰기
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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 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월 22일 업데이트

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

WellApp-ai/Well3452026년 10월 22일 업데이트

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월 22일 업데이트

Generate and maintain BPMN 2.0 diagrams linked to Gherkin scenarios

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

WellApp-ai/Well3452026년 10월 22일 업데이트

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월 22일 업데이트

Review code changes against hard rules and conventions

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

WellApp-ai/Well3452026년 10월 22일 업데이트

WellApp-ai의 스킬 모두 보기

이 스킬의 문제 신고