# Website Screenshot Comparison — Visual Diff Tool (`weeknds/screenshot-diff-api`) Actor

Compare two web pages pixel-by-pixel with visual diff overlay. Configurable threshold, dimension matching, match percentage. Playwright + Pillow. For QA visual regression testing, competitor site monitoring, and brand compliance verification.

- **URL**: https://apify.com/weeknds/screenshot-diff-api.md
- **Developed by:** [C R](https://apify.com/weeknds) (community)
- **Categories:** Developer tools, SEO tools
- **Stats:** 2 total users, 1 monthly users, 100.0% runs succeeded, 0 bookmarks
- **User rating**: No ratings yet

## Pricing

$5.00 / 1,000 screenshot comparisons

This Actor is paid per event. You are not charged for the Apify platform usage, but only a fixed price for specific events.

Learn more: https://docs.apify.com/platform/actors/running/actors-in-store#pay-per-event

## What's an Apify Actor?

Actors are web data automations that power AI and operations. They run on the Apify platform to scrape websites, process data, connect APIs, and automate workflows.
In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours,
and optionally produces a well-defined JSON output, datasets with results, or files in key-value store.
In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server.
Actors are written with capital "A".

## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.
The best way to integrate Actors is as follows.

- **AI agents and MCP clients** — the [Apify MCP server](https://docs.apify.com/integrations/mcp.md) at `https://mcp.apify.com` (remote, streamable HTTP, OAuth on first use).
- **Agentic workflows and local Actor development** — [Agent Skills](https://apify.com/.well-known/agent-skills/index.json) with the [Apify CLI](https://docs.apify.com/cli/docs.md): `npm install -g apify-cli`, then `apify login`.
- **JavaScript/TypeScript projects** — the official [JS/TS client](https://docs.apify.com/api/client/js/docs.md): `npm install apify-client`.
- **Python projects** — the official [Python client](https://docs.apify.com/api/client/python/docs.md): `pip install apify-client`.
- **Any other language** — the [REST API](https://docs.apify.com/api/v2.md).

For usage examples, see the [API](#api) section below.

For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt).

# README

## Screenshot Comparison / Visual Diff API

Apify Actor that takes screenshots of two URLs and compares them pixel-by-pixel.

### Input

| Field | Type | Required | Default | Description |
|-------|------|----------|---------|-------------|
| `baselineUrl` | string | ✅ | — | Reference / baseline page URL |
| `compareUrl` | string | ✅ | — | Page to compare against baseline |
| `viewport` | string | ❌ | `desktop` | Viewport preset: `desktop` (1920×1080), `tablet` (768×1024), `mobile` (375×812) |
| `threshold` | number | ❌ | `0.1` | Per-channel pixel difference threshold (0–1) |
| `fullPage` | boolean | ❌ | `false` | Capture full scrollable page height |

### Output

| Field | Type | Description |
|-------|------|-------------|
| `baseline_url` | string | Normalized baseline URL |
| `compare_url` | string | Normalized compare URL |
| `viewport` | string | Viewport preset used |
| `match_percentage` | number | Percentage of matching pixels (0–100) |
| `diff_percentage` | number | Percentage of differing pixels (0–100) |
| `total_pixels` | integer | Total pixels compared |
| `different_pixels` | integer | Number of pixels that differ |
| `threshold` | number | Threshold used |
| `dimensions_match` | boolean | Whether baseline and compare had identical dimensions |
| `diff_image_base64` | string | Base64-encoded PNG diff overlay (red = different) |
| `diff_overlay_url` | string | Public URL to download the diff overlay PNG |
| `baseline_dimensions` | object | `{width, height}` of baseline screenshot |
| `compare_dimensions` | object | `{width, height}` of compare screenshot |
| `warnings` | array | List of warning/error messages |
| `timestamp` | string | ISO 8601 UTC timestamp |
| `success` | boolean | Whether the comparison completed successfully |
| `error` | string | Error message (null on success) |

### Local Development

```bash
## Install dependencies
pip install -r requirements.txt
playwright install chromium --with-deps

## Run locally
python -m src
```

# Actor input Schema

## `baselineUrl` (type: `string`):

The reference / baseline page URL to screenshot.

## `compareUrl` (type: `string`):

The page URL to compare against the baseline.

## `viewport` (type: `string`):

Device viewport dimensions preset.

## `threshold` (type: `number`):

Per-channel difference threshold (0-1). A pixel is counted as different when any RGB channel differs by more than this fraction.

## `fullPage` (type: `boolean`):

If enabled, captures the entire scrollable page height. When disabled, captures only the viewport.

## Actor input object example

```json
{
  "baselineUrl": "https://example.com",
  "compareUrl": "https://example.org",
  "viewport": "desktop",
  "threshold": 0.1,
  "fullPage": false
}
```

# API

You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup.

## JavaScript example

```javascript
import { ApifyClient } from 'apify-client';

// Initialize the ApifyClient with your Apify API token
// Replace the '<YOUR_API_TOKEN>' with your token
const client = new ApifyClient({
    token: '<YOUR_API_TOKEN>',
});

// Prepare Actor input
const input = {
    "baselineUrl": "https://example.com",
    "compareUrl": "https://example.org",
    "threshold": 0.1
};

// Run the Actor and wait for it to finish
const run = await client.actor("weeknds/screenshot-diff-api").call(input);

// Fetch and print Actor results from the run's dataset (if any)
console.log('Results from dataset');
console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
const { items } = await client.dataset(run.defaultDatasetId).listItems();
items.forEach((item) => {
    console.dir(item);
});

// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs

```

## Python example

```python
from apify_client import ApifyClient

# Initialize the ApifyClient with your Apify API token
# Replace '<YOUR_API_TOKEN>' with your token.
client = ApifyClient("<YOUR_API_TOKEN>")

# Prepare the Actor input
run_input = {
    "baselineUrl": "https://example.com",
    "compareUrl": "https://example.org",
    "threshold": 0.1,
}

# Run the Actor and wait for it to finish
run = client.actor("weeknds/screenshot-diff-api").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print("💾 Check your data here: https://console.apify.com/storage/datasets/" + run["defaultDatasetId"])
for item in client.dataset(run["defaultDatasetId"]).iterate_items():
    print(item)

# 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start

```

## CLI example

```bash
echo '{
  "baselineUrl": "https://example.com",
  "compareUrl": "https://example.org",
  "threshold": 0.1
}' |
apify call weeknds/screenshot-diff-api --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "command": "npx",
            "args": [
                "mcp-remote",
                "https://mcp.apify.com/?tools=weeknds/screenshot-diff-api",
                "--header",
                "Authorization: Bearer <YOUR_API_TOKEN>"
            ]
        }
    }
}

```

## OpenAPI specification

Download the OpenAPI definition: https://api.apify.com/v2/actors/OqaMg5SGNAzKccoKv/builds/zFGqQmLTWsH6nHeDc/openapi.json