Use Case

Screenshot API for Visual Regression Testing

Catch visual regressions before they reach production. Screenshot-based testing that plugs into your CI/CD pipeline.

The Problem

CSS changes break things you don't expect

A small CSS change can cascade into broken layouts across dozens of pages. Unit tests don't catch visual regressions, and manual QA is too slow to run on every deploy. Teams ship broken UIs because they can't see what changed.

CSS changes cause unexpected regressions on other pages
Unit tests don't verify visual rendering
Manual QA is too slow for continuous deployment
Cross-browser visual differences go unnoticed

The Solution

Visual regression detection on every deploy

Capture screenshots of key pages before and after deploys. Compare them programmatically to catch visual regressions automatically.

Step 1

Capture baseline screenshots

Screenshot your key pages on the main branch to establish a visual baseline.

Step 2

Capture PR screenshots

On each pull request, capture the same pages from the preview deployment.

Step 3

Diff and report

Compare screenshots pixel-by-pixel and flag differences in the PR.

Code Example

Get started in minutes

A single API call is all you need.

node.js

// In your CI pipeline
const pages = ["/", "/pricing", "/app", "/settings"];
const baseUrl = process.env.PREVIEW_URL; // e.g., pr-123.preview.example.com

const screenshots = await Promise.all(
  pages.map(async (page) => {
    const res = await fetch(
      `https://api.porto.dev/v1/screenshot?url=${baseUrl}${page}&width=1280&full_page=true`,
      { headers: { Authorization: `Bearer ${process.env.PORTO_API_KEY}` } }
    );
    return { page, buffer: Buffer.from(await res.arrayBuffer()) };
  })
);
// Compare against baseline screenshots from main branch