e2e-playwright-testing

E2E Playwright Testing

Patterns and conventions for reliable end-to-end browser testing with Playwright.

Comprehensive E2E testing guide for web applications. Contains 8 rules across 6 categories covering locator strategies, authentication reuse, form testing (including React/SPA-specific gotchas), assertions, test organization, reliability, and CI/CD configuration.

Stack Detection

Before writing or reviewing E2E tests, detect the project stack:

Step 1 — Check for Playwright

# Look in package.json devDependencies:
# "@playwright/test" → Playwright is installed
# Check for playwright.config.js or playwright.config.ts

• If @playwright/test is present → use Playwright patterns from this skill
• If cypress is present → this skill does not apply

Step 2 — Detect Frontend Framework

# Check package.json dependencies:
# "react" + "@inertiajs/react" → React + Inertia.js (SPA with server routing)
# "react" + "react-router" → React SPA
# "vue" → Vue.js
# "next" → Next.js

Why this matters:

• React + Inertia.js: Use waitForURL not waitForLoadState('networkidle') — Inertia uses history.pushState
• React controlled inputs: fill() works for text but keyboard.type() needed for date/time
• SPA navigation: Page doesn't do full reload — assertions must wait for content, not network idle

Step 3 — Detect Auth Pattern

# Check for session-based (Laravel Sanctum) or token-based (JWT) auth
# Session: storageState saves cookies
# Token: may need to save tokens to localStorage

Step 4 — Detect Rate Limiting

# Check routes for throttle middleware
# If present in dev, tests will hit 429 after ~5 login attempts
# Solution: production-only throttle or increase limits in test env

---

Metadata

• Version: 1.0.0
• Rule Count: 8 rules across 6 categories
• License: MIT

When to Apply

• Writing or reviewing Playwright E2E tests
• Setting up E2E testing for a new project
• Debugging flaky browser tests
• Testing form submissions, authentication flows, or user interactions
• Choosing locator strategies for elements
• Configuring Playwright for CI/CD