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.
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
390x844Screenshots 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.