# Webapp Testing

> Test local web applications using browser automation - verify frontend functionality, debug UI behavior, capture screenshots, view console logs, run E2E scenarios, and check accessibility

- Skill: `chainlesschain/webapp-testing` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add chainlesschain/webapp-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chainlesschain/webapp-testing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: chainlesschain (https://skillmd.com/u/chainlesschain)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chainlesschain/webapp-testing

---


# WebApp Testing Skill

Test web applications with browser automation.

## Usage

```
/webapp-testing test <url> [--check selectors|forms|links]
/webapp-testing screenshot <url> [--full]
/webapp-testing console <url>
/webapp-testing accessibility <url>
/webapp-testing scenario <url> --steps "click .btn, fill #email test@example.com, click #submit"
/webapp-testing inspect <url>
```

## Decision Tree

```
Task → Is it static HTML?
  ├─ Yes → Read HTML directly, identify selectors, write tests
  └─ No (dynamic webapp) → Is server running?
    ├─ No → Start server first, then test
    └─ Yes → Reconnaissance-then-action:
        1. Navigate and wait for networkidle
        2. Take screenshot or inspect DOM
        3. Identify selectors from rendered state
        4. Execute actions with discovered selectors
```

## Actions

| Action | Description |
| --- | --- |
| `test` | Navigate to URL, wait for load, check for errors |
| `screenshot` | Capture full page or element screenshot |
| `console` | Monitor and report console logs/errors |
| `accessibility` | Run basic accessibility checks |
| `scenario` | Execute multi-step test scenario |
| `inspect` | Get DOM structure and interactive elements |

## Reconnaissance-Then-Action Pattern

1. **Navigate**: Go to URL and wait for `networkidle`
2. **Inspect**: Take screenshot or read DOM
3. **Identify**: Find selectors from rendered state
4. **Execute**: Run actions with discovered selectors

## Accessibility Checks

- Alt text on images
- Form labels on inputs
- Heading hierarchy (h1 → h2 → h3)
- Color contrast indicators
- ARIA roles on interactive elements
- Keyboard navigation support

## Common Pitfall

- **Don't** inspect DOM before waiting for `networkidle` on dynamic apps
- **Do** wait for `page.wait_for_load_state('networkidle')` before inspection