Playwright Quickstart

Set up visual testing with Vera CI and Playwright in under 5 minutes.

Prerequisites

Playwright installed and running
Playwright configured to run in your CI/CD pipeline
A project created in Vera CI

Install the reporter

Add the @vera-ci/playwright-reporter package to your project:

npm install --save-dev @vera-ci/playwright-reporter

Configure Playwright

Add the Vera CI reporter to your playwright.config.ts:

playwright.config.ts

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

export default defineConfig({
  reporter: [
    ["html", { open: "never" }],
    [
      "@vera-ci/playwright-reporter",
      {
        // Reads from VERA_API_KEY env var by default
        uploadTraces: true,
        uploadVideos: true,
      },
    ],
  ],
  use: {
    trace: "on-first-retry",
    screenshot: "on",
  },
});

Tip

The reporter automatically reads VERA_API_KEY and VERA_PROJECT_ID from environment variables, so you don't need to hardcode them in your config.

Capture screenshots

Use the veraSnapshot helper to capture named, stable screenshots in your tests:

tests/homepage.spec.ts

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

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

test("header component", async ({ page }) => {
  await page.goto("/");
  await veraSnapshot(page, "header", {
    element: "header",
  });
});

test("full page capture", async ({ page }) => {
  await page.goto("/about");
  await veraSnapshot(page, "about-full", {
    fullPage: true,
  });
});

Screenshot options

fullPage. Capture the full scrollable page (default: false)
element. CSS selector or Playwright Locator to capture a specific element
waitForStable. Milliseconds to wait for animations to settle (default: 500)

Set environment variables

Set the following environment variables in your CI provider:

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

You can find your API key and project ID in your Vera CI project settings.

Info

The reporter auto-detects your CI provider (GitHub Actions, CircleCI, GitLab CI) and extracts branch, commit, and PR information automatically. No extra configuration needed.

Run your tests

Run your Playwright tests as usual:

npx playwright test

After tests complete, the reporter uploads results to Vera CI and prints a summary with a link to your run:

  [Vera] Uploading results...

  ✓ [Vera] Run uploaded successfully
    → 12 tests · 10 passed · 2 failed · 15 snapshots
    → https://vera-ci.com/org/team/project/runs/abc123

After installation

Once your changes are pushed, Vera CI status will appear on your pull requests. You'll see a summary of visual changes with links to approve or reject each diff.

Info

A reference build is needed for comparisons. The first run on your default branch creates the baseline. Until then, builds will show as orphaned.

For the full list of reporter options, see the Playwright Reporter SDK reference.