Back to Skills

Web App Testing

End-to-end testing of web applications in a real browser — click, fill, assert, take screenshots, and verify flows before declaring a feature done

testinge2ebrowserqafrontend
By Claude Code Community

Skill Content

# Web App Testing Skill

Drive a real browser to exercise your web app end-to-end. Claude opens the page, clicks through the flow, fills forms, and reports what it sees.

## When to Use

- You just finished a frontend change and need to verify it actually works in the browser
- You want to reproduce a UI bug before fixing it
- You're reviewing a PR and want to see the change live, not just in the diff

## What It Does

1. **Starts** a local dev server if one isn't running
2. **Opens** the target page in a headless browser
3. **Exercises** the golden path and likely edge cases
4. **Asserts** visible state (text, DOM structure, network calls)
5. **Captures** screenshots and console logs
6. **Reports** regressions or unexpected behavior

## Usage

```
/webapp-testing
```

## Example Prompts

- "Test the checkout flow end-to-end"
- "Verify the login form rejects empty emails"
- "Reproduce the bug where the sidebar collapses on mobile"

## Integration

Works with Playwright and the Chrome DevTools MCP. If neither is installed, the skill prompts you to add one.

## Complementary Skills

- `playwright-skill` — for authoring Playwright test files
- `review` — to tie test results back to PR review

How to use

  1. Copy the skill content above
  2. Create a .claude/skills directory in your project
  3. Save as .claude/skills/webapp-testing.md
  4. Use /webapp-testing in Claude Code to invoke this skill