---
description: Set up a vanilla Playwright project in the current workspace
---

Set up a vanilla Playwright project in the current workspace root. The goal is to end up with a runnable Playwright + TypeScript project, including a basic `tsconfig.json`.

## Steps

1. **Inspect the workspace**.
   - Use `bash` to list the current directory and check for `package.json`.
   - If `package.json` is missing, run `npm init -y` first.

2. **Check Playwright installation**.
   - Look at `package.json` to see whether `@playwright/test` is already in `dependencies` or `devDependencies`.
   - Run `npx playwright --version` to verify whether Playwright is usable.

3. **Install Playwright if needed**.
   - If `@playwright/test` is missing or the version check fails, run:
     ```bash
     npm install -D @playwright/test
     ```
   - Then install the required browsers:
     ```bash
     npx playwright install
     ```

4. **Create the Playwright configuration**.
   - Write a `playwright.config.ts` with sensible defaults:
     - Use `testDir: 'tests'`.
     - Run tests against Chromium, Firefox, and WebKit if reasonable, or at least Chromium.
     - Set `fullyParallel: true`, `forbidOnly: !!process.env.CI`, `retries: process.env.CI ? 2 : 0`, and `workers: process.env.CI ? 1 : undefined`.
     - Include a basic `use` block with `baseURL`, `trace: 'on-first-retry'`, and `screenshot: 'only-on-failure'`.
   - If a `playwright.config.ts` already exists, back it up only if it would conflict; otherwise leave it in place.

5. **Create a basic TypeScript configuration**.
   - Write a `tsconfig.json` that supports Playwright tests:
     - `target: "ES2020"` or later.
     - `module: "commonjs"` (or `"NodeNext"` if the project uses ESM).
     - `strict: true`.
     - `esModuleInterop: true`, `skipLibCheck: true`, `forceConsistentCasingInFileNames: true`.
     - Include `tests/**/*.ts` in the compilation context.
   - If `tsconfig.json` already exists, merge the necessary options instead of overwriting.

6. **Create a starter test**.
   - Create `tests/example.spec.ts` with a minimal working test, e.g.:
     ```ts
     import { test, expect } from '@playwright/test';

     test('has title', async ({ page }) => {
       await page.goto('https://playwright.dev/');
       await expect(page).toHaveTitle(/Playwright/);
     });
     ```

7. **Add npm scripts**.
   - Use `edit` to add scripts to `package.json`:
     ```json
     {
       "test:e2e": "playwright test",
       "test:e2e:ui": "playwright test --ui",
       "test:e2e:debug": "playwright test --debug"
     }
     ```
   - Do not duplicate scripts that already exist.

8. **Verify the setup**.
   - Run `npx playwright test --list` to confirm Playwright can discover tests.
   - Optionally run `npx playwright test` against the starter test (it hits `playwright.dev`, so skip if offline).
   - Report the final Playwright version and the list of created files.

## Rules

- Do not overwrite existing user files unless they are missing or clearly incomplete.
- Keep the setup minimal and idiomatic; avoid adding extra test frameworks.
- Use `edit` for precise changes to `package.json`.
- Use `write` only for new files or complete rewrites of files you created.

After completing the setup, summarize:
- Which files were created or modified.
- The Playwright version installed.
- Any verification results or errors encountered.