Automate Website Screenshots with PageOps Screenshot API

Introduction

Manually capturing website screenshots is time-consuming and unreliable. For developers building monitoring tools, visual regression tests, competitor tracking systems, or web scraping pipelines, a programmatic way to capture website screenshots is essential.

With the Screenshot API, you can simply send an HTTP request and receive a rendered screenshot. The API runs a headless browser in the cloud, so you don’t need to manage any infrastructure.

Why Developers Need Website Screenshots

Automated screenshots are commonly required in modern applications. Typical use cases include:

Website Monitoring: Capture screenshots regularly to detect UI changes, layout issues, or downtime.
Visual Regression Testing: QA teams compare screenshots between deployments to find UI bugs.
Web Scraping and Data Pipelines: Screenshots can be simpler and more reliable than parsing complex DOM structures.
Social Media Preview Generation: Automatically generate OpenGraph, Twitter Card, or link preview images.

How Screenshot API Works

Using the Screenshot API is straightforward:

Send a request with the target URL
The cloud headless browser renders the page
The API captures the screenshot
You receive the screenshot or its URL

JavaScript Example

const response = await fetch("https://api.page-ops.com/api/v1/screenshots", {

  method: "POST",

  headers: {

    "Content-Type": "application/json",

    "Authorization": "Bearer YOUR_API_KEY"

  },

  body: JSON.stringify({

    url: "https://example.com",

    mode: "sync",

    timeoutMs: 8000,

    fullPage: false

  })

});



const data = await response.json();

console.log(data.result?.url);

cURL Example

curl -X POST "https://api.page-ops.com/api/v1/screenshots" \

  -H "Authorization: Bearer $SCREENSHOT_API_KEY" \

  -H "Content-Type: application/json" \

  -d '{

    "url": "https://example.com",

    "mode": "sync",

    "timeoutMs": 8000,

    "fullPage": false

  }'

Note: In synchronous mode (mode=sync), fullPage must be false and timeoutMs must be between 0–10000 ms. Otherwise, the server will automatically fall back to asynchronous mode.

Advanced Screenshot Options

The Screenshot API supports various advanced parameters:

Full-page Screenshots: Capture the entire page (available in async mode).
Custom Viewports: Emulate desktop, mobile, or tablet devices.
Wait Conditions: Wait for specific DOM elements or network requests before capturing.
Selector Screenshots: Capture only a specific element on the page.
Headers & Cookies: Pass authentication or session cookies.
Delay Capture: Use delayMs to add extra delay after page load.

{

  "url": "https://example.com/pricing",

  "selector": "#pricing"

}

Sync vs Async Requests

Asynchronous mode (default): Returns a jobId, then poll GET /api/v1/screenshots/{jobId} until status=completed, failed, or expired.

Synchronous mode: The request blocks until the screenshot is ready (or times out), returning the screenshot URL directly. If it times out, the API returns status=processing, and you can continue polling using the GET endpoint.

FAQ

Q1: How do I capture a protected page?
Use the headers or cookies parameters to pass authentication information.
Q2: Can I use synchronous mode for full-page screenshots?
No, full-page screenshots require asynchronous mode.
Q3: How do I get the final screenshot in async mode?
Poll GET /api/v1/screenshots/{jobId} until status=completed.