PromptQA Recorder

Chat-driven Playwright test recorder for VS Code. Turn natural-language instructions into Playwright tests structured as Page Object Model classes, powered by Claude AI (BYOK).

Existing AI test-automation tools hallucinate selectors and produce flat, brittle scripts. PromptQA Recorder does it differently: a real headed browser executes every step before it's written to the file, the LLM picks the intent while Playwright picks the selector (getByRole, getByLabel, getByText), and the output is real POM code you can edit, refactor, and own.

Highlights

• 🎙️ Record by chatting — describe actions in plain English, see them run in a live browser, watch the spec and POM files grow line by line.
• 🤖 Robust locators — semantic resolution via Playwright's accessibility tree. When a locator is ambiguous, the live a11y snapshot is fed back to the LLM so it retries with a better description, not a worse selector.
• 📂 True Page Object Model — one POM per route, methods named from intent (clickSignInButton, fillEmailField), merged via ts-morph so your manual edits survive.
• ✎ Edit mode after recording — close the browser and keep chatting: read, refactor, and run tests with workspace-wide tools (list_files, read_file, apply_edit, run_test).
• 📎 File attachments — attach any project file via 📎 and ask Claude to refactor it.
• 🔐 BYOK + zero telemetry — your Claude API key lives in VS Code SecretStorage. The extension only talks to api.anthropic.com.

Quick start

1. Install the extension.
2. Run PromptQA: Set Claude API Key and paste your key (get one from the Anthropic console).
3. Open the PromptQA Recorder view from the activity bar.
4. Click Record (or Edit to refine existing files).
5. Type instructions:

   open https://playwright.dev
   click the Get started link
   assert the page contains 'Installation'
   

6. Click Save & Run to verify with npx playwright test.

Modes

Type undo to revert the last recorded step. Click Stop Browser to flip from recording to editing without losing conversation history.

Configuration

Per-workspace config lives in .vscode/promptqa.json (multi-root supported):

{
  "baseUrl": "https://staging.example.com",
  "testsDir": "tests",
  "pagesDir": "tests/pages",
  "specsDir": "tests/specs",
  "fixturesDir": "tests/fixtures"
}

Project layout it generates

tests/
├── pages/        # PageObject classes (one per route)
├── specs/        # Generated *.spec.ts files
├── fixtures/     # Test data + screenshots/
└── utils/
    └── BasePage.ts

If the workspace doesn't already have Playwright, PromptQA offers to run npm init playwright@latest (or pnpm/yarn based on your lockfile).

Privacy

• No telemetry. The extension makes network calls only to api.anthropic.com.
• API key in SecretStorage, never written to settings.json.
• Files stay local — attachments are read by VS Code and sent only as part of your Claude messages.

Requirements

• VS Code 1.90 or newer
• Node.js 20+
• A Claude API key (BYOK)
• A workspace folder (multi-root supported)

Known limits (v0.0.1)

• Bundle size is ~13 MB because ts-morph carries the TypeScript compiler.
• No streaming yet — long Claude responses arrive in one go (with a typing indicator while you wait).
• Recording produces one POM file per route; complex SPAs may want to be split further by hand.

License

MIT — see LICENSE.