# Write Playwright Tests for a Vite React App Yes. An agent extends Playwright coverage for discussion and comment flows in a Vite React app, runs them headless, and opens a PR. [Run this on Rush](https://cloud.getrush.ai/run/write-playwright-tests/vite-react/), in a Project that has your repository. ## What the agent does The agent works inside the Vite app workspace, not only at the monorepo root. In alan2207/bulletproof-react the target is `apps/react-vite/`: `package.json` names the package `bulletproof-react-vite`, scripts include `dev` (`vite`), `test` (Vitest), and `test-e2e` (`pm2 start "yarn run-mock-server" --name server && yarn playwright test`), with `@playwright/test` `^1.49.1`, React `18.3.1`, React Router `^7`, TanStack Query `^5`, and a Yarn lockfile. Features live under `src/features/discussions` and `src/features/comments` with API helpers such as `create-discussion.ts` (Zod schema requiring title and body, `api.post('/discussions', data)`) and matching create/update/delete components. Playwright is already partially wired: `playwright.config.ts` sets `testDir` to `./e2e`, a `setup` project for `*.setup.ts`, Chromium with `storageState: 'e2e/.auth/user.json'`, and `webServer` running `yarn dev --port 3000`. Existing specs include `e2e/tests/smoke.spec.ts`, which already walks create, update and delete for a discussion and its comments against the UI (`Create Discussion`, `Update Discussion`, `Create Comment`, `Delete Comment`, `Delete Discussion`), plus `profile.spec.ts` and `auth.setup.ts`. The mock API is `mock-server.ts` started through `run-mock-server` / MSW middleware, not a separate backend repo. The agent extends that suite where smoke is thin: separate specs for validation errors on empty title/body (the Zod messages from `createDiscussionInputSchema`), editing a comment when the UI exposes it, permission-denied paths for a second user, and stable selectors that do not depend on toast order alone. New files land under `e2e/tests/`, reuse `src/testing/data-generators` (`createDiscussion`, `createComment`) the way `smoke.spec.ts` does, and keep the auth setup project as a dependency. It starts the mock server and Vite as the config expects, runs Playwright headless, fixes selector drift against the real components in `src/features/discussions/components/` and `src/features/comments/components/`, and opens a pull request only when the extended suite passes. Production feature code is left alone unless a test reveals a bug, which is called out in the description. ## Start it with one API call `POST https://api.prix.dev/o/{org}/sessions` ```json { "agent": "claude", "input": "In apps/react-vite, extend the Playwright suite with end-to-end tests for creating, editing and deleting a discussion and its comments. Run them headless against the dev server in the sandbox and open a pull request with the passing specs.", "resources": [ { "url": "https://github.com/your-org/your-app" } ] } ``` 1. **Get an API key.** In the console, open Settings, then API keys, and create a key for your org. Send it in the Authorization header as a Bearer token. 2. **Send the request.** POST the body in request.json to https://api.prix.dev/o/{org}/sessions, with your repository as the resources URL. The run starts in its own cloud sandbox. 3. **Read what came back.** Follow the run on its live stream or wait for the run.completed webhook, then read the result and its trajectory. ## What comes back What comes back is a pull request on a new branch. In a Bulletproof-shaped repo it adds or extends files under `apps/react-vite/e2e/tests/` and only touches `apps/react-vite/package.json` if a Playwright dependency or script pin must change. The Vitest unit tests under `src/**/__tests__` stay as they are. The pull request description names the flows added beyond `smoke.spec.ts`, how the mock server was started, and the headless command that passed. The trajectory keeps Playwright traces from retries and the Vite server logs. Before merging, a reviewer checks that new cases still use the auth `storageState`, that they do not require a remote API, and that smoke's happy path was not deleted. Once merged, `yarn test-e2e` in `apps/react-vite` runs the same suite. ## Run it on every discussion or comment feature change On pull requests that touch `apps/react-vite/src/features/discussions` or `.../comments`, send this request so Playwright coverage is extended before merge. Scope the prompt to `apps/react-vite` so the agent does not wander into the Next.js workspaces. Handle `run.completed` via the API key webhook and keep starts within `max_concurrent`; the mock server plus Vite plus Chromium is heavier than a Vitest file. ## Why run it on Rush? Discussion CRUD in this app talks to an MSW mock server and a real browser, not a jsdom render. That is awkward to keep green on a laptop that also runs the Next.js workspaces. On Rush the agent runs mock server, Vite and Chromium in one sandbox and returns a pull request with passing specs. Reviewers see the new cases and the trajectory instead of trusting a local demo. The same request can harden e2e coverage on several Vite React apps at once, each with its own pull request. ## Frequently asked questions ### Smoke.spec.ts already covers CRUD. What does it add? Edge paths smoke skips: validation on empty fields, comment edit if the UI supports it, multi-user permission failures, and splitting brittle one-file flows into focused specs. It does not delete the smoke happy path. ### Does it need a real backend? No. `apps/react-vite` uses `mock-server.ts` and MSW. The agent starts that server the way `test-e2e` does, not a production API. ### Yarn workspaces — will it touch nextjs-app? The prompt scopes work to `apps/react-vite`. The root `prepare` script installs all workspaces, but the pull request should only change the Vite app's e2e files unless a shared dependency pin forces a lockfile update. ### Vitest or Playwright? This job is Playwright end-to-end under `e2e/`. Component tests under `src/**/__tests__` remain Vitest and are outside the diff unless you ask for those separately.