Visual testing for Vercel previews

Capture screenshots of Vercel preview deployments. Add visual regression testing to your Next.js and frontend workflows.

Get API Key View Docs

Vercel + Scrnpix Automation

Capture preview deployment screenshots via webhook or GitHub Actions:

curl "https://api.scrnpix.com/screenshot?url=https%3A%2F%2Fyour-project-git-branch.vercel.app&width=1440&height=900&full_page=true" \
  -H "X-KEY: your-api-key" \
  -o vercel-preview.png

Vercel Deployment Response Handling

Handle API responses when capturing Vercel previews:

Status	Description
200 OK	Success. Attach to PR comment or store in Vercel Blob storage.
400 Bad Request	Invalid URL. Verify preview URL format: project-git-branch.vercel.app.
401 Unauthorized	API key error. Store in GitHub Secrets or Vercel Environment Variables.
408 Timeout	Preview not ready. Wait for deployment completion webhook before capture.
5xx Server Error	Server error. Implement retry with exponential backoff.

Key Features

Preview Deployment Capture

Automatically screenshot every Vercel preview. Visual review before merging PRs.

Next.js Optimized

Vercel is built for Next.js. Capture ISR pages, API routes, and dynamic content.

Webhook Integration

Use Vercel deployment webhooks to trigger Scrnpix capture. Automate visual testing.

PR Comments

Post preview screenshots to PR comments. Visual diff review in GitHub workflow.

Frequently Asked Questions

How do I screenshot Vercel previews?

Use Vercel deployment webhook or GitHub Actions deployment_status event. Extract preview URL and call Scrnpix API.

Can I automate this with GitHub Actions?

Yes. Use deployment_status trigger to detect Vercel deployments. Capture screenshot and post to PR comment.

How do I handle preview URL format?

Vercel URLs follow pattern: project-git-branch.vercel.app. Use GitHub context to construct URL dynamically.

Add visual testing to Vercel

Capture screenshots of Vercel preview deployments. Automate visual regression for Next.js projects.

Get Started