Catch Visual Bugs Before Your Users Do

from rendex import Rendex
from pathlib import Path

rendex = Rendex("YOUR_API_KEY")

viewports = [
    {"width": 1440, "height": 900, "name": "desktop"},
    {"width": 768, "height": 1024, "name": "tablet"},
    {"width": 375, "height": 812, "name": "mobile"},
]

for vp in viewports:
    result = rendex.screenshot(
        url="https://staging.myapp.com",
        width=vp["width"],
        height=vp["height"],
        full_page=True,
    )
    Path(f"baseline-{vp['name']}.png").write_bytes(result.image)

import { Rendex } from "rendex"
import { readFileSync, writeFileSync } from "node:fs"
import { PNG } from "pngjs"
import pixelmatch from "pixelmatch"

const rendex = new Rendex("YOUR_API_KEY")

// Capture the current deploy, then diff it against the stored baseline.
const { image } = await rendex.screenshot({
  url: "https://staging.myapp.com",
  width: 1440,
  height: 900,
  fullPage: true,
})

const current = PNG.sync.read(Buffer.from(image))
const baseline = PNG.sync.read(readFileSync("baseline-desktop.png"))
const { width, height } = baseline
const diff = new PNG({ width, height })

const changed = pixelmatch(
  baseline.data, current.data, diff.data, width, height,
  { threshold: 0.1 },
)

writeFileSync("diff-desktop.png", PNG.sync.write(diff))
if (changed > 0) {
  console.error(`Visual regression: ${changed} pixels changed`)
  process.exit(1) // fail the CI job
}