# Browser Testing

> E2E browser testing with Playwright MCP. Visual regression, responsive design, cross-browser testing, codegen sessions. Auto-activates on e2e test, visual regression, screenshot test, browser test, Playwright, responsive test, cross-browser, visual verification.

- **Type:** Skill
- **Install:** `agentstack add skill-pfangueiro-claude-code-agents-browser-testing`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [pfangueiro](https://agentstack.voostack.com/s/pfangueiro)
- **Installs:** 0
- **Category:** [Cloud & Infrastructure](https://agentstack.voostack.com/c/cloud-infrastructure)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [pfangueiro](https://github.com/pfangueiro)
- **Source:** https://github.com/pfangueiro/claude-code-agents/tree/main/.claude/skills/browser-testing

## Install

```sh
agentstack add skill-pfangueiro-claude-code-agents-browser-testing
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Browser Testing with Playwright MCP

Comprehensive patterns for end-to-end browser testing, visual regression, and responsive design verification using the Playwright MCP server.

## Available Playwright MCP Tools

### Navigation & State
- `playwright_navigate` — Open a URL (set `browserType`, `width`, `height`, `headless`)
- `playwright_go_back` / `playwright_go_forward` — History navigation
- `playwright_resize` — Change viewport (manual or 143+ device presets: `iPhone 13`, `iPad Pro`, `Galaxy S24`, etc.)

### Interaction
- `playwright_click` — Click an element (CSS selector)
- `playwright_fill` — Fill an input field
- `playwright_select` — Select dropdown value
- `playwright_hover` — Hover over element
- `playwright_drag` — Drag element to target
- `playwright_press_key` — Press keyboard key
- `playwright_upload_file` — Upload file to input

### Inspection
- `playwright_screenshot` — Capture page or element screenshot (with `fullPage`, `selector`, `savePng`)
- `playwright_get_visible_text` — Get all visible text on page
- `playwright_get_visible_html` — Get HTML (options: `cleanHtml`, `minify`, `removeScripts`, `selector`)
- `playwright_console_logs` — Retrieve browser console logs (filter by type: error, warning, etc.)
- `playwright_evaluate` — Execute arbitrary JavaScript in browser

### HTTP API Testing
- `playwright_get` / `playwright_post` / `playwright_put` / `playwright_patch` / `playwright_delete` — Direct HTTP operations with auth headers

### Code Generation
- `start_codegen_session` — Begin recording interactions as Playwright test code
- `end_codegen_session` — Generate the test file from recorded actions
- `get_codegen_session` — Check session status
- `clear_codegen_session` — Discard without generating

### Response Validation
- `playwright_expect_response` — Start waiting for an HTTP response (by URL pattern)
- `playwright_assert_response` — Validate the response body

## Patterns

### E2E Test: User Journey
```
1. playwright_navigate → target URL
2. playwright_fill → username/password fields
3. playwright_click → submit button
4. playwright_expect_response → /api/auth (start waiting)
5. playwright_assert_response → verify auth succeeded
6. playwright_screenshot → capture authenticated state
7. playwright_get_visible_text → verify welcome message
```

### Visual Regression: Screenshot Comparison
```
1. playwright_navigate → target page
2. playwright_screenshot → name: "baseline-homepage", savePng: true
3. [Make code changes]
4. playwright_navigate → same page (fresh load)
5. playwright_screenshot → name: "current-homepage", savePng: true
6. Compare screenshots visually or via diff tool
```

### Responsive Design Testing
```
1. playwright_navigate → target page
2. playwright_resize → device: "iPhone 13" (375x812)
3. playwright_screenshot → name: "mobile"
4. playwright_resize → device: "iPad Pro 11" (834x1194)
5. playwright_screenshot → name: "tablet"
6. playwright_resize → width: 1920, height: 1080
7. playwright_screenshot → name: "desktop"
```

### Form Validation Testing
```
1. playwright_navigate → form page
2. playwright_fill → invalid email
3. playwright_click → submit
4. playwright_get_visible_text → check for error messages
5. playwright_console_logs → type: "error" (check for JS errors)
6. playwright_fill → valid data
7. playwright_click → submit
8. playwright_assert_response → verify API success
```

### Codegen: Record Test from Manual Actions
```
1. start_codegen_session → outputPath: "/tests/e2e/"
2. playwright_navigate → target URL
3. playwright_click → interact with elements
4. playwright_fill → fill forms
5. end_codegen_session → generates test file at outputPath
```

### Cross-Browser Testing
```
1. playwright_navigate → url, browserType: "chromium"
2. playwright_screenshot → name: "chrome-result"
3. playwright_close
4. playwright_navigate → url, browserType: "firefox"
5. playwright_screenshot → name: "firefox-result"
6. playwright_close
7. playwright_navigate → url, browserType: "webkit"
8. playwright_screenshot → name: "safari-result"
```

## Best Practices

- Always `playwright_close` when done — releases browser resources
- Use `selector` option on screenshots to capture specific components
- Set `headless: true` for CI/automated runs, `false` for debugging
- Use `playwright_console_logs` with `type: "error"` after interactions to catch JS errors
- Use `playwright_expect_response` BEFORE the action that triggers the request
- Use device presets for accurate mobile/tablet testing (includes user-agent + touch emulation)
- For iframes, use `playwright_iframe_click` and `playwright_iframe_fill`

## When to Use

- **After implementing UI changes** — verify visual correctness
- **During investigate** — reproduce UI bugs with exact browser state
- **For accessibility** — check WCAG compliance with visual + text inspection
- **For API testing** — use HTTP tools for direct endpoint verification
- **For regression** — screenshot before/after code changes

## Related

- `test-automation` agent — generates test suites (uses Playwright for E2E)
- `frontend-specialist` agent — implements UI components (uses Playwright for verification)
- `investigate` skill — Phase 2 (REPRODUCE) uses Playwright for UI bug reproduction

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [pfangueiro](https://github.com/pfangueiro)
- **Source:** [pfangueiro/claude-code-agents](https://github.com/pfangueiro/claude-code-agents)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-pfangueiro-claude-code-agents-browser-testing
- Seller: https://agentstack.voostack.com/s/pfangueiro
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.