Playwright Integration
Unofficial workflow

Last verified: 2026-02-20 · Source

Visual regression testing for Playwright

Add API-based screenshot capture to your Playwright tests. Perfect for visual regression testing in CI without spinning up browsers for every screenshot.

Playwright + Scrnpix Example

Capture baseline screenshots via API during Playwright tests:

curl "https://api.scrnpix.com/screenshot?url=https%3A%2F%2Fexample.com&width=1920&height=1080&full_page=true" \
  -H "X-KEY: your-api-key" \
  -o baseline.png

CI Response Handling

Handle API responses in your Playwright test pipeline:

StatusDescription
200 OKSuccess. Response body contains image bytes (PNG/JPEG). Save to file or compare directly in memory.
400 Bad RequestInvalid parameters. Check url, width, height values. Fail the test with descriptive error.
401 UnauthorizedInvalid or missing API key. Verify API_KEY environment variable is set in CI secrets.
408 TimeoutPage took too long to load. Consider increasing timeout or checking target URL availability.
5xx Server ErrorTransient error. Implement retry logic with exponential backoff (e.g., 3 retries).

Key Features

Visual Regression in CI

Capture baseline screenshots via API and compare against Playwright's page.screenshot() in CI pipelines. Faster than spinning up multiple browser instances.

Async/Await Ready

Modern async patterns integrate seamlessly with Playwright's test structure. Use fetch within test hooks for baseline capture.

Cross-Browser Baselines

Playwright runs in multiple browsers. Scrnpix provides consistent screenshot baselines to compare against regardless of browser engine.

CI/CD Optimized

Reduce CI time by using Scrnpix for baseline generation. No need to run full browser instances just to capture reference screenshots.

Frequently Asked Questions

How do I integrate Scrnpix with Playwright tests?

Use fetch or axios within your test setup to call the Scrnpix API. Capture baseline screenshots before running Playwright's visual comparison logic. Store baselines in CI cache or artifact storage.

Should I replace Playwright's screenshot method?

No. Use Playwright's built-in page.screenshot() for live test screenshots. Use Scrnpix API to generate baseline/reference screenshots without browser overhead, especially useful in CI environments.

How do I handle authentication in Playwright + Scrnpix?

For pages requiring auth: use Playwright to authenticate and capture screenshots. For public pages: use Scrnpix API directly. You can mix both approaches in the same test suite.

Can I use Scrnpix for Percy/Chromatic-style visual testing?

Yes. Capture baselines with Scrnpix API, then use Playwright to capture current screenshots. Compare with image diffing libraries like pixelmatch or looks-same in your test assertions.

Ready to add visual regression to Playwright?

Get your API key and start capturing baseline screenshots for visual testing. Integrate with your CI/CD pipeline in minutes.

Start Testing