Skip to content
Get packs

Playwright Project Setup

Sets up Playwright end-to-end testing in a web project, including config, example test and CI workflow.

Source Download skill
Repository
alirezarezvani/claude-skills
Stars
29,149
Licence
MIT
Files
1 file

What it does

When you ask your AI agent to set up browser testing, this skill tells it how to inspect your web project (framework, TypeScript or JavaScript, existing test folders and CI setup), install Playwright, and generate a configuration file, a starter folder layout, a sample test, a GitHub Actions or GitLab CI pipeline, and matching npm test scripts. It then runs the sample test and fixes problems it finds. Playwright is a widely used tool that drives real browsers to check that a website works.

Great for

  • Developers adding automated end-to-end tests to a React, Next.js, Vue, Angular or Svelte project
  • Teams that want a consistent starter Playwright configuration and CI pipeline
  • People new to Playwright who want a working baseline quickly

Skip it if

  • Projects that already have a tested Playwright setup, since the skill would overwrite or duplicate existing configuration and CI files
  • Non-developers without a Node.js project, because it expects a package.json and npm
  • Sites where running a dev server or browser downloads is not allowed, since the skill installs browsers and starts a local server

Try asking

  • “Set up Playwright in this React Vite project and add a CI workflow”
  • “Add e2e tests to my Next.js app”
  • “Configure Playwright with TypeScript and an example homepage test”
Step-by-step guide: how to use Playwright Project SetupInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    pw-init.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip pw-init.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip pw-init.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Review the generated playwright.config.ts and CI workflow before committing, especially the baseURL and branch names.
  • Run the skill in a clean branch so existing .gitignore, package.json and CI files can be checked in the diff.
  • Tell the agent your framework and dev server port if detection is unclear.

What's inside

  • SKILL.md

Redistributed unmodified from alirezarezvani/claude-skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.