# playwright-tester

> Automate browser testing using Playwright MCP tools. Use this skill when:
(1) Testing web application flows interactively via browser automation
(2) Exploratory testing of UI features with live browser interaction
(3) Verifying tournament management flows (create tournament, add players, manage competitions, queue matches, score matches)
(4) Testing authentication flows with magic links
(5) Debugging UI issues by navigating and inspecting the live application
(6) Testing external scoring interfaces with PIN-based access

- Author: Wudong Liu
- Repository: wudong/configs
- Version: 20260204155916
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/wudong/configs
- Web: https://mule.run/skillshub/@@wudong/configs~playwright-tester:20260204155916

---

---
name: playwright-tester
description: |
  Automate browser testing using Playwright MCP tools. Use this skill when:
  (1) Testing web application flows interactively via browser automation
  (2) Exploratory testing of UI features with live browser interaction
  (3) Verifying tournament management flows (create tournament, add players, manage competitions, queue matches, score matches)
  (4) Testing authentication flows with magic links
  (5) Debugging UI issues by navigating and inspecting the live application
  (6) Testing external scoring interfaces with PIN-based access
---

# Playwright Tester

Automate browser testing using Playwright MCP tools for interactive testing of web applications.

## Quick Start

1. Navigate to the app:
   ```
   browser_navigate → url: "http://localhost:5173/app"
   ```

2. Take a snapshot to see available elements:
   ```
   browser_snapshot
   ```

3. Interact with elements using refs from snapshot:
   ```
   browser_click → ref: "E123", element: "Sign In button"
   ```

## Core Workflow

### 1. Always Start with Snapshot
Before any interaction, take a snapshot to get element references:
```
browser_snapshot
```

The snapshot returns accessibility tree with `ref` values (e.g., `E123`) for each interactive element.

### 2. Use Refs for Interactions
All interaction tools require the exact `ref` from the snapshot:
- `browser_click` - Click buttons, links, checkboxes
- `browser_type` - Enter text in inputs
- `browser_fill_form` - Fill multiple fields at once
- `browser_select_option` - Select from dropdowns

### 3. Verify Actions
After each action, take another snapshot or wait for expected changes:
```
browser_wait_for → text: "Success"
browser_snapshot
```

## Testing Patterns

### Form Filling
```
browser_fill_form → fields: [
  { name: "Email", ref: "E10", type: "textbox", value: "test@example.com" },
  { name: "Password", ref: "E11", type: "textbox", value: "password123" }
]
```

### Navigation Flow
```
browser_navigate → url: "http://localhost:5173/app"
browser_snapshot
browser_click → ref: "E5", element: "Menu item"
browser_wait_for → text: "Expected content"
browser_snapshot
```

### Debugging
Check console errors:
```
browser_console_messages → level: "error"
```

Check network requests:
```
browser_network_requests → includeStatic: false
```

Take screenshot for visual verification:
```
browser_take_screenshot → type: "png", filename: "debug.png"
```

### Testing Best Practices

**⚠️ IMPORTANT: Test the UI, not the store**

- **NEVER** manipulate the store directly via `browser_evaluate` for UI testing
- **ALWAYS** use browser automation tools (click, type, fill_form) to interact with UI elements
- Direct store manipulation bypasses UI validation and doesn't test the actual user flow
- Store state should only be read for verification/debugging, never written

**Correct approach** - Add players through UI:
```
browser_click → ref: "E430", element: "New Player button"
browser_fill_form → fields: [...]
browser_click → ref: "E437", element: "Add Player"
```

**Incorrect approach** - Direct store manipulation:
```
❌ browser_evaluate → function: "() => { store.addPlayer({...}) }"
```

Reading store state for verification is acceptable:
```
browser_evaluate → function: "() => window.useTournamentStore.getState().tournament.players.length"
```

## Application-Specific Testing

### Authentication Flow (Local Development)
See [tournament-flow.md](references/tournament-flow.md) Section 0.

1. Navigate to `http://localhost:5173/app`
2. Click "Sign In" button
3. Enter test email and submit
4. Open new tab to Mailpit at `http://localhost:54324`
5. Find and click the magic link in the email
6. Verify redirect back to app with logged-in state

### Tournament Management
See [tournament-flow.md](references/tournament-flow.md) for complete flow.

**Create Tournament:**
1. Navigate to tournament creation
2. Fill General Info (name)
3. Add Competitions (event names)
4. Set Resources (table count)
5. Mark as online tournament

**Add Players:**
1. Go to Players section
2. Click "Add Player"
3. Fill player details (Name, Club, Rank)

**Configure Competition:**
1. Select competition
2. Add entries from roster
3. Set seeding (optional)
4. Navigate to Schedule tab
5. Select bracket type (e.g., Knockout)
6. Generate bracket

**Run Competition:**
1. Click "Start Competition"
2. Go to Queue page
3. Assign matches to tables (drag-drop or Auto toggle)
4. Monitor table status

**External Scoring:**
1. Note table PIN from Tables section
2. Navigate to `http://localhost:4321/score` in new tab
3. Enter PIN to access scoring interface
4. Submit scores

## Reference Files

- **[playwright-mcp-tools.md](references/playwright-mcp-tools.md)**: Complete reference for all Playwright MCP tools
- **[tournament-flow.md](references/tournament-flow.md)**: Tournament management workflow guide

## Tips

- **Snapshot before action**: Always get a fresh snapshot before interacting
- **Use element descriptions**: Include `element` parameter for clearer logs
- **Wait for state changes**: Use `browser_wait_for` after actions that cause page updates
- **Check console on errors**: Use `browser_console_messages` when things fail
- **Screenshot for reports**: Capture screenshots at key verification points