CI Regression GIF — Automated Visual Testing Animation
Generate scroll GIFs in your CI pipeline for visual regression testing. Compare animations between builds to catch layout and scroll behavior changes.
Parameters
| Name | Value | Description |
|---|---|---|
| url | https://example.com | The page under test |
| width | 1280 | Consistent viewport for comparisons |
| height | 720 | Consistent viewport for comparisons |
| scroll_duration | 3000 | Fixed duration for reproducible output |
| scroll_easing | linear | Linear scroll for consistent frame comparison |
cURL Example
curl -H "X-KEY: your-api-key" "https://api.scrnpix.com/animate?url=https://example.com&width=1280&height=720&scroll_duration=3000&scroll_easing=linear" -o regression.gif
SDK Example
import requests
import sys
url = sys.argv[1] if len(sys.argv) > 1 else "https://example.com"
response = requests.get(
"https://api.scrnpix.com/animate",
headers={"X-KEY": "your-api-key"},
params={
"url": url,
"width": 1280,
"height": 720,
"scroll_duration": 3000,
"scroll_easing": "linear"
}
)
response.raise_for_status()
with open("regression.gif", "wb") as f:
f.write(response.content)
print(f"Captured {len(response.content)} bytes")Expected Output
| Content-Type | image/gif |
| Credit Cost | 3 credits |
| Notes | 3-second linear scroll for reproducibility |
Failure Modes
Dynamic content causes non-deterministic output
Symptom: GIF differs between runs even with no code changes
Fix: Use linear easing and fixed duration for maximum reproducibility. Dynamic content like timestamps or ads will still vary.
CI environment cannot reach the API
Symptom: Connection timeout or DNS resolution failure
Fix: Ensure your CI runner has outbound internet access to api.scrnpix.com. Add the API URL to any network allowlists.
Frequently Asked Questions
Why use linear easing for CI regression tests?
Linear easing produces consistent frame spacing regardless of run timing, making frame-by-frame comparison between builds more reliable.
How do I compare GIFs between builds?
Extract frames using tools like ImageMagick or gifsicle, then compare individual frames using pixel-diff tools like pixelmatch.
Related Recipes
Basic Scroll GIF — Simple Scrolling Animation
Create a basic scrolling GIF animation of a web page with default settings. The simplest way to showcase page content in a single animated image.
GET /screenshotScheduled Monitoring Snapshot — Periodic Visual Checks
Capture regular screenshots of important pages on a schedule for visual monitoring, uptime verification, and change detection workflows.
Ready to try this recipe?
Get your API key and run this recipe in seconds. Free tier includes 50 credits per month.
Get API Key