playwright-e2e-testing

What this skill does

# Playwright E2E Testing Skill

Use this skill to perform automated end-to-end testing of React microfrontends using Playwright MCP tools.

## When to Use
- After implementing UI features
- After fixing frontend bugs
- Before deploying frontend changes
- During QA validation
- For regression testing

## What This Skill Does

### 1. Automated UI Testing
Executes comprehensive tests using Playwright MCP:
- Navigate to pages
- Interact with components
- Verify data displays correctly
- Test form submissions
- Validate navigation flows

### 2. Responsive Testing
Tests multiple viewport sizes:
- Mobile (375px × 667px)
- Tablet (768px × 1024px)
- Desktop (1200px × 800px)

### 3. Error Detection
Identifies issues:
- Console errors
- Network failures
- JavaScript exceptions
- Module Federation loading errors

## Available Playwright MCP Tools

- `mcp__playwright__browser_navigate` - Navigate to URL
- `mcp__playwright__browser_snapshot` - Get page accessibility tree
- `mcp__playwright__browser_click` - Click elements
- `mcp__playwright__browser_type` - Type into inputs
- `mcp__playwright__browser_fill_form` - Fill multiple form fields
- `mcp__playwright__browser_resize` - Change viewport size
- `mcp__playwright__browser_take_screenshot` - Capture visual state
- `mcp__playwright__browser_console_messages` - Get console logs
- `mcp__playwright__browser_evaluate` - Run JavaScript
- `mcp__playwright__browser_wait_for` - Wait for conditions
- `mcp__playwright__browser_close` - Close browser

## Expected Inputs
- URL to test (e.g., http://localhost:3003)
- Features to validate
- User workflows to test
- Breakpoints to test

## Testing Workflow

### 1. Start Browser
```
mcp__playwright__browser_navigate("http://localhost:3003")
```

### 2. Capture Page State
```
mcp__playwright__browser_snapshot()
```

### 3. Test Functionality
```
Click buttons, fill forms, navigate pages
```

### 4. Verify Results
```
Check data appears, no errors in console
```

### 5. Test Responsive
```
mcp__playwright__browser_resize(375, 667)  # Mobile
mcp__playwright__browser_resize(1200, 800) # Desktop
```

### 6. Check Console
```
mcp__playwright__browser_console_messages()
```

### 7. Close Browser
```
mcp__playwright__browser_close()
```

## Example Test: CRUD Operations
```
# Navigate
browser_navigate("http://localhost:3003/schedules")

# Create
browser_click("Create Schedule button")
browser_fill_form({
  "employee": "John Doe",
  "date": "2025-01-20",
  "startTime": "09:00",
  "endTime": "17:00"
})
browser_click("Save button")

# Verify Created
browser_wait_for("Schedule created successfully")
browser_snapshot() # Check schedule appears in list

# Update
browser_click("Edit button for first schedule")
browser_type("endTime input", "18:00")
browser_click("Save button")
browser_wait_for("Schedule updated")

# Delete
browser_click("Delete button")
browser_click("Confirm button")
browser_wait_for("Schedule deleted")

# Verify Deleted
browser_snapshot() # Check schedule removed

# Check Console
browser_console_messages() # Should have no errors

# Close
browser_close()
```

## Validation Checklist
- [ ] Page loads without errors
- [ ] All interactive elements work
- [ ] CRUD operations successful
- [ ] Data displays correctly
- [ ] Validation errors show properly
- [ ] Mobile responsive
- [ ] Desktop layout correct
- [ ] No console errors
- [ ] Navigation works
- [ ] Module Federation loads

## Deliverables
- Test execution results
- Screenshots at different breakpoints
- Console error log (if any)
- List of passed/failed tests
- Recommendations for fixes