Tutorial

How to Use a Screenshot API in CI/CD Pipelines

Add visual regression testing to your CI/CD pipeline. Capture screenshots on every deploy and compare changes.

Steps

  1. Add to your pipelineUse cURL in your CI/CD script (GitHub Actions, GitLab CI, Jenkins) to capture screenshots after deploy.
  2. Compare with baselineSave screenshots as artifacts. Compare against previous deploys to catch visual regressions.
  3. Test multiple devicesUse device presets to capture desktop and mobile views in the same pipeline run.

Code Examples

# GitHub Actions example
- name: Capture screenshots
  run: |
    curl "https://snapapi.tech/v1/screenshot?url=$DEPLOY_URL&api_key=$SNAP_KEY&device=desktop" -o desktop.png
    curl "https://snapapi.tech/v1/screenshot?url=$DEPLOY_URL&api_key=$SNAP_KEY&device=iphone14" -o mobile.png

- name: Upload artifacts
  uses: actions/upload-artifact@v3
  with:
    name: screenshots
    path: "*.png"
import requests, os

deploy_url = os.environ["DEPLOY_URL"]
api_key = os.environ["SNAP_KEY"]

for device in ["desktop", "iphone14", "ipad"]:
    response = requests.get("https://snapapi.tech/v1/screenshot", params={
        "url": deploy_url, "api_key": api_key, "device": device
    })
    with open(f"{device}.png", "wb") as f:
        f.write(response.content)
    print(f"Captured {device} screenshot")
const devices = ["desktop", "iphone14", "ipad"];
for (const device of devices) {
  const res = await fetch(
    "https://snapapi.tech/v1/screenshot?" + new URLSearchParams({
      url: process.env.DEPLOY_URL,
      api_key: process.env.SNAP_KEY,
      device
    })
  );
  require("fs").writeFileSync(
    `${device}.png`, Buffer.from(await res.arrayBuffer())
  );
}
Get Free API KeyFull API Docs