webapp-testing

webapp-testing is a skill for Claude Code, Codex from WellApp-ai/Well. It costs 14 tokens per session (490 once invoked), scanned A, original, MIT.

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

Written for no agent in particular: nothing here depends on one.

Good fit It is for starting local Storybook or development servers, navigating pages, clicking and typing, taking screenshots, and checking the resulting page state.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/wellapp-ai/well/webapp-testing
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.

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.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for webapp-testing

README.md
[![agentmods](https://agentmods.dev/badge/skills/wellapp-ai/well/webapp-testing/github.svg)](https://agentmods.dev/skills/wellapp-ai/well/webapp-testing)
Your own site
<a href="https://agentmods.dev/skills/wellapp-ai/well/webapp-testing"><img src="https://agentmods.dev/badge/skills/wellapp-ai/well/webapp-testing/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for webapp-testing

Your own site · 80×15
<a href="https://agentmods.dev/skills/wellapp-ai/well/webapp-testing"><img src="https://agentmods.dev/badge/skills/wellapp-ai/well/webapp-testing.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
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. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
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.1 $0.00014 $0.00490
Opus 5.5 $0.00006 $0.00196
Sonnet 5.5 $0.00003 $0.00098
Haiku 4.5 $0.00001 $0.00049

Measured 1mo ago against content hash 80b2f1a73bb5, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, 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 1mo 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. 1mo 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 (346 stars, last pushed 4d ago), licensed MIT. It adds 14 tokens to every session and 490 once invoked, about $0.0001 per session on Opus 5.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

qa

QA test your code changes by reading your git diff, choosing the right validation path for frontend/browser and backend changes, and reporting pass/fail with evidence.

Skyvern-AI/skyvern · 33 tokens

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

testing

Verify a Skyvern deployment is working correctly by smoke-testing the backend API, frontend rendering, browser session provisioning, and workflow execution. Use when the user says 'is Skyvern working', 'test my deployment', 'verify the installation', 'smoke test', or needs to check that a self-hosted or local Skyvern…

Skyvern-AI/skyvern · 71 tokens

playwright

Skill "playwright" from ashish7802/awesome-api-skills, covering playwright skill, ecosystem graph, quick start, production patterns and auto-waiting and locators.

ashish7802/awesome-api-skills · 0 tokens

experimental-read-code-coverage-metrics

Retrieves and analyzes Chromium per-CL code coverage data from the Findit API. Records per-CL coverage metrics for all modified source files and extracts unexecuted code lines.

chromium/chromium · 44 tokens

mirrord-prev-env

Help users create and manage mirrord preview environments — running a modified service as an isolated pod in a shared Kubernetes cluster, scoped by an environment key and HTTP/queue traffic filtering, so teams can validate and review changes against real traffic without affecting live services. Use when a developer…

metalbear-co/mirrord · 122 tokens