playwright-testing

---
name: playwright-testing
description: UI/E2E test automation with Playwright MCP. Use when the user asks to "test the UI", "automate browser tests", "check the page", "take a screenshot", "run Playwright", "write E2E tests", or anything about browser-based testing.
license: Apache-2.0
compatibility: Requires Node.js 18+. MCP server installed via setup.yaml.
metadata:
  author: octobots
  version: "0.1.0"
---

# Playwright Testing

Browser-based UI and E2E testing using Playwright MCP tools.

## Core Workflow

```
browser_navigate → browser_snapshot → interact → browser_wait_for →
browser_snapshot → evidence collection
```

**Always snapshot before interacting** — you need element refs to click/type.

## Quick Reference

### Navigate & Inspect
```
browser_navigate(url)               → load page
browser_snapshot()                   → get DOM tree + element refs
browser_take_screenshot()            → visual evidence
browser_console_messages()           → JS errors, warnings
browser_network_requests()           → API calls, status codes
```

### Interact
```
browser_click(element="ref")         → click element
browser_type(element="ref", text)    → type into input
browser_fill_form(values)            → fill multiple fields
browser_select_option(element, value)→ select dropdown option
browser_press_key(key)               → keyboard action
browser_hover(element="ref")         → hover for tooltips
```

### Wait & Verify
```
browser_wait_for(selector, timeout)  → wait for element
browser_wait_for(url_pattern)        → wait for navigation
```

## Testing Patterns

### 1. Verify Page Loads
```
navigate → snapshot → verify key elements exist → screenshot
```

### 2. Form Submission
```
navigate → snapshot → fill_form → click submit →
wait_for(networkidle) → snapshot → verify success state → screenshot
```

### 3. Interactive Feature
```
navigate → snapshot → click element → wait_for change →
snapshot → verify new state → console_messages → screenshot
```

### 4. API + UI Verification
```
curl API to create data → navigate to page → snapshot →
verify data appears in UI → screenshot
```

## Evidence Collection

After every significant interaction, collect:
1. **Screenshot** — visual proof
2. **Console messages** — catch JS errors the UI hides
3. **Network requests** — verify API calls succeeded

**Check console even when the UI looks fine.** Silent errors are the worst bugs.

## Wait Strategies

| Situation | Strategy |
|-----------|----------|
| Page load | `wait_for(networkidle)` |
| Dynamic content | `wait_for(selector)` |
| Navigation | `wait_for(url_pattern)` |
| Animation | `wait_for(timeout: 1000)` — last resort |

**Never use fixed waits when a condition-based wait works.**

## Bug Report Format

When you find an issue:

```
## [SEVERITY] Title

Steps: 1. Navigate to... 2. Click... 3. Observe...
Expected: What should happen
Actual: What happens
Evidence: screenshot, console error, network response
Frequency: Always / Intermittent / Once
```

## Details

See `references/patterns.md` for Page Object Model, fixture strategies, and framework-specific selectors.

• SKILL.md 3 KB
• setup.yaml 1 KB
• references/patterns.md 4 KB