@vera-ci/playwright-reporter

Playwright reporter for Vera CI — automatically uploads test results to your Vera dashboard.

Install

npm install -D @vera-ci/playwright-reporter
# or
pnpm add -D @vera-ci/playwright-reporter

Peer dependency: @playwright/test >= 1.49.0

Quick Start

Set your credentials as environment variables:

export VERA_API_KEY="your-api-key"
export VERA_PROJECT_ID="your-project-id"

Add the reporter to your playwright.config.ts:

import { defineConfig } from "@playwright/test";

export default defineConfig({
  reporter: [["default"], ["@vera-ci/playwright-reporter"]],
});

That's it — run your tests as usual and results are uploaded automatically:

npx playwright test

Reporter Options

| Option | Type | Default | Description | | ------------------- | ---------- | ------------------------- | --------------------------------- | | apiKey | string | VERA_API_KEY env var | API key for authentication | | projectId | string | VERA_PROJECT_ID env var | Your Vera project ID | | uploadTraces | boolean | true | Upload Playwright trace files | | uploadVideos | boolean | true | Upload video recordings | | failOnUploadError | boolean | false | Fail the test run if upload fails | | printSummary | boolean | true | Print results summary to console | | tags | string[] | — | Custom tags for filtering runs | | branch | string | Auto-detected | Git branch name | | baseBranch | string | Auto-detected | Target branch (for PR diffing) | | commitSha | string | Auto-detected | Git commit hash | | commitMessage | string | Auto-detected | Git commit message | | pullRequestNumber | number | Auto-detected | PR/MR number | | pullRequestUrl | string | Auto-detected | PR/MR URL |

Full Configuration Example

All options can also be passed directly in playwright.config.ts. Git and CI fields are auto-detected and only need to be set if you want to override them.

import { defineConfig } from "@playwright/test";

export default defineConfig({
  reporter: [
    ["default"],
    [
      "@vera-ci/playwright-reporter",
      {
        // Required — or set VERA_API_KEY and VERA_PROJECT_ID env vars
        apiKey: "your-api-key",
        projectId: "your-project-id",

        // Upload control
        uploadTraces: true, // Include Playwright trace files
        uploadVideos: true, // Include video recordings
        failOnUploadError: false, // Fail test run if upload fails
        printSummary: true, // Print results to console
        tags: ["smoke", "critical"], // Custom tags for filtering

        // Git overrides (auto-detected from CI environment)
        branch: "main",
        baseBranch: "main",
        commitSha: "abc123",
        commitMessage: "fix: resolve flaky test",
        pullRequestNumber: 42,
        pullRequestUrl: "https://github.com/org/repo/pull/42",
      },
    ],
  ],
});

Capturing Screenshots

Use the veraSnapshot helper to capture screenshots for snapshot tracking and visual diffing:

import { test } from "@playwright/test";

import { veraSnapshot } from "@vera-ci/playwright-reporter";

test("homepage looks correct", async ({ page }) => {
  await page.goto("/");

  // Full page screenshot
  await veraSnapshot(page, "homepage", { fullPage: true });

  // Element screenshot
  await veraSnapshot(page, "hero-section", { element: ".hero" });

  // Viewport screenshot (default)
  await veraSnapshot(page, "above-the-fold");
});

veraSnapshot Options

| Option | Type | Default | Description | | --------------- | ------------------- | ------- | ------------------------------------------------------------ | | fullPage | boolean | false | Capture the full scrollable page | | element | string \| Locator | — | CSS selector or Locator to screenshot | | waitForStable | number | 500 | Milliseconds to wait for animations to settle (0 to disable) |

CI Integration

Git metadata and CI context are detected automatically from environment variables. Supported providers:

• GitHub Actions — branch, commit, PR number/URL, base branch
• GitLab CI — branch, commit, MR number/URL, target branch
• CircleCI — branch, commit, PR number

No additional configuration is needed — just set VERA_API_KEY and VERA_PROJECT_ID as secrets in your CI environment.

GitHub Actions Example

name: Tests
on: [pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
        env:
          VERA_API_KEY: ${{ secrets.VERA_API_KEY }}
          VERA_PROJECT_ID: ${{ secrets.VERA_PROJECT_ID }}

License

MIT