Initialize Playwright Project — Browser & Desktop

This skill sets up a production-ready Playwright testing environment in a project. It detects the framework, installs Playwright, generates a config file, folder structure, example test, CI workflow, and npm scripts, then verifies the setup by running the example test.

engineering claude-code

📂 View skill on GitHub ↗ 🚀 How to use

✨ What it does

Detects the project framework (React, Next.js, Vue, Angular, Svelte) and TypeScript/JavaScript.
Installs Playwright if not already present.
Generates a framework-adapted playwright.config.ts with browser projects and webServer settings.
Creates an e2e folder structure with fixtures, pages, test-data, and an example spec.
Generates a CI workflow (GitHub Actions or GitLab CI) if a CI config exists.
Adds npm scripts and updates .gitignore, then runs the example test to verify.

🎯 When to use it

When the user asks to set up Playwright or add end-to-end testing.
When the user wants to configure Playwright for an existing project.
When the user requests adding test infrastructure or initializing Playwright.
When the user says add e2e tests or 'testing setup'.

🚀 How to use

Trigger the skill by saying 'set up playwright', 'add e2e tests', 'configure playwright', 'testing setup', 'init playwright', or 'add test infrastructure'. The skill will analyze the project, install Playwright, and generate all necessary files. Example prompts:

Set up Playwright in this project.
Add end-to-end testing with Playwright.

📄 Output: A configured Playwright environment with config file, e2e folder, example test, CI workflow (if applicable), and npm scripts.

📦 Add this skill to Claude Code

# 1. Get the skills repo
git clone --depth 1 https://github.com/alirezarezvani/claude-skills /tmp/claude-skills

# 2. Copy this skill into your project (or ~/.claude/skills for all projects)
mkdir -p .claude/skills
cp -r /tmp/claude-skills/engineering-team/playwright-pro/skills/pw-init .claude/skills/pw-init

Skill source: engineering-team/playwright-pro/skills/pw-init/SKILL.md

⚠️ Good to know

Requires a Node.js project with a package.json; if no framework is detected, the webServer block is omitted and baseURL may need manual input.

❓ FAQ

What frameworks are supported?

The skill detects React, Next.js, Vue, Angular, Svelte, and others; it adapts the config accordingly.

Does it create a CI workflow?

Yes, it creates a GitHub Actions workflow if .github/workflows exists, or adds a GitLab CI stage if .gitlab-ci.yml exists.

What if Playwright is already installed?

It skips the installation step and proceeds with generating config and other files.

🤖 Overview, features, install steps and FAQ were generated from the project's SKILL.md on Sep 4, 2026. Always check the original source before running commands.