playwright-config-generator

playwright-config-generator

Generates or updates playwright.config.ts in the workspace root with a production-ready multi-project configuration tailored to the detected framework and enabled test types.

When to Run

This skill runs when:

1. /playwright-init command — user initializes Playwright agent for the first time
2. playwright.config.ts does not exist — scaffolding a new project
3. playwright.config.ts exists but is incomplete — user explicitly requests regeneration with --update-config

Do not overwrite an existing, complete configuration unless explicitly requested. If the file exists and appears intentional, warn the user before modifying.

Config Template

Generate playwright.config.ts with the following structure. Adapt each section based on resolved config:

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 1,
  workers: process.env.CI ? 1 : undefined,
  reporter: [
    ['html', { outputFolder: 'playwright-report' }],
    ['junit', { outputFile: 'test-results/junit.xml' }],
    ['list']
  ],
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  webServer: {
    command: 'next dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
  projects: [
    {
      name: 'setup',
      testMatch: '**/*(@|.)setup.ts',
    },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
      testIgnore: '**/*.api.ts',
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
      dependencies: ['setup'],
      testIgnore: '**/*.api.ts',
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
      dependencies: ['setup'],
      testIgnore: '**/*.api.ts',
    },
    {
      name: 'api',
      use: {},
      testMatch: '**/*.api.ts',
    },
    {
      name: 'visual',
      use: { ...devices['Desktop Chrome'] },
      testMatch: '**/*.visual.ts',
    },
  ],
});

Core Sections

testDir: Always './tests' (or per config override).

fullyParallel: true by default (run all tests in parallel within a project).

forbidOnly: !!process.env.CI — prevent committed .only tests in CI.

retries:

• Local: 1 (quick feedback)
• CI: 2 (tolerate flakes)

workers:

• Local: undefined (auto-detect CPU cores)
• CI: 1 (sequential for deterministic results)

reporter: Always include:

1. html — interactive report at playwright-report/
2. junit — CI integration at test-results/junit.xml
3. list — console output

use.baseURL: Default http://localhost:3000. Override per env var BASE_URL.

use.trace: 'on-first-retry' — capture traces on first test retry for debugging.

webServer: Auto-configured based on detected framework (see framework-detection skill). Omit if test type is api only.

Multi-Project Setup

Configure projects for each enabled test type:

Project	Test Match	Browsers	Dependencies	Skip Pattern
setup	**/*(@|.)setup.ts	N/A	None	N/A
chromium	**/*.ts (default)	Chrome	setup	**/*.api.ts, **/*.visual.ts
firefox	**/*.ts (default)	Firefox	setup	**/*.api.ts, **/*.visual.ts
webkit	**/*.ts (default)	Safari	setup	**/*.api.ts, **/*.visual.ts
api	**/*.api.ts	None	None	e2e patterns
visual	**/*.visual.ts	Chrome (single)	setup	api patterns

Setup project: Runs authentication or data setup once per session. All browser projects depend on it (dependencies: ['setup']).

Browser projects: Chromium, Firefox, WebKit for e2e tests. Depend on setup. Ignore API and visual tests.

API project: No browser required; uses request fixture. Ignore e2e patterns.

Visual project: Single browser (Chromium) for deterministic snapshots. Depends on setup.

Adaptation Rules

Adapt the template based on detected context:

Language: JavaScript vs TypeScript

• Detected TypeScript (.ts files, tsconfig.json present):

  • Output: playwright.config.ts
  • Use: TypeScript syntax, no JSDoc comments

• Detected JavaScript (.js files only, no TypeScript):

  • Output: playwright.config.js
  • Use: CommonJS module.exports = defineConfig({ ... })
  • Omit TypeScript-specific imports

Test Type Filtering

• E2E enabled (default) — include chromium, firefox, webkit projects
• API enabled — include api project
• Visual enabled — include visual project
• Disabled type — omit corresponding project entries

Example: If only e2e is enabled, omit the api and visual projects entirely.

Framework-Specific WebServer

• Next.js: { command: 'next dev', url: 'http://localhost:3000', ... }
• Angular: { command: 'ng serve', url: 'http://localhost:4200', ... }
• Vue/Nuxt: { command: 'nuxt dev', url: 'http://localhost:3000', ... }
• Plain: Omit webServer block entirely (user starts server manually)

Framework-Specific Base URL

• Infer from webServer.url or detected framework defaults
• Override with baseURL in resolved config

Output

Write the generated config file to workspace root as playwright.config.ts or playwright.config.js (based on detected language).

Report completion:

playwright.config.ts generated successfully.
- Projects: chromium, firefox, webkit (e2e), api, visual
- WebServer: next dev on http://localhost:3000
- Reporters: html, junit, list
- Retries: 2 in CI, 1 locally

If overwriting an existing file, report:

playwright.config.ts updated. Backup saved to playwright.config.ts.bak.

Emit structured metadata:

{
  "filePath": "./playwright.config.ts",
  "language": "typescript",
  "projects": ["setup", "chromium", "firefox", "webkit", "api", "visual"],
  "webServer": {
    "command": "next dev",
    "url": "http://localhost:3000"
  },
  "baseURL": "http://localhost:3000",
  "reporters": ["html", "junit", "list"],
  "retries": {
    "local": 1,
    "ci": 2
  }
}