Engineering TestingPlaywrightSetup

Playwright Pro — Init

Initialize Playwright testing setup with best practice configuration.

$skillfish add ~skills/playwright-pro-init

Real Examples Get Started Models & Context

Real Conversations

See how the Playwright Pro — Init skill responds to actual requests. These are representative examples of what your AI agent will produce.

You

Fresh Next.js 14 app, no tests at all. I want Playwright with TypeScript, GitHub Actions CI, and the right folder structure from day one. We use pnpm.

Agent

Detecting your setup and scaffolding everything. This skill includes executable scripts — I'll need your permission before running them.

Detected: Next.js 14, TypeScript, pnpm, .github/workflows/ exists.

Step 1 — Install:

pnpm add -D @playwright/test
npx playwright install --with-deps chromium firefox webkit

Step 2 — Generated playwright.config.ts (Next.js profile):

baseURL: http://localhost:3000
retries: process.env.CI ? 2 : 0
trace: 'on-first-retry'
webServer: { command: 'pnpm dev', reuseExistingServer: !process.env.CI }

Step 3 — Folder structure:

e2e/
├── fixtures/index.ts      # test.extend() entry point
├── pages/.gitkeep         # page objects go here
├── test-data/.gitkeep     # JSON test data
└── example.spec.ts        # sanity test

Step 4 — .github/workflows/playwright.yml — runs on push/PR to main, uploads HTML report artifact for 30 days.

Step 5 — package.json scripts:

"test:e2e": "playwright test",
"test:e2e:ui": "playwright test --ui",
"test:e2e:debug": "playwright test --debug"

Verified:

✓ example.spec.ts (2 tests) — Homepage loads, navigation visible

Run pnpm test:e2e to start. Use /pw:generate to create your first real tests.

You

We have a Vue 3 app (Vite) with an existing Jest unit test suite. I want to add Playwright alongside it without breaking anything. Dev server runs on port 5173.

Agent

Setting up Playwright alongside Jest — they coexist cleanly with separate configs and test directories.

Detected: Vue 3 + Vite, Jest in src/__tests__/, port 5173, no existing E2E setup.

Generated playwright.config.ts (Vite profile, separate from Jest):

export default defineConfig({
  testDir: './e2e',         // entirely separate from src/__tests__
  use: {
    baseURL: 'http://localhost:5173',
    trace: 'on-first-retry',
  },
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
  ],
});

No Jest conflicts — Playwright uses e2e/ exclusively. Your existing test script still runs Jest.

Scripts updated:

"test:unit": "jest",
"test:e2e": "playwright test"

.gitignore updated — added test-results/, playwright-report/, blob-report/.

Verified:

Jest:       47 passed (existing suite intact)
Playwright:  1 passed (example.spec.ts)

Both suites independent. Use /pw:generate for your first E2E test.

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase. Web-based AI can use the knowledge and frameworks, but won't have tool access.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Best

Claude Opus 4 Claude Sonnet 4 GPT-4.1 Gemini 2.5 Pro Grok 3 Kimi K2

Good

Claude Haiku 4.5 GPT-4.1 mini Gemini 2.5 Flash Grok 3 mini

Larger models produce more detailed, production-ready outputs.

Context Window

This skill's SKILL.md is typically 3–10 KB — fits in any modern context window.

8K Skill only

32K+ Skill + conversation

100K+ Skill + references + codebase

All current frontier models (Claude, GPT, Gemini) support 100K+ context. Use the full window for complex multi-service work.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Ready to try Playwright Pro — Init?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.

$skillfish add ~skills/playwright-pro-init

← Browse all 169 skills