Integrations

GitHub

Connect your GitHub repository to get automatic PR comments and status checks when visual changes are detected.

PR comments

When a run is processed for a pull request, Vera CI posts a comment with:

• Total number of snapshots and how many have changes
• A summary of new, changed, and removed snapshots
• A direct link to the run in the Vera CI dashboard

To enable GitHub PR comments, add a GitHub token in your project's integration settings.

Status checks

Vera CI reports a commit status on each PR so you can require visual review before merging. Configure this as a required status check in your GitHub branch protection rules.

Slack

Get notified in Slack when runs complete. Configure a Slack webhook URL in your project settings to receive notifications for:

• Runs with visual changes that need review
• Failed runs
• Approved or rejected runs

Webhooks

Send run events to your own endpoints. Vera CI can fire webhooks on these events:

• run.completed. A run has finished processing
• run.approved. All snapshots in a run were approved
• run.rejected. One or more snapshots were rejected

Webhook payloads are signed with a secret so you can verify authenticity. Configure webhooks in your project settings.

CI/CD setup

The @vera-ci/playwright-reporter works in any CI environment. Here are example configurations for common providers:

GitHub Actions

name: Tests
on: [push, 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 }}

GitLab CI

test:
  image: mcr.microsoft.com/playwright:v1.52.0-noble
  script:
    - npm ci
    - npx playwright test
  variables:
    VERA_API_KEY: $VERA_API_KEY
    VERA_PROJECT_ID: $VERA_PROJECT_ID

CircleCI

version: 2.1
jobs:
  test:
    docker:
      - image: mcr.microsoft.com/playwright:v1.52.0-noble
    steps:
      - checkout
      - run: npm ci
      - run: npx playwright test
    environment:
      VERA_API_KEY: ${VERA_API_KEY}
      VERA_PROJECT_ID: ${VERA_PROJECT_ID}

The reporter auto-detects all three CI providers and extracts branch, commit, and PR information automatically. See the SDK reference for the full list of auto-detected environment variables.