Playwright E2E Test Generator

The Problem

You asked your AI agent to "add Playwright tests for the login page." It generated 12 tests that all use page.locator('button') to find buttons (there are four on the page), each test is 200 lines of inline selectors, and none handle loading states, error messages, or network failures. The tests pass once and break on the first DOM change. Your QA engineer took one look and said "I'll write them myself."

What You Get

• Page Object Model enforcement — every generated test uses POM with separate page classes containing semantic selectors, never inline selectors in test files
• Semantic selector strategy — enforces priority order: getByRole() → getByLabel() → getByPlaceholder() → getByText() → getByTestId(), with CSS selectors as absolute last resort
• Flakiness prevention patterns — automatic wait-for-selector, network idle handling, loading state detection, and retry logic for async operations
• API mocking integration — generates MSW or Playwright route handlers to mock backend responses, making tests deterministic regardless of server state
• Visual regression support — adds screenshot comparison checkpoints at key UI states with diff tolerance configuration
• CI pipeline templates — produces GitHub Actions, GitLab CI, or CircleCI configs with Playwright HTML reporter, retry-on-failure, and artifact collection

Why This Beats Prompting It Yourself

"Write E2E tests" produces happy-path scripts that nobody maintains. This skill encodes the structural knowledge that separates throwaway test scripts from durable test suites — the selector strategies that survive DOM changes, the POM patterns that centralize maintenance, the mocking patterns that prevent flakiness, and the CI configs that make tests actually run in your pipeline. It generates tests as a test architect would, not as a code generator would.

Example Session

You: "Generate Playwright tests for the checkout flow on my e-commerce app"

Agent: "Generated test suite for checkout flow:

Page Objects Created:

• pages/CartPage.ts — cart items, quantity controls, remove buttons, checkout CTA
• pages/CheckoutPage.ts — shipping form, payment form, order summary, place-order button
• pages/OrderConfirmationPage.ts — order number, confirmation message, continue-shopping link

Test File: tests/checkout.spec.ts

• Test 1: checkout > with valid credit card > shows order confirmation with order number
• Test 2: checkout > with expired card > displays card validation error without page reload
• Test 3: checkout > with empty cart > redirects to shop page with message
• Test 4: checkout > with address change > updates shipping cost in order summary
• Test 5: checkout > during network failure > shows retry button and recovers on retry

Selectors used: getByRole for buttons, getByLabel for form fields, getByTestId for dynamic content. All tests use page fixtures for automatic setup/teardown.

CI Config: .github/workflows/e2e.yml with Playwright runner, Chromium/Firefox/WebKit matrix, retry-on-failure, and HTML report artifacts."

Use Cases

• Converting manual QA test cases into automated Playwright suites
• Setting up E2E testing for a new Playwright project from scratch
• Generating regression test suites after UI overhaul or framework migration
• Adding test coverage for critical user flows (signup, checkout, auth) in existing projects
• Replacing flaky Selenium/Cypress tests with maintainable Playwright equivalents

Known Limitations

Generated tests need review for application-specific business logic assertions — the skill handles structural patterns and selectors well but may not know your exact validation rules. Visual regression tests require baseline screenshots that need initial manual approval. Works best with TypeScript projects; JavaScript support is available but POM patterns are less idiomatic.