Playwright E2e Builder

This walks you through building Playwright test suites the right way: it interviews you about critical flows, auth strategy, and test data before writing anything. You get Page Object Model setup, authentication state persistence across tests, custom fixtures for data seeding, and CI integration with sharding. The planning phase is smart about existing project structure, checking for your framework, routes, and any legacy Cypress tests. It pushes you toward storageState for auth reuse and API seeding over database scripts. If you're setting up E2E from scratch or migrating from another framework, this handles the architectural decisions so you don't end up with brittle login-on-every-test patterns.

skills.sh installs: 245
GitHub stars: 33.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add davila7/claude-code-templates --skill playwright-e2e-builder --agent claude-code

Installs into .claude/skills of the current project.

Files

Playwright E2E Test Suite Builder

When to use

Use this skill when you need to:

Set up Playwright from scratch in an existing project
Build E2E tests for critical user flows (signup, checkout, dashboards)
Implement Page Object Model for maintainable test architecture
Configure authentication state persistence across tests
Set up visual regression testing with screenshots
Integrate Playwright into CI/CD with sharding and retries

Phase 1: Explore (Plan Mode)

Enter plan mode. Before writing any tests, explore the existing project:

Project structure

Find the tech stack: is this React, Next.js, Vue, SvelteKit, or another framework?
Check if Playwright is already installed (playwright.config.ts, @playwright/test in package.json)
Look for existing test directories (e2e/, tests/, __tests__/)
Check for existing E2E tests in Cypress, Selenium, or other frameworks (migration context)
Find the dev server command and port (npm run dev, next dev, etc.)