playbooks

home / skills / wellapp-ai / well / webapp-testing

webapp-testing skill

/cursor-rules/skills/webapp-testing

This skill helps you validate web app UI with Browser MCP and Storybook, capturing states, interactions, and errors to ensure quality.

npx playbooks add skill wellapp-ai/well --skill webapp-testing

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.1 KB
---
name: webapp-testing
description: Test web app UI using Browser MCP and Storybook
---

# 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 |

Overview

This skill automates UI testing for web apps using Browser MCP and Storybook. It provides a clear workflow for component-level Storybook checks and full integration tests against a running dev server. The goal is fast, repeatable verification of rendering, interactions, network behavior, and console health.

How this skill works

The skill drives a browser test harness to navigate to Storybook or the app, perform interactions (click, type, hover, key presses), and capture snapshots or screenshots. It inspects console messages and network requests to surface runtime errors and API issues. Tests include responsive checks via resizing and record state for assertions.

When to use it

  • Validate UI components in isolation via Storybook before merging changes
  • Run end-to-end flows against the local dev server during feature development
  • Automate regression checks after layout or interaction changes
  • Debug blank pages, API failures, or broken clicks before escalating
  • Confirm accessibility or keyboard navigation behavior during releases

Best practices

  • Start Storybook and the dev server manually or via CI scripts before running tests
  • Use browser_snapshot alongside screenshots to capture DOM state and visual output
  • Check browser_console_messages and browser_network_requests early to catch failures fast
  • Resize the viewport to test responsive breakpoints and include keyboard interactions
  • Make selectors stable and prefer data-test attributes to reduce flakiness

Example use cases

  • Component render test: open Storybook, take a snapshot, interact with controls, verify no console errors
  • Form flow test: navigate to localhost:3000, type inputs, submit, assert network requests and resulting state
  • Responsive layout test: resize through breakpoints, take screenshots, confirm layout integrity
  • Error reproduction: reproduce blank-screen locally and inspect console messages and network traces to pinpoint failure
  • Accessibility check: exercise keyboard navigation with browser_press_key and confirm focus and states

FAQ

Do I need Storybook running to test components?

Yes—start Storybook (commonly npm run storybook) so the skill can navigate to the component UI and perform snapshots and interactions.

How do I catch API errors during tests?

Use browser_network_requests to inspect requests and browser_console_messages to capture related errors; combine those with snapshots for context.