init
Set up Playwright in a project. Use when user says "set up playwright", "add e2e tests", "configure playwright", "testing setup", "init playwright", or "add test infrastructure".
Security Assessment
About init
This skill sets up a production-ready Playwright end-to-end testing environment inside an existing JavaScript or TypeScript project. It solves the common friction of standing up e2e infrastructure from scratch: instead of manually copying config, wiring a CI job, and guessing framework-specific settings, the skill detects the project's stack and generates everything needed to start writing browser tests. It triggers on requests like 'set up playwright', 'add e2e tests', or 'configure playwright'.
The workflow begins by scanning package.json to detect the framework (React/Vite, Next.js, Vue/Nuxt, Angular, or none) and whether TypeScript and Playwright are already present. It then installs Playwright, generates a framework-adapted playwright.config.ts (correct baseURL, webServer command, and browser projects for Chromium, Firefox, and WebKit), scaffolds an e2e folder structure with fixtures, page-object and test-data directories, and writes an example homepage spec. It also produces a GitHub Actions (or GitLab) CI workflow, updates .gitignore for test artifacts, adds npm scripts (test:e2e, test:e2e:ui, test:e2e:debug), and finally runs the example test to verify the setup works.
It is aimed at frontend and full-stack developers, QA engineers, and teams adopting Playwright who want a correct baseline quickly rather than assembling it by hand. Typical use cases include bootstrapping e2e tests on a greenfield app, adding CI-integrated browser testing to an existing repo, or standardizing test scaffolding across multiple projects.
FAQ
Which frameworks does it support?
It detects and adapts configuration for Next.js, React (Vite), Vue/Nuxt, and Angular by adjusting baseURL and the webServer command. If no framework is detected, it omits the webServer block and uses a placeholder or user-supplied baseURL.
Do I need Playwright installed first?
No. The skill checks whether @playwright/test is already a dependency and installs it if missing, using either 'npm init playwright@latest' or a manual install plus 'npx playwright install --with-deps chromium'.
Does it set up continuous integration?
Yes, if a CI directory exists. It creates a playwright.yml GitHub Actions workflow (running on push and pull_request to main/dev) or adds a Playwright stage to an existing .gitlab-ci.yml.
How do I run the tests after setup?
The skill adds npm scripts and verifies the example test by running 'npx playwright test'. You can then use 'npm run test:e2e', plus ':ui' and ':debug' variants for interactive and debug modes.
Is this limited to Node/JavaScript projects?
Yes. It works with JavaScript or TypeScript projects that use npm and package.json; it uses TypeScript config when tsconfig.json is present, otherwise JavaScript.
Install init
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
alirezarezvani/claude-skills