# 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 Pay per usage This Actor is paid per platform usage. The Actor is free to use, and you only pay for the Apify platform usage, which gets cheaper the higher subscription plan you have. Learn more: https://docs.apify.com/platform/actors/running/actors-in-store#pay-per-usage ## What's an Apify Actor? Actors are a software tools running on the Apify platform, for all kinds of web data extraction and automation use cases. 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. In JavaScript/TypeScript projects, use official [JavaScript/TypeScript client](https://docs.apify.com/api/client/js.md): ```bash npm install apify-client ``` In Python projects, use official [Python client library](https://docs.apify.com/api/client/python.md): ```bash pip install apify-client ``` In shell scripts, use [Apify CLI](https://docs.apify.com/cli/docs.md): ````bash # MacOS / Linux curl -fsSL https://apify.com/install-cli.sh | bash # Windows irm https://apify.com/install-cli.ps1 | iex ```bash In AI frameworks, you might use the [Apify MCP server](https://docs.apify.com/platform/integrations/mcp.md). If your project is in a different language, use 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 '' with your token const client = new ApifyClient({ 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 '' with your token. client = ApifyClient("") # 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 " ] } } } ``` ## OpenAPI specification ```json { "openapi": "3.0.1", "info": { "title": "Website Screenshot Comparison — Visual Diff Tool", "description": "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.", "version": "1.0", "x-build-id": "zFGqQmLTWsH6nHeDc" }, "servers": [ { "url": "https://api.apify.com/v2" } ], "paths": { "/acts/weeknds~screenshot-diff-api/run-sync-get-dataset-items": { "post": { "operationId": "run-sync-get-dataset-items-weeknds-screenshot-diff-api", "x-openai-isConsequential": false, "summary": "Executes an Actor, waits for its completion, and returns Actor's dataset items in response.", "tags": [ "Run Actor" ], "requestBody": { "required": true, "content": { "application/json": { "schema": { "$ref": "#/components/schemas/inputSchema" } } } }, "parameters": [ { "name": "token", "in": "query", "required": true, "schema": { "type": "string" }, "description": "Enter your Apify token here" } ], "responses": { "200": { "description": "OK" } } } }, "/acts/weeknds~screenshot-diff-api/runs": { "post": { "operationId": "runs-sync-weeknds-screenshot-diff-api", "x-openai-isConsequential": false, "summary": "Executes an Actor and returns information about the initiated run in response.", "tags": [ "Run Actor" ], "requestBody": { "required": true, "content": { "application/json": { "schema": { "$ref": "#/components/schemas/inputSchema" } } } }, "parameters": [ { "name": "token", "in": "query", "required": true, "schema": { "type": "string" }, "description": "Enter your Apify token here" } ], "responses": { "200": { "description": "OK", "content": { "application/json": { "schema": { "$ref": "#/components/schemas/runsResponseSchema" } } } } } } }, "/acts/weeknds~screenshot-diff-api/run-sync": { "post": { "operationId": "run-sync-weeknds-screenshot-diff-api", "x-openai-isConsequential": false, "summary": "Executes an Actor, waits for completion, and returns the OUTPUT from Key-value store in response.", "tags": [ "Run Actor" ], "requestBody": { "required": true, "content": { "application/json": { "schema": { "$ref": "#/components/schemas/inputSchema" } } } }, "parameters": [ { "name": "token", "in": "query", "required": true, "schema": { "type": "string" }, "description": "Enter your Apify token here" } ], "responses": { "200": { "description": "OK" } } } } }, "components": { "schemas": { "inputSchema": { "type": "object", "required": [ "baselineUrl", "compareUrl" ], "properties": { "baselineUrl": { "title": "Baseline URL", "type": "string", "description": "The reference / baseline page URL to screenshot." }, "compareUrl": { "title": "Compare URL", "type": "string", "description": "The page URL to compare against the baseline." }, "viewport": { "title": "Viewport Preset", "enum": [ "desktop", "tablet", "mobile" ], "type": "string", "description": "Device viewport dimensions preset.", "default": "desktop" }, "threshold": { "title": "Pixel Difference Threshold", "minimum": 0, "maximum": 1, "type": "number", "description": "Per-channel difference threshold (0-1). A pixel is counted as different when any RGB channel differs by more than this fraction.", "default": 0.1 }, "fullPage": { "title": "Full Page Screenshot", "type": "boolean", "description": "If enabled, captures the entire scrollable page height. When disabled, captures only the viewport.", "default": false } } }, "runsResponseSchema": { "type": "object", "properties": { "data": { "type": "object", "properties": { "id": { "type": "string" }, "actId": { "type": "string" }, "userId": { "type": "string" }, "startedAt": { "type": "string", "format": "date-time", "example": "2025-01-08T00:00:00.000Z" }, "finishedAt": { "type": "string", "format": "date-time", "example": "2025-01-08T00:00:00.000Z" }, "status": { "type": "string", "example": "READY" }, "meta": { "type": "object", "properties": { "origin": { "type": "string", "example": "API" }, "userAgent": { "type": "string" } } }, "stats": { "type": "object", "properties": { "inputBodyLen": { "type": "integer", "example": 2000 }, "rebootCount": { "type": "integer", "example": 0 }, "restartCount": { "type": "integer", "example": 0 }, "resurrectCount": { "type": "integer", "example": 0 }, "computeUnits": { "type": "integer", "example": 0 } } }, "options": { "type": "object", "properties": { "build": { "type": "string", "example": "latest" }, "timeoutSecs": { "type": "integer", "example": 300 }, "memoryMbytes": { "type": "integer", "example": 1024 }, "diskMbytes": { "type": "integer", "example": 2048 } } }, "buildId": { "type": "string" }, "defaultKeyValueStoreId": { "type": "string" }, "defaultDatasetId": { "type": "string" }, "defaultRequestQueueId": { "type": "string" }, "buildNumber": { "type": "string", "example": "1.0.0" }, "containerUrl": { "type": "string" }, "usage": { "type": "object", "properties": { "ACTOR_COMPUTE_UNITS": { "type": "integer", "example": 0 }, "DATASET_READS": { "type": "integer", "example": 0 }, "DATASET_WRITES": { "type": "integer", "example": 0 }, "KEY_VALUE_STORE_READS": { "type": "integer", "example": 0 }, "KEY_VALUE_STORE_WRITES": { "type": "integer", "example": 1 }, "KEY_VALUE_STORE_LISTS": { "type": "integer", "example": 0 }, "REQUEST_QUEUE_READS": { "type": "integer", "example": 0 }, "REQUEST_QUEUE_WRITES": { "type": "integer", "example": 0 }, "DATA_TRANSFER_INTERNAL_GBYTES": { "type": "integer", "example": 0 }, "DATA_TRANSFER_EXTERNAL_GBYTES": { "type": "integer", "example": 0 }, "PROXY_RESIDENTIAL_TRANSFER_GBYTES": { "type": "integer", "example": 0 }, "PROXY_SERPS": { "type": "integer", "example": 0 } } }, "usageTotalUsd": { "type": "number", "example": 0.00005 }, "usageUsd": { "type": "object", "properties": { "ACTOR_COMPUTE_UNITS": { "type": "integer", "example": 0 }, "DATASET_READS": { "type": "integer", "example": 0 }, "DATASET_WRITES": { "type": "integer", "example": 0 }, "KEY_VALUE_STORE_READS": { "type": "integer", "example": 0 }, "KEY_VALUE_STORE_WRITES": { "type": "number", "example": 0.00005 }, "KEY_VALUE_STORE_LISTS": { "type": "integer", "example": 0 }, "REQUEST_QUEUE_READS": { "type": "integer", "example": 0 }, "REQUEST_QUEUE_WRITES": { "type": "integer", "example": 0 }, "DATA_TRANSFER_INTERNAL_GBYTES": { "type": "integer", "example": 0 }, "DATA_TRANSFER_EXTERNAL_GBYTES": { "type": "integer", "example": 0 }, "PROXY_RESIDENTIAL_TRANSFER_GBYTES": { "type": "integer", "example": 0 }, "PROXY_SERPS": { "type": "integer", "example": 0 } } } } } } } } } } ```