# QA a React App in a Real Browser

An agent starts the Cypress Real World App in a sandbox, walks sign-up, bank account and payment flows in a real browser, and returns qa-report.md.

[Run this on Rush](https://cloud.getrush.ai/run/qa-in-browser/react/), in a Project that has your repository.

## What the agent does

For a React app like cypress-io/cypress-realworld-app, the agent reads package.json and the README before clicking anything. The app is React 18.2.0 with react-dom 18.2.0, Vite ^8.2.2 on the frontend (vite.config.ts serves port 3000) and an Express API in backend/app.ts that listens via getBackendPort from src/utils/portUtils.ts. yarn.lock is the lockfile. Scripts that matter for a manual QA pass are yarn (postinstall runs husky and patch-package), yarn predev / yarn db:seed:dev (copies data/database-seed.json to data/database.json), and yarn dev, which runs concurrently yarn:start:react and yarn:start:api:watch. The agent installs with yarn, seeds the JSON database, starts yarn dev, and waits until both the Vite UI and the API respond.

In the sandbox browser it exercises the product paths the Cypress suite already names under cypress/tests/ui/: sign-up through SignUpForm.tsx (firstName, lastName, username, password via Formik and Yup), onboarding via UserOnboardingContainer.tsx, adding a bank account through BankAccountForm.tsx (data-test attributes bankaccount-bankName-input, bankaccount-routingNumber-input, bankaccount-accountNumber-input, bankaccount-submit) and BankAccountsContainer.tsx, then creating a payment and a request through TransactionCreateContainer.tsx and its step components wired to createTransactionMachine. Local auth is the default App.tsx path; Auth0, Okta, Cognito and Google entrypoints exist but are out of scope unless the prompt names them. Each step gets a screenshot, the URL and the control used.

The repository’s Cypress and Vitest suites (yarn test:headless, yarn test:unit) stay untouched. This job is exploratory QA with a written report, not a green CI claim. Defects such as validation messages that disagree with Yup rules, broken navigation in NavBar.tsx / NavDrawer.tsx, empty feeds after seed, or failures to open the transaction detail view go into qa-report.md with severity and reproduction steps. The agent does not edit src/, backend/, cypress/ or data/.

Teammates watching the session can take the browser to demonstrate a missed path (for example notifications in NotificationsContainer.tsx or user settings in UserSettingsContainer.tsx) and send a follow-up. The agent continues from that state and appends the flow to the same report, still without changing code.

## Start it with one API call

`POST https://api.prix.dev/o/{org}/sessions`

```json
{
  "agent": "claude",
  "input": "Start this app in the sandbox and test it in the browser as a QA tester: sign up, add a bank account, send a payment and request one. For each flow record the steps, a screenshot per step and the result. Write qa-report.md with every defect, its steps to reproduce and its severity. Change no code.",
  "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

The session finishes with artifacts: qa-report.md and the screenshots named in it. The report covers sign-up, bank account creation, send payment and request payment, each with pass or fail and defect detail. GET /o/{org}/sessions/{id} exposes the turn result and artifact download URLs; there is no pull request because the tree was not modified.

A reviewer compares screenshots to the steps, confirms yarn lockfile and source files are unchanged, and turns high-severity findings into tickets. The transcript retains yarn install, seed and dev commands plus every browser tool call.

## Run it on every staging deploy

After each staging deploy, POST /o/{org}/sessions with this prompt and the app repository in resources. Configure webhook_url on the key so your bot receives run.completed, pulls qa-report.md from the session artifacts and files issues for severity high and medium.

Reuse the same request body across deploys with a fresh Idempotency-Key per deploy. If several frontends share one key, respect max_concurrent and queue the rest.

## Why run it on Rush?

This app needs a seeded lowdb file, an Express API and a Vite UI running together before any click path makes sense. The sandbox keeps that full stack and a real browser on one machine, with screenshots stored as artifacts instead of scattered local captures.

Team steering mid-run means a QA lead can point at a broken notifications feed without starting a second environment. Proof is the report, the screenshots and the command transcript, not a verbal walkthrough.

## Frequently asked questions

### Does it use the Cypress suite instead of manual clicks?

No. Cypress specs under cypress/tests/ui/ are reference for which flows exist. The agent drives the sandbox browser itself and writes qa-report.md; it does not run yarn cypress:run unless you ask in a follow-up.

### Which auth provider does it test?

Local authentication through App.tsx and SignUpForm.tsx is the default path matching the seeded database. Auth0, Okta, Cognito and Google apps are separate entry files and need explicit credentials and prompt text if you want them covered.

### Will the agent modify database.json?

It may write inside the sandbox while signing up or creating transactions, but it does not commit those changes. The pull request path is unused; only the report and screenshots are published as artifacts.

### Can teammates take the browser?

Yes. During a live session a teammate can take exclusive control of the sandbox browser, show a missed flow and send a follow-up so the agent continues and records it.