playwright-test-helper

by charlie-morrison

Install this Skill

curl -fsSL -o playwright-test-helper.zip https://skill.seembox.com/api/v1/skills/playwright-test-helper/download && unzip playwright-test-helper.zip

Download playwright-test-helper.zip

SKILL.md About

---
name: playwright-test-helper
description: Help write, debug, and optimize Playwright E2E tests — generate page objects, fix flaky selectors, improve test reliability, and speed up test execution.
metadata:
  tags: ["playwright", "testing", "e2e", "automation", "quality"]
---

# Playwright Test Helper

Help write, debug, and optimize Playwright end-to-end tests. Generate page object models, fix flaky selectors, improve test reliability, debug failing tests, and speed up test execution. Use when E2E tests are slow, flaky, or hard to maintain.

## Usage

```
"Help me write Playwright tests for the login flow"
"Fix flaky Playwright tests"
"Generate page objects from my app"
"Speed up my Playwright test suite"
"Debug why this Playwright test fails in CI"
```

## How It Works

### 1. Project Analysis

```bash
cat playwright.config.ts 2>/dev/null || cat playwright.config.js 2>/dev/null
find . -name "*.spec.ts" -o -name "*.test.ts" | grep -i "e2e\|playwright" | head -20
```

### 2. Test Generation

From page analysis, generate:
- Page Object Model classes with typed locators
- Test scenarios covering happy paths
- Error state tests
- Accessibility assertions using `@axe-core/playwright`
- Visual regression snapshots

### 3. Flaky Test Diagnosis

Common flakiness causes and fixes:
- Timing: missing `await`, race conditions → use `waitFor`, `expect().toBeVisible()`
- Selectors: text content changes, dynamic IDs → use data-testid, role selectors
- State: test order dependency → proper setup/teardown, isolated contexts
- Network: slow API responses → use route mocking, `waitForResponse`
- CI-specific: different viewport, fonts, timing → configure CI-specific settings

### 4. Performance Optimization

- Parallel test execution (`fullyParallel: true`)
- Browser reuse across test files
- Storage state for authenticated tests (avoid re-login)
- Route mocking for slow/flaky external APIs
- Selective test running with tags/grep

### 5. Best Practices

- Use web-first assertions (`expect(locator).toBeVisible()`)
- Prefer user-facing selectors (role, text, label)
- Avoid `page.waitForTimeout()` — use proper waits
- Keep tests independent (no shared state between tests)
- Use test fixtures for common setup

## Output

```
## Playwright Test Analysis

**Test files:** 23 | **Total tests:** 89 | **Avg duration:** 4.2s

### 🔴 Flaky Tests (4)
1. checkout.spec.ts:45 — "processes payment"
   Flaky because: `click('Submit')` before button enabled
   Fix: `await expect(submitBtn).toBeEnabled(); await submitBtn.click()`

2. search.spec.ts:12 — "shows results"
   Flaky because: `page.waitForTimeout(2000)` for API
   Fix: `await page.waitForResponse('**/api/search**')`

### ⚡ Speed Improvements
- Enable fullyParallel: ~45% time reduction
- Add storageState for 15 auth-dependent tests: save 30s
- Mock /api/analytics for all tests: remove 800ms/test

### 📊 Projected: 6m 15s → 2m 20s (63% faster)
```

_meta.json Metadata

{
  "ownerId": "kn7d5eszdfwftk153ymhdm4qhs83qsqy",
  "publishedAt": 1777632248127,
  "slug": "playwright-test-helper",
  "version": "1.0.0"
}