Setup Playwright

Implementation Defaults

• Ask for confirmation before running install commands.
• If multiple lockfiles exist and packageManager is missing, stop and ask the user to choose.
• In monorepos, target the package path explicitly (--repo) instead of the workspace root.

Run Script

• Use the bundled script for reproducible setup:
  • setup-playwright.sh
• Example usage:
  • bash ./.github/skills/setup-playwright/scripts/setup-playwright.sh --repo ./first --mode full --smoke
  • bash ./.github/skills/setup-playwright/scripts/setup-playwright.sh --repo ./playwright-course/Starter --mode package-only

Procedure

1. Validate the target repository.

• Confirm the path exists.
• Confirm there is a package.json in that path.
• If package.json is missing, stop and ask for the correct repo path.

2. Detect package manager (in priority order).

• First check package.json field packageManager.
• Then check lockfiles:
  • pnpm-lock.yaml => pnpm
  • yarn.lock => yarn
  • bun.lock or bun.lockb => bun
  • package-lock.json or npm-shrinkwrap.json => npm
• If none found, default to npm and explicitly state this assumption.

3. Look up current Playwright installation guidance.

• Use official Playwright docs as source of truth.
• Confirm the command pattern for the detected package manager before execution.
• Prefer commands equivalent to:
  • npm init playwright@latest
  • pnpm create playwright
  • yarn create playwright
  • bun create playwright
• If initializing in an already-configured repo, prefer adding package directly instead of scaffolding.

4. Install Playwright with package-manager-specific commands.

• npm:
  • Package: npm install -D @playwright/test
  • Browsers: npx playwright install
• pnpm:
  • Package: pnpm add -D @playwright/test
  • Browsers: pnpm exec playwright install
• yarn:
  • Package: yarn add -D @playwright/test
  • Browsers: yarn playwright install
• bun:
  • Package: bun add -d @playwright/test
  • Browsers: bunx playwright install
• For package-only mode, skip browser installation.

5. Initialize config/files only if missing.

• If playwright.config.* does not exist, run:
  • npx playwright test --init (or package-manager equivalent via exec)
• If config already exists, do not overwrite.

6. Verify installation.

• Confirm @playwright/test exists in devDependencies.
• Run playwright --version with the detected package manager.
• Optional smoke check:
  • Run a targeted test file if one exists.
  • Otherwise run a lightweight playwright test --list.

Decision Points

• Existing Playwright config found:
  • Do not reinitialize; only install missing dependencies/browsers.
• Monorepo detected:
  • Install in the specified package directory, not repo root, unless requested.
• Multiple lockfiles found:
  • Prefer packageManager from package.json.
  • If still ambiguous, ask user to choose before installing.

Completion Checks

• Package manager choice is explicitly reported.
• Install commands used that package manager only.
• @playwright/test present in devDependencies.
• Browser installation completed (unless package-only).
• A verification command succeeded.

Failure Handling

• If install fails due to permissions or network, report exact command and error summary.
• If browser install fails, suggest retry with proxy/mirror configuration.
• If repo has unsupported tooling, stop and ask for project constraints before forcing changes.

Output Template

• Package manager detected: <manager>
• Commands run:
  • <command 1>
  • <command 2>
• Files created/updated:
  • <path>
• Verification:
  • <result>
• Next suggested step:
  • Add first end-to-end test or Integrate into CI