Connect Existing Playwright

What this connection does

QA Note receives results only from Playwright and CI that you already run. The QA Note server does not start Playwright or a browser, generate tests, selectors, or workflows, or modify the repository.

The preflight check under QA management → Connect existing Playwright reads only whether these fixed paths exist:

• Root package.json
• Root playwright.config.ts, .js, .mts, .mjs, .cts, or .cjs
• .yml and .yaml filenames in .github/workflows

It does not analyze file contents or test code. Finding both a Playwright config and a CI workflow is not shown as Results connected until one result has actually arrived.

Prerequisites

• A GitHub repository is connected to the project.
• Existing Playwright tests produce a JSON or JUnit report.
• An existing GitHub Actions workflow runs the tests.
• An organization owner or admin issues one API Key limited to qa:write.

If Playwright or a workflow is missing, QA Note does not generate it. Your development team must prepare it according to your existing development process.

1. Issue a dedicated evidence import key

Open organization API Keys, create a key, and select only Import QA evidence (qa:write). The raw value is shown once, so transfer it to your development team's secure secret-management path.

Store it in the GitHub repository's Actions secrets with this name:

QANOTE_API_KEY

Never paste the raw key into a workflow file, log, or QA Note issue.

2. Produce the existing Playwright report

This example adds the JSON reporter to an existing test command. If you already use other reporters, keep them in a reporter array.

PLAYWRIGHT_JSON_OUTPUT_NAME=playwright-results.json \
  npx playwright test --reporter=json

JUnit reports are also supported. If one report contains multiple Playwright projects, select one with the importer's --playwright-project option.

3. Connect the thin importer

@qanote/playwright-importer normalizes and sends a report that already exists. It does not install or run Playwright or a browser. It does not upload stdout/stderr, trace bodies, or screenshot and video bodies. Explicit artifacts contribute byte/hash metadata only.

Start with a no-submit dry run:

npx @qanote/playwright-importer \
  --report playwright-results.json \
  --project-id <QA Note project ID> \
  --page-url https://example.com/ \
  --browser-name chromium \
  --browser-version <browser version used by the run> \
  --viewport 1280x720 \
  --dry-run

Then pass the secret as an environment variable in the existing workflow:

QANOTE_API_KEY="${QANOTE_API_KEY}" \
npx @qanote/playwright-importer \
  --report playwright-results.json \
  --project-id <QA Note project ID> \
  --page-url https://example.com/ \
  --browser-name chromium \
  --browser-version <browser version used by the run> \
  --viewport 1280x720

In GitHub Actions, map the QANOTE_API_KEY environment variable to ${{ secrets.QANOTE_API_KEY }}. Keep your existing trust boundary so the secret is not exposed to untrusted fork pull requests.

4. Confirm the receipt

Run the existing CI once, then return to QA management → Connect existing Playwright. A latest-received timestamp and receipt ID confirm result delivery.

Imported failures and errors never become issues automatically. They enter the QA review inbox as unselected candidates. Only findings that a person reviews, selects, and approves become QA issues.

Boundaries and troubleshooting

• No Playwright config — Developer setup required is the correct state.
• No workflow — prepare the existing CI first; QA Note does not create it.
• GitHub check failed — check the GitHub App repository contents permission and whether the installation is suspended.
• Environment found, waiting for results — run the existing CI once with the importer, then check again.
• Receipt did not update — confirm qa:write, the secret name, and the project ID. Never print the raw key in logs.

QA Note does not operate Actions retries, parallelism, or browser matrices. Those remain the responsibility of your existing CI.

Related

• GitHub Integration
• API Authentication