Last verified: 2026-02-20 · Source
Visual testing for Cypress E2E tests
Integrate screenshot API into your Cypress test suite. Create custom commands for baseline capture and visual regression testing in CI/CD pipelines.
Cypress + Scrnpix Custom Command
Create a custom Cypress command to capture baseline screenshots:
curl "https://api.scrnpix.com/screenshot?url=https%3A%2F%2Fexample.com%2Fpage&width=1280&height=720&full_page=true" \ -H "X-KEY: your-api-key" \ -o cypress-baseline.png
CI Response Handling
Handle API responses in your Cypress test pipeline:
| Status | Description |
|---|---|
| 200 OK | Success. Use cy.writeFile() to save response body as baseline image in fixtures directory. |
| 400 Bad Request | Invalid parameters. Check url format and viewport dimensions. Use cy.log() for debugging. |
| 401 Unauthorized | Invalid API key. Set CYPRESS_API_KEY in CI environment and access via Cypress.env(). |
| 408 Timeout | Page load timeout. Check target URL or use cy.wait() before retry in your custom command. |
| 5xx Server Error | Transient error. Wrap cy.request() in retry logic using cypress-plugin-retries or custom recursion. |
Key Features
Custom Commands
Create Cypress custom commands like cy.captureBaseline() that use Scrnpix API. Integrate seamlessly into your existing test flows.
CI Pipeline Ready
Capture baseline screenshots before test runs. Store in CI artifacts and compare against cy.screenshot() during test execution.
Full Page Capture
Unlike Cypress's viewport-limited screenshots, Scrnpix captures full scrolling pages. Perfect for long-form content and landing pages.
Plugin Compatible
Works alongside cypress-image-snapshot and other visual testing plugins. Use Scrnpix for baseline generation, plugins for comparison.
Frequently Asked Questions
How do I add Scrnpix to Cypress tests?
Use cy.task() to make Node.js HTTP calls to Scrnpix API, or use cy.request() directly. Store the response as a baseline file in your fixtures or screenshots directory.
Can I use this with cypress-image-snapshot?
Yes! Use Scrnpix to generate baseline images, then use cypress-image-snapshot's toMatchImageSnapshot() to compare against current screenshots.
How do I handle scrolling pages in Cypress?
Cypress's cy.screenshot() only captures viewport. Use Scrnpix's full_page=true parameter to capture entire scrolling pages including content below the fold.
What about authenticated pages?
For auth-required pages, use Cypress to log in and capture screenshots. For public pages, use Scrnpix API directly. Mix both approaches based on page requirements.
Enhance Cypress with visual regression
Add API-based screenshot capture to your Cypress test suite. Get baseline screenshots without extra browser overhead.
Start Testing