Screenshots in your CI pipeline

Catch visual regressions before they reach production. Snap's GitHub Action adds screenshot testing to your PRsโ€”without the headache of managing headless browsers.

๐Ÿ“Push code
โ†’
๐Ÿš€Deploy preview
โ†’
๐Ÿ“ธSnap captures
โ†’
โœ…PR ready

Why teams choose Snap for CI

๐ŸŽฏ Deterministic Rendering

Same input, same output. Pinned browser versions, fonts, and rendering profiles mean your screenshots are consistent across runs. No more flaky tests from environment drift.

โšก Zero Browser Management

No installing Chrome, no managing Playwright versions, no debugging WebDriver issues. One Action, one API key, screenshots appear in your PR.

๐Ÿ”’ SSRF-Hardened

Safe URL validation, redirect hop checking, and private IP blocking built-in. Capture screenshots of your preview deploys without exposing internal infrastructure.

๐Ÿ“Š Visual Regression Built-In

Compare screenshots against baselines to catch unintended UI changes. Perfect for design system updates and dependency upgrades.

๐Ÿ” Auth Support

Pass headers, cookies, or auth tokens to capture authenticated pages. Test your actual logged-in user flows, not just public landing pages.

๐Ÿš€ Fast Feedback

Screenshots ready in seconds, not minutes. Optimized for PR review flowsโ€”developers see visual changes without leaving GitHub.

Snap vs. DIY Playwright/Puppeteer

DIY Headless Browsers

  • Install and cache Chrome/ChromeDriver
  • Manage browser version compatibility
  • Debug flaky WebDriver connections
  • Handle memory leaks in CI containers
  • Build your own screenshot comparison
  • Maintain SSRF protection yourself

Snap GitHub Action

  • One Action, zero browser installs
  • Pinned, consistent browser versions
  • Reliable API, no WebDriver issues
  • Managed infrastructure, no CI bloat
  • Built-in visual regression workflows
  • SSRF-hardened by default

Built for GitHub workflows

๐Ÿ“‹ PR Summary Integration

Screenshots automatically appear in PR summaries for instant visual review.

๐Ÿท๏ธ Baseline Tagging

Tag baseline screenshots to track visual changes across releases.

๐Ÿ” Diff Views

Side-by-side and overlay diff views for quick visual change detection.

โš™๏ธ Flexible Configuration

Viewports, full-page capture, wait conditions, and custom selectors.

Add to your workflow in 30 seconds

name: Visual Regression
on: [pull_request]

jobs:
  screenshots:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Capture Screenshots
        uses: ranacseruet/screenshot-api@v1
        with:
          api_key: ${{ secrets.SCREENSHOT_API_KEY }}
          urls: |
            https://preview-${{ github.event.pull_request.number }}.example.com
            https://preview-${{ github.event.pull_request.number }}.example.com/dashboard
          viewports: |
            1280x720
            390x844

Screenshots automatically appear in your PR summary. No additional configuration needed.

Use cases

๐ŸŽจ Design System Validation

Ensure component changes don't have unintended side effects. Catch visual bugs in your design system before they propagate to production.

๐Ÿ“ฆ Dependency Updates

Verify that library upgrades don't break your UI. CSS frameworks, component libraries, font changesโ€”see the impact instantly.

๐ŸŒ Cross-Browser Verification

Test responsive breakpoints and catch layout issues across different viewport sizes automatically.

Ready to add visual testing to your CI?

Start with 100 free screenshots per month. No credit card required.