Menu
clici-cddevopstutorial

Screenshot Testing in CI/CD with the SnapSharp CLI

SnapSharp Team·March 22, 2026·5 min read

Screenshot Testing in CI/CD with the SnapSharp CLI

Visual regression testing usually means setting up Playwright, Chromium, and a comparison tool. Or you can take a screenshot with one command and move on with your life.

The SnapSharp CLI captures screenshots from any terminal — including CI/CD pipelines. No browser installation, no Docker configuration, no flaky tests from Chrome version mismatches.

Install

npm install -g snapsharp-cli
# or use without installing:
npx snapsharp-cli <command>

Basic usage

# Set your API key
export SNAPSHARP_API_KEY=sk_live_your_key

# Take a screenshot
snapsharp screenshot https://staging.example.com -o staging.png

# Full-page, dark mode, WebP
snapsharp screenshot https://staging.example.com \
  --full-page --dark-mode -f webp -o staging.webp

# Mobile view
snapsharp screenshot https://staging.example.com \
  --device "iPhone 14" -o mobile.png

CI mode

The ci command exits with code 0 on success and 1 on failure — perfect for pipelines:

snapsharp ci --url https://staging.example.com --output screenshot.png

GitHub Actions example

name: Visual check
on: [pull_request]

jobs:
  screenshot:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Capture staging screenshot
        env:
          SNAPSHARP_API_KEY: ${{ secrets.SNAPSHARP_API_KEY }}
        run: |
          npx snapsharp-cli ci --url https://staging.example.com --output staging.png
          npx snapsharp-cli screenshot https://staging.example.com --device "iPhone 14" -o mobile.png

      - uses: actions/upload-artifact@v4
        with:
          name: screenshots
          path: "*.png"

GitLab CI example

screenshot:
  image: node:20
  script:
    - npx snapsharp-cli ci --url https://staging.example.com --output screenshot.png
  artifacts:
    paths:
      - screenshot.png
  variables:
    SNAPSHARP_API_KEY: $SNAPSHARP_API_KEY

Multiple pages in one pipeline

#!/bin/bash
PAGES=(
  "https://staging.example.com"
  "https://staging.example.com/pricing"
  "https://staging.example.com/dashboard"
  "https://staging.example.com/login"
)

for page in "${PAGES[@]}"; do
  name=$(echo "$page" | sed 's|https://||;s|/|-|g')
  snapsharp screenshot "$page" -o "${name}.png" --block-ads
done

Check usage from the terminal

snapsharp usage
# ━━━━━━━━━━━━━━━━━━━━ 51.4% (12,847 / 25,000)
# Plan: growth | Resets: April 9, 2026

Other commands

# Generate OG image
snapsharp og blog-post --data '{"title":"My Post","author":"Jane"}' -o og.png

# Render HTML file to image
snapsharp html ./email-template.html --width 600 -o email.png

# List available templates
snapsharp templates --json

API key setup

The CLI resolves your key in order:

  1. --key <key> flag
  2. SNAPSHARP_API_KEY environment variable
  3. .snapsharprc file (current directory or home directory)

For CI, use environment variables. For local development, create a .snapsharprc:

echo "sk_live_your_key" > ~/.snapsharprc

Full CLI documentation: snapsharp.dev/docs/cli