Cypress Playwright Setup

This sets up proper E2E testing infrastructure with either Cypress or Playwright, including page object models, fixtures for authenticated states, and CI-ready configurations. You get cross-browser testing configs, reusable page objects that abstract selectors, and fixture patterns that let you skip authentication in protected route tests. The Playwright setup includes parallel execution and retry logic, while the Cypress version adds Testing Library commands. Honestly, the page object pattern here is worth adopting even if you already have tests, it makes refactoring way less painful when your UI changes. Good for greenfield projects or teams moving from scattered test files to something maintainable.

skills.sh installs: 309
GitHub stars: 63
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add patricio0312rev/skills --skill cypress-playwright-setup --agent claude-code

Installs into .claude/skills of the current project.

Files

Cypress & Playwright Setup

Configure comprehensive end-to-end testing for web applications.

Core Workflow

Choose tool: Cypress or Playwright
Configure project: Browser and test settings
Create page objects: Reusable selectors
Write tests: User journey coverage
Setup fixtures: Test data
Integrate CI: Automated testing

Playwright Setup

Installation

npm init playwright@latest

Configuration

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [
    ['html'],
    ['json', { outputFile: 'test-results/results.json' }],
    ['junit', { outputFile: 'test-results/junit.xml' }],
  ],

  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },

SKILL.md on GitHub