home / skills / ehtbanton / claudeskillsrepo / playwright-config-generator

playwright-config-generator skill

safe

This skill generates a complete Playwright configuration file for multi-browser end-to-end testing, including browser projects and test settings.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill playwright-config-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

1.1 KB

---
name: playwright-config-generator
description: Generate Playwright configuration files for cross-browser E2E testing. Triggers on "create playwright config", "generate playwright configuration", "playwright setup", "browser testing config".
---

# Playwright Config Generator

Generate Playwright configuration files for comprehensive cross-browser E2E testing.

## Output Requirements

**File Output:** `playwright.config.ts`
**Format:** Valid Playwright configuration
**Standards:** Playwright 1.40+

## When Invoked

Immediately generate a complete Playwright configuration with browser projects and test settings.

## Configuration Template

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

export default defineConfig({
  testDir: './tests',
  use: {
    baseURL: 'http://localhost:3000',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
});
```

## Example Invocations

**Prompt:** "Create playwright config for multi-browser testing"
**Output:** Complete `playwright.config.ts` with Chrome, Firefox, Safari projects.

Overview

This skill generates a complete TypeScript Playwright configuration file (playwright.config.ts) tailored for cross-browser end-to-end testing. It produces Playwright 1.40+ compatible configs including multiple browser projects, shared test settings, and common CI-friendly options. The output is ready to drop into a repository and run with Playwright test.

How this skill works

When triggered, the skill assembles a valid defineConfig object with sensible defaults: test directory, baseURL, retries, timeouts, reporters, and device presets for Chromium, Firefox, and WebKit. It can include optional sections for webServer startup, screenshots, traces, and video capture. The generated TypeScript uses the official devices import and follows Playwright 1.40+ syntax.

When to use it

Setting up cross-browser E2E tests for a new or existing project
Rapidly creating a CI-friendly Playwright config with sensible defaults
Standardizing test settings across multiple teams or repositories
Preparing configs that include trace, screenshot, and video options for debugging
Generating configs that use device presets for desktop and mobile emulation

Best practices

Set a clear testDir and baseURL so tests run consistently locally and in CI
Enable retries and adjusted timeouts for unstable CI environments
Use trace and video selectively to limit storage; keep them on for CI failures
Define separate projects for desktop and mobile to catch device-specific issues
Include a webServer section when tests require the app to be started before running

Example use cases

Create playwright.config.ts for Chromium, Firefox, and WebKit with Desktop device presets
Generate a CI-focused config with retries, GitHub Actions reporter, and headless mode
Produce a config that starts a local dev server before running tests
Add mobile emulation projects for Desktop Chrome and iPhone using devices presets
Create a debug-friendly config enabling traces and screenshots on test failure

FAQ

Which Playwright version does the generated config target?

The generated config targets Playwright 1.40+ and uses defineConfig and devices imports compatible with that version.

Can the config start a local server before tests run?

Yes. The skill can include a webServer block to run a dev server and wait for a URL before executing tests.