webapp-testing_skill

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