playwright-e2e-builder

# 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.) ### Application structure - Identify the main routes/pages (look at router config, pages directory, or route files) - Find authentication flow (login page URL, auth API endpoints, token storage) - Check for test IDs in components (`data-testid`, `data-test`, `data-cy` attributes) - Look for API routes that tests might need to seed data through - Check `.env` files for test-specific environment variables ### CI/CD - Check for existing CI config (`.github/workflows/`, `.gitlab-ci.yml`, `Je...