QA Web Mode

Automated QA testing for Prose using Playwright against the web mode build (http://localhost:5174). Unlike Circuit Electron, this runs headlessly in CI — no display server or Electron required.

Usage

/qa-web

Or target a specific PR branch:

/qa-web <branch-name>

Prerequisites

Playwright browsers must be installed once:

npx playwright install --with-deps chromium

Workflow

1. (Optional) Checkout Branch

If testing a specific PR branch:

git fetch origin
git checkout <branch-name>

2. Run Tests

With auto-managed dev server (recommended for local development):

npm run test:web

The Playwright config automatically starts npm run dev:web and waits for http://localhost:5174 to be ready.

Against an already-running dev server (if npm run dev:web is already running):

PLAYWRIGHT_TEST_BASE_URL=http://localhost:5174 npx playwright test

Against the production build (recommended for CI — faster, no HMR overhead):

npm run build:web
npm run preview:web &
npx playwright test --config playwright.config.ts

3. Interpret Results

On failure, Playwright saves a screenshot and trace under test-results/. Open the trace viewer:

npx playwright show-trace test-results/<test-name>/trace.zip

4. Report Results to PR

Post a comment on the PR with results:

gh pr comment <pr-number> --body "$(cat <<'EOF'
## Web QA Results

**Branch**: \`<branch>\`
**Tested**: $(date -u +"%Y-%m-%dT%H:%M:%SZ")

### Results

| Test | Status | Notes |
|------|--------|-------|
| App loads without errors | ✅ | |
| File explorer renders files | ✅ | |
| Clicking file loads content | ✅ | |
| Editor accepts input | ✅ | |
| Settings panel opens | ✅ | |
| Theme toggle works | ✅ | |

### Recommendation

✅ **Ready for Review** — All smoke tests pass.
EOF
)"

Test Suite

The smoke test suite at tests/smoke.spec.ts covers:

1. App loads without console errors — No JS errors on startup
2. File explorer renders fixture files — Sidebar shows pre-loaded fixture files
3. Clicking a file loads content — Clicking a file populates the editor
4. Editor accepts text input — The ProseMirror editor is interactive
5. Settings panel opens — More options → Settings shows the dialog
6. Theme toggle works — Dark/light toggle switches the dark class on <html>

Writing New Tests

Add tests to tests/smoke.spec.ts or create new files under tests/.

Common Selectors

// Editor
const editor = page.locator('.ProseMirror')

// Toolbar buttons
page.getByRole('button', { name: /show files/i })     // file list toggle
page.getByRole('button', { name: /hide files/i })
page.getByRole('button', { name: /toggle theme/i })
page.getByRole('button', { name: /more options/i })   // overflow menu

// File items in sidebar
page.getByText('Welcome to Prose.md')
page.getByText('Formatting Examples.md')

// Dialogs
page.getByRole('dialog')                               // any dialog
page.getByRole('alertdialog')                          // alert dialogs (consent, delete confirm)

Dismissing the AI Consent Dialog

Prose shows a consent dialog on first launch in a fresh browser context. Dismiss it before testing:

async function dismissAIConsent(page: Page) {
  const dialog = page.getByRole('alertdialog').filter({ hasText: 'AI Writing Assistance' })
  if (await dialog.isVisible({ timeout: 3_000 }).catch(() => false)) {
    // "Use Without AI" closes in one click. "Enable AI Features" advances
    // OSS/web builds to a second step (skill download) that would also need
    // dismissal — avoid by declining.
    await page.getByRole('button', { name: 'Use Without AI' }).click()
    await dialog.waitFor({ state: 'hidden' })
  }
}

Waiting for App Initialization

async function waitForAppReady(page: Page) {
  await page.locator('[aria-label="Toggle theme"]').waitFor({ state: 'visible', timeout: 15_000 })
  await dismissAIConsent(page)
}

Keyboard Shortcuts

Unlike Electron, browser keyboard shortcuts work reliably with Playwright:

// Ctrl+/ to open chat (web mode uses Ctrl instead of Cmd)
await page.keyboard.press('Control+/')

// Type in editor
await editor.click()
await page.keyboard.type('Hello world')

Fixture Files

The web mock pre-loads these files at /Documents/:

Configuration

playwright.config.ts at the project root:

• Base URL: http://localhost:5174 (web mode dev server)
• Workers: 1 (serial execution — avoids IndexedDB conflicts between tests)
• Global timeout: 120s (prevents hung CI jobs)
• CI reporters: json (outputFile) + github (inline PR annotations)
• Local reporter: list (human-readable terminal output)

Troubleshooting

net::ERR_CONNECTION_REFUSED

The dev server isn't running. Either:

• Let Playwright start it automatically via npm run test:web
• Start it manually: npm run dev:web then re-run tests

Tests time out waiting for .ProseMirror

The editor may be blocked by the AI consent dialog or recovery dialog. Make sure you call dismissAIConsent() in your test setup.

Fixture files not visible in file explorer

The file list auto-initializes from getDocumentsPath(). If files aren't showing:

1. Check npm run dev:web console for errors
2. Confirm the [aria-label="Show files"] button was clicked first

Theme toggle test fails

The initial theme (dark class on <html>) may differ if a previous test changed it. Use isolated browser contexts or clear localStorage between test runs:

test.beforeEach(async ({ page }) => {
  await page.addInitScript(() => localStorage.clear())
})