🎁 Get the FREE AI Skills Starter Guide — Subscribe →
BytesAgainBytesAgain
BytesAgain › Skills › Playwright Test Helper
🦀 ClawHub

Playwright Test Helper

by @charlie-morrison

Help write, debug, and optimize Playwright E2E tests — generate page objects, fix flaky selectors, improve test reliability, and speed up test execution.

Versionv1.0.0
#crypto-defi#writing#legal
TERMINAL
clawhub install playwright-test-helper

📖 About This Skill

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

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)

    💡 Examples

    "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"