# Masked Visual Change Receipts (`muazah/visual-change-receipts`) Actor

- **URL**: https://apify.com/muazah/visual-change-receipts.md
- **Developed by:** [muazah](https://apify.com/muazah) (community)
- **Categories:** Developer tools
- **Stats:** 2 total users, 1 monthly users, 100.0% runs succeeded, 0 bookmarks
- **User rating**: No ratings yet

## Pricing

$12.00 / 1,000 viewport receipt (compare or baseline)s

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/actors/running/actors-in-store.md#pay-per-event

## What's an Apify Actor?

An Actor is a serverless cloud program that runs on the Apify platform. It has two run modes.
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.

Apify vocabulary and the platform model are defined once, in the agent quickstart at https://apify.com/agents.md.

## 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.

Do not guess an integration path. Every one of them is in the agent quickstart at https://apify.com/agents.md: the Apify MCP server, Agent Skills with the Apify CLI, the JavaScript and Python clients, the REST API, and the account-free path for an agent with no human to sign in. It also carries the rule on stating cost before the first paid run.

For examples already wired to this Actor's own input schema, see the [API](#api) section below.

Each client library has reference documentation the quickstart does not restate: [JavaScript/TypeScript](https://docs.apify.com/api/client/js/docs.md) (`npm install apify-client`) and [Python](https://docs.apify.com/api/client/python/docs.md) (`pip install apify-client`).

# README

## Masked Visual Change Receipts

A change receipt, not a site-broken verdict: pinned-Chromium viewport screenshots compared against explicit named baselines, with your declared masks shown and counted.

### What it does

- Captures pages in a fresh browser context at fixed viewport sizes, device scale, locale, timezone and color scheme - same environment every run, animations frozen, fonts awaited, optional ready selector.
- Caller-declared mask selectors (max 20) exclude clocks, timestamps and personalized widgets. Masked regions render in magenta on the diff image, matched element counts are reported, and masks are excluded from both the changed-pixel count and its denominator. Missing selectors produce warnings, never silent passes.
- Pixel-diff evidence: changed pixels, compared pixels, changed percent against your declared policy cap. Statuses: UNCHANGED, CHANGED\_WITHIN\_POLICY, CHANGED\_OVER\_POLICY (over your percent, not "site broken").
- Explicit named baselines: capture-baseline stores a named revision; compare never auto-replaces. Environment fingerprint (browser version, viewport, scale, color scheme, masks) must match exactly or comparison is refused as INCOMPATIBLE - never resized, never false-passed.
- Current and diff PNGs in your run's key-value store; baseline reference named on each receipt. Artifacts stay in your private runs.

### Honest limits

- Pixel difference does not prove a layout break or accessibility defect, and a passing screenshot does not prove a selector still exists.
- Ads, A-B tests and time-based content are not guaranteed stable between runs; that is what masks are for.
- Public HTTPS pages only, max 5 pages x 2 viewports (10 captures) per run, full-page opt-in capped at 8,000 px. You must be authorized to capture the pages you point it at.
- No credentials, cookies or custom scripts; no auto-clicking consent or checkout controls.

### Input

```json
{
  "pages": [{"id": "home", "url": "https://yoursite.com", "baselineKey": "home-v1"}],
  "viewports": [{"width": 390, "height": 844}, {"width": 1365, "height": 768}],
  "maskSelectors": [".timestamp"],
  "maxChangedPercent": 1,
  "mode": "compare",
  "fullPage": false
}
```

### Output

viewport\_receipt rows with status, pixel counts and masks, plus current/diff PNG artifacts and a run summary.

### Billing

Pay per successful URL/viewport comparison or baseline capture. Failed captures, missing baselines and incompatible fingerprints are not charged.

# Actor input Schema

## `pages` (type: `array`):

Up to 5 public HTTPS pages you are authorized to capture. Each needs id, url, baselineKey (an explicit named revision you manage).

## `viewports` (type: `array`):

Up to 2 viewport sizes, e.g. \[{"width":390,"height":844},{"width":1365,"height":768}]. pages x viewports must be <= 10 captures.

## `maskSelectors` (type: `array`):

Up to 20 CSS selectors for regions to exclude (clocks, timestamps, personalized widgets). Masked regions show in magenta on diff images, are counted, and are excluded from the changed-pixel denominator. Missing selectors produce warnings, never silent passes.

## `maxChangedPercent` (type: `number`):

Your declared policy cap. Over it: CHANGED\_OVER\_POLICY (not 'site broken'). Default 1.

## `mode` (type: `string`):

capture-baseline stores an explicit named revision; compare never auto-replaces baselines.

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

Viewport-only by default to cap memory. Full-page opt-in is capped at 8,000 px height and requires identical dimensions on both sides.

## `readySelector` (type: `string`):

CSS selector to wait for (15s timeout) before capturing. Missing selector adds a readiness warning.

## `monitorKey` (type: `string`):

Namespaces stored baselines.

## Actor input object example

```json
{
  "pages": [
    {
      "id": "example",
      "url": "https://example.com",
      "baselineKey": "example-v1"
    }
  ],
  "viewports": [
    {
      "width": 390,
      "height": 844
    }
  ],
  "maskSelectors": [],
  "maxChangedPercent": 1,
  "mode": "compare",
  "monitorKey": "default"
}
```

# Actor output Schema

## `receiptRows` (type: `string`):

Statuses: BASELINE\_CAPTURED / UNCHANGED / CHANGED\_WITHIN\_POLICY / CHANGED\_OVER\_POLICY / INCOMPATIBLE / INCOMPLETE, with pixel counts, masks and warnings.

## `summary` (type: `string`):

Mode, capture count, billable receipts, counts by status, browser version.

# 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 = {
    "pages": [
        {
            "id": "example",
            "url": "https://example.com",
            "baselineKey": "example-v1"
        }
    ],
    "viewports": [
        {
            "width": 390,
            "height": 844
        }
    ],
    "maskSelectors": [],
    "maxChangedPercent": 1,
    "mode": "compare",
    "fullPage": false,
    "monitorKey": "default"
};

// Run the Actor and wait for it to finish
const run = await client.actor("muazah/visual-change-receipts").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 = {
    "pages": [{
            "id": "example",
            "url": "https://example.com",
            "baselineKey": "example-v1",
        }],
    "viewports": [{
            "width": 390,
            "height": 844,
        }],
    "maskSelectors": [],
    "maxChangedPercent": 1,
    "mode": "compare",
    "fullPage": False,
    "monitorKey": "default",
}

# Run the Actor and wait for it to finish
run = client.actor("muazah/visual-change-receipts").call(run_input=run_input)

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

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

```

## CLI example

```bash
echo '{
  "pages": [
    {
      "id": "example",
      "url": "https://example.com",
      "baselineKey": "example-v1"
    }
  ],
  "viewports": [
    {
      "width": 390,
      "height": 844
    }
  ],
  "maskSelectors": [],
  "maxChangedPercent": 1,
  "mode": "compare",
  "fullPage": false,
  "monitorKey": "default"
}' |
apify call muazah/visual-change-receipts --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "type": "http",
            "url": "https://mcp.apify.com/?tools=fetch-actor-details,muazah/visual-change-receipts"
        }
    }
}
```

The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer <APIFY_API_TOKEN>` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations).

## OpenAPI specification

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