CI integration

Use our SDK plugins in Playwright, Cypress, or Puppeteer—or compare pre-captured PNGs via CLI and GitHub Actions.

1. API key

Create a key under Settings → API Keys (Pro plan). Send it as X-API-Key.

2. SDK plugins

@pixellpeep/playwright, @pixellpeep/cypress, @pixellpeep/puppeteer, or @pixellpeep/client for custom runners. Env: PIXELLPEEP_API, PIXELLPEEP_API_KEY, PIXELLPEEP_PROJECT_ID.

import { test } from '@pixellpeep/playwright';

test('login', async ({ page, pixellpeep }) => {
  await page.goto('https://your-app.example/login');
  await pixellpeep.snapshot('login-page');
});

Each plugin ships with setup instructions for Cypress, Puppeteer, and cloud baselines. See the tutorial for a full walkthrough.

3. CLI

Install the CLI globally from npm:

npm install -g pixellpeep

Then run comparisons directly:

pixellpeep compare   --api-url https://api.pixellpeep.com   --api-key qv_your_key   --baseline baseline.png   --current current.png   --project-id 1   --build-id $GITHUB_RUN_ID   --branch $GITHUB_REF_NAME

Exits 0 when identical, 1 when differences found.

4. GitHub Action

Drop the CLI into a GitHub Actions step to gate pull requests. A ready-to-copy example workflow is included with the CLI package.

5. Manifest (many screens, one PR check)

pixellpeep compare-manifest   --manifest comparisons.json   --project-id 1 --api-key qv_your_key   --github-token $GITHUB_TOKEN   --github-owner $GITHUB_REPOSITORY_OWNER   --github-repo my-repo --github-sha $GITHUB_SHA

On failure: open the check link → approve baseline → re-run.

Pricing scenarios · Tutorial · Sign up free