# Frontend Playwright

> Visual QA gate for frontend code. ALWAYS use before delivering any UI changes - navigate, screenshot, verify console is error-free. Use for: responsive testing across viewports, form/interaction testing, debugging hydration and render issues. Catches visual bugs before users see them.

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

---


# Frontend Playwright

Browser automation for visual verification. **Self-check UI before delivering.**

## When to Use

- After creating/modifying components → verify render
- Before delivering code → **final QA check**
- Debugging UI issues → see actual browser state
- Responsive testing → check mobile/tablet/desktop

## Process

**NAVIGATE → VERIFY → FIX → DELIVER**

```yaml
1. Start dev server: npm run dev
2. browser_navigate → open page
3. browser_take_screenshot → visual check
4. browser_console_messages { onlyErrors: true } → MUST BE EMPTY
5. Fix issues if any → repeat
6. Deliver when clean
```

## Tools Quick Reference

```yaml
Navigation:
  browser_navigate:      { url: "http://localhost:3000" }
  browser_resize:        { width: 375, height: 812 }
  browser_wait_for:      { time: 2 } | { text: "Success" }
  browser_close:         {}

Inspection:
  browser_snapshot:           # Get element refs for interactions
  browser_take_screenshot:    { filename: "check.png", fullPage: true }
  browser_console_messages:   { onlyErrors: true }  # CRITICAL
  browser_network_requests:   {}
  browser_evaluate:           { function: "() => ..." }

Interaction:
  browser_click:   { element: "Submit button", ref: "e5" }
  browser_type:    { element: "Email input", ref: "e3", text: "user@example.com" }
  browser_hover:   { element: "Menu item", ref: "e8" }
```

## Pre-Delivery Checklist

```yaml
MUST PASS before delivery:
  ✓ browser_take_screenshot → looks correct
  ✓ browser_console_messages { onlyErrors: true } → EMPTY
  ✓ browser_network_requests → no 4xx/5xx
  ✓ Mobile viewport (375px) works
```

## Common Workflows

### Quick Verification
```yaml
browser_navigate → browser_take_screenshot → browser_console_messages { onlyErrors: true }
```

### Responsive Test
```yaml
browser_resize { width: 375, height: 812 }  → screenshot
browser_resize { width: 768, height: 1024 } → screenshot
browser_resize { width: 1440, height: 900 } → screenshot
```

### Form Test
```yaml
browser_snapshot              # get refs
browser_type { ref, text }    # fill fields
browser_click { ref }         # submit
browser_wait_for { text }     # wait for result
browser_console_messages      # check errors
```

## Common Console Errors

```yaml
"Hydration mismatch":
  → Server/client render different
  → Fix: 'use client', useEffect for browser-only code

"Cannot read property of undefined":
  → Data not loaded
  → Fix: optional chaining, loading states

"Failed to fetch":
  → API error
  → Check: browser_network_requests for details
```

## Viewport Sizes

```yaml
Mobile:     { width: 375, height: 812 }   # iPhone
Tablet:     { width: 768, height: 1024 }  # iPad
Laptop:     { width: 1366, height: 768 }
Desktop:    { width: 1440, height: 900 }
Full HD:    { width: 1920, height: 1080 }
```

## References

- **[tools.md](references/tools.md)** — Full MCP tools documentation with all parameters
- **[workflows.md](references/workflows.md)** — Ready-to-use verification scenarios