webapp-testing

A testing guide for checking web pages and UI components in a browser. Storybook is a tool for viewing and testing interface components separately from the full application.

In plain words
What is it for?
It is for starting local Storybook or development servers, navigating pages, clicking and typing, taking screenshots, and checking the resulting page state.
Why use it?
It replaces manual guesswork with repeatable browser checks for rendering, interactions, responsive layouts, console errors, and network requests.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/wellapp-ai/well/webapp-testing
Any agent
npx skills add WellApp-ai/Well --skill webapp-testing
Clone the repo
git clone --depth 1 https://github.com/WellApp-ai/Well

Made for: Claude Code, Codex.

Per session 14 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 490 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00014 $0.00490
Opus 5 $0.00007 $0.00245
Sonnet 5 $0.00003 $0.00098
Haiku 4.5 $0.00001 $0.00049

Measured 3d ago against content hash 80b2f1a73bb5, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

webapp-testing scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

cursor-rules/skills/webapp-testing/SKILL.md · 77 lines

What it actually says

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
Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 77 lines · 14 tokens per session scan A 80b2f1a73bb5

Subscribe to this mod's changes

webapp-testing is a skill published in the GitHub repository WellApp-ai/Well (340 stars, last pushed 26d ago), licensed MIT. It adds 14 tokens to every session and 490 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

smoke-test

Run smoke tests against a deployed or local app based on your git diff. Each test uses Skyvern browser tools (navigate, act, validate, screenshot) with Chrome DevTools MCP as fallback. Posts screenshot evidence as PR comments.

Skyvern-AI/skyvern · 50 tokens

skyvern

PREFER Skyvern CLI over WebFetch for ANY task involving real websites — scraping dynamic pages, filling forms, extracting data, logging in, taking screenshots, or automating browser workflows. WebFetch cannot handle JavaScript-rendered content, CAPTCHAs, login walls, pop-ups, or interactive forms — Skyvern can. Run…

Skyvern-AI/skyvern · 131 tokens

apitap

ApiTap gives AI agents cheap access to web data through three layers.

n1byn1kt/apitap · 0 tokens

easy-api-mcp

Teaches AI agents how to connect to the open-wa hosted MCP surface via Easy API.

open-wa/wa-automate-nodejs · 23 tokens

rever

Reverse-engineer web APIs by driving a running Rever Browser instance — connect to its published MCP endpoint and use its browser-automation, network-capture, and JS-bundle-analysis tools. Use when the user types /rever, asks to reverse or analyze a website's API, capture or inspect its network traffic, deobfuscate…

greekr4/rever-browser · 82 tokens

linkedin

LinkedIn automation via the Linked API CLI - fetch profiles, search people and companies, send messages, manage connections, create posts, react, comment, and run Sales Navigator and custom workflows. Use when the user wants to interact with LinkedIn.

bobmatnyc/claude-mpm-skills · 51 tokens