DEV Community: PlacePack

Deterministic image fixtures for Playwright and Cypress visual regression tests

PlacePack — Tue, 17 Mar 2026 04:01:52 +0000

Visual regression testing has a dirty secret: most teams run it for a few weeks, then quietly disable it because the false-positive rate becomes unbearable. Images fetched from external URLs are usually the culprit. CDNs get updated. Photos get cropped. Lazy-loading timing changes. None of it is a real regression, but your snapshot diffs say otherwise.

The boring-but-correct solution is to stop relying on external image requests in tests entirely. Commit your placeholder images as local fixtures and never touch them again unless you're deliberately resizing something.

Why external URLs kill snapshot stability

When your component under test renders <img src="https://example.com/photo.jpg" />, at least three things can go wrong in a snapshot run:

Network latency causes the image to not load before the screenshot is taken — you get a broken image icon in your baseline.
The CDN returns a different variant (WebP vs JPEG, different crop, different compression) depending on Accept headers or A/B flags.
The image is updated upstream and now genuinely looks different — but this is noise in your UI test, not a real regression you care about.

The fix: use a local file. Committed to your repo. Never changes unless you run your fixture refresh script.

Generating fixtures with the PlacePack pack endpoint

PlacePack has a POST /api/v1/pack endpoint that accepts a list of labeled sizes and returns a ZIP containing all the images. Use it in a one-time setup script:

// scripts/generate-fixtures.mjs
import { createWriteStream } from "fs";
import { mkdir } from "fs/promises";
import { pipeline } from "stream/promises";
import fetch from "node-fetch"; // or native fetch in Node 18+

const FIXTURES_DIR = "./tests/fixtures/images";

await mkdir(FIXTURES_DIR, { recursive: true });

const res = await fetch("https://placepack.top/api/v1/pack", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    sizes: [
      "hero:1200x630",
      "thumbnail:400x300",
      "avatar:80x80",
      "og-image:1200x630",
      "card:600x400",
    ].join("\n"),
    format: "png",
  }),
});

if (!res.ok) throw new Error(`Pack API error: ${res.status}`);

// The response is a ZIP file
const dest = createWriteStream(`${FIXTURES_DIR}/placeholders.zip`);
await pipeline(res.body, dest);

console.log("Fixtures written to", FIXTURES_DIR);

Then unzip and commit the PNGs. Add a yarn fixtures script to package.json so any team member can refresh them:

{
  "scripts": {
    "fixtures": "node scripts/generate-fixtures.mjs && unzip -o tests/fixtures/images/placeholders.zip -d tests/fixtures/images && rm tests/fixtures/images/placeholders.zip"
  }
}

The resulting files will be named after your labels: hero.png, thumbnail.png, avatar.png, etc. Exact, reproducible, no network required at test time.

Playwright test using local fixtures

// tests/product-card.spec.ts
import { test, expect } from "@playwright/test";
import path from "path";

const FIXTURES = path.resolve(__dirname, "fixtures/images");

test("ProductCard renders correctly", async ({ page }) => {
  // Intercept the image request and serve the local fixture instead
  await page.route("**/images/product-thumb**", (route) => {
    route.fulfill({ path: `${FIXTURES}/thumbnail.png` });
  });

  await page.goto("/components/product-card");
  await page.waitForLoadState("networkidle");

  await expect(page).toMatchSnapshot("product-card.png");
});

Or if you control the component props directly (e.g., Playwright Component Testing):

// tests/components/ProductCard.spec.tsx
import { test, expect } from "@playwright/experimental-ct-react";
import { ProductCard } from "../../src/components/ProductCard";
import path from "path";

const thumb = path.resolve(__dirname, "../fixtures/images/thumbnail.png");

test("renders product card", async ({ mount }) => {
  const component = await mount(
    <ProductCard
      title="Wireless Headphones"
      price="$79"
      image={`file://${thumb}`}
    />
  );
  await expect(component).toMatchSnapshot();
});

Cypress test using local fixtures

Cypress makes this even simpler — just drop the fixtures in cypress/fixtures/ and serve them via cy.intercept:

// cypress/e2e/product-card.cy.js
describe("ProductCard", () => {
  it("renders with placeholder image", () => {
    cy.intercept("GET", "**/product-thumb*", {
      fixture: "images/thumbnail.png",
    });

    cy.visit("/components/product-card");
    cy.get("[data-testid=product-card]").matchImageSnapshot("product-card");
  });
});

Or reference the fixture file directly in a component stub:

// cypress/support/commands.js
Cypress.Commands.add("mountWithFixtures", (Component, props) => {
  const fixturePath = (name) => `/cypress/fixtures/images/${name}.png`;
  cy.mount(<Component {...props} image={fixturePath("thumbnail")} />);
});

Refreshing fixtures intentionally

The whole point of committed fixtures is that they don't change accidentally. But you will occasionally need to resize something or add a new image size. The workflow:

Update the sizes list in scripts/generate-fixtures.mjs
Run yarn fixtures
Review the diff — new or changed PNG files should show up in git status
Commit with a message like chore: refresh image fixtures (added banner:800x200)

This makes fixture changes intentional and reviewable, exactly the same way you'd treat any other committed asset.

The PlacePack API is rate-limited to 30 requests per 60 seconds, but the pack endpoint counts as a single request regardless of how many images are in the ZIP. For typical fixture sets (under 20 images), you'll never come close to the limit.

Try it

The fastest way to preview your fixture images before committing them: open placepack.top, enter your sizes and labels, and download the ZIP directly from the generator UI.

For more on this setup — including a GitHub Actions step that auto-generates fixtures on PRs that touch image sizes — see placepack.top/visual-regression.

Deterministic image fixtures for Playwright and Cypress visual regression tests

PlacePack — Tue, 17 Mar 2026 03:49:27 +0000

Why external URLs kill snapshot stability

When your component under test renders <img src="https://example.com/photo.jpg" />, at least three things can go wrong in a snapshot run:

Network latency causes the image to not load before the screenshot is taken — you get a broken image icon in your baseline.
The CDN returns a different variant (WebP vs JPEG, different crop, different compression) depending on Accept headers or A/B flags.
The image is updated upstream and now genuinely looks different — but this is noise in your UI test, not a real regression you care about.

The fix: use a local file. Committed to your repo. Never changes unless you run your fixture refresh script.

Generating fixtures with the PlacePack pack endpoint

PlacePack has a POST /api/v1/pack endpoint that accepts a list of labeled sizes and returns a ZIP containing all the images. Use it in a one-time setup script:

// scripts/generate-fixtures.mjs
import { createWriteStream } from "fs";
import { mkdir } from "fs/promises";
import { pipeline } from "stream/promises";
import fetch from "node-fetch"; // or native fetch in Node 18+

const FIXTURES_DIR = "./tests/fixtures/images";

await mkdir(FIXTURES_DIR, { recursive: true });

const res = await fetch("https://placepack.top/api/v1/pack", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    sizes: [
      "hero:1200x630",
      "thumbnail:400x300",
      "avatar:80x80",
      "og-image:1200x630",
      "card:600x400",
    ].join("\n"),
    format: "png",
  }),
});

if (!res.ok) throw new Error(`Pack API error: ${res.status}`);

// The response is a ZIP file
const dest = createWriteStream(`${FIXTURES_DIR}/placeholders.zip`);
await pipeline(res.body, dest);

console.log("Fixtures written to", FIXTURES_DIR);

Then unzip and commit the PNGs. Add a yarn fixtures script to package.json so any team member can refresh them:

{
  "scripts": {
    "fixtures": "node scripts/generate-fixtures.mjs && unzip -o tests/fixtures/images/placeholders.zip -d tests/fixtures/images && rm tests/fixtures/images/placeholders.zip"
  }
}

The resulting files will be named after your labels: hero.png, thumbnail.png, avatar.png, etc. Exact, reproducible, no network required at test time.

Playwright test using local fixtures

// tests/product-card.spec.ts
import { test, expect } from "@playwright/test";
import path from "path";

const FIXTURES = path.resolve(__dirname, "fixtures/images");

test("ProductCard renders correctly", async ({ page }) => {
  // Intercept the image request and serve the local fixture instead
  await page.route("**/images/product-thumb**", (route) => {
    route.fulfill({ path: `${FIXTURES}/thumbnail.png` });
  });

  await page.goto("/components/product-card");
  await page.waitForLoadState("networkidle");

  await expect(page).toMatchSnapshot("product-card.png");
});

Or if you control the component props directly (e.g., Playwright Component Testing):

// tests/components/ProductCard.spec.tsx
import { test, expect } from "@playwright/experimental-ct-react";
import { ProductCard } from "../../src/components/ProductCard";
import path from "path";

const thumb = path.resolve(__dirname, "../fixtures/images/thumbnail.png");

test("renders product card", async ({ mount }) => {
  const component = await mount(
    <ProductCard
      title="Wireless Headphones"
      price="$79"
      image={`file://${thumb}`}
    />
  );
  await expect(component).toMatchSnapshot();
});

Cypress test using local fixtures

Cypress makes this even simpler — just drop the fixtures in cypress/fixtures/ and serve them via cy.intercept:

// cypress/e2e/product-card.cy.js
describe("ProductCard", () => {
  it("renders with placeholder image", () => {
    cy.intercept("GET", "**/product-thumb*", {
      fixture: "images/thumbnail.png",
    });

    cy.visit("/components/product-card");
    cy.get("[data-testid=product-card]").matchImageSnapshot("product-card");
  });
});

Or reference the fixture file directly in a component stub:

// cypress/support/commands.js
Cypress.Commands.add("mountWithFixtures", (Component, props) => {
  const fixturePath = (name) => `/cypress/fixtures/images/${name}.png`;
  cy.mount(<Component {...props} image={fixturePath("thumbnail")} />);
});

Refreshing fixtures intentionally

The whole point of committed fixtures is that they don't change accidentally. But you will occasionally need to resize something or add a new image size. The workflow:

Update the sizes list in scripts/generate-fixtures.mjs
Run yarn fixtures
Review the diff — new or changed PNG files should show up in git status
Commit with a message like chore: refresh image fixtures (added banner:800x200)

This makes fixture changes intentional and reviewable, exactly the same way you'd treat any other committed asset.

Try it

The fastest way to preview your fixture images before committing them: open placepack.top, enter your sizes and labels, and download the ZIP directly from the generator UI.

For more on this setup — including a GitHub Actions step that auto-generates fixtures on PRs that touch image sizes — see placepack.top/visual-regression.

Stop hardcoding image URLs in your Storybook stories

PlacePack — Tue, 17 Mar 2026 03:49:03 +0000

If you've ever run Chromatic or Percy on a Storybook that pulls images from Lorem Picsum, you know the pain. Every snapshot run fetches a different image. Your baseline diffs never settle. You end up suppressing noise instead of catching real regressions. It's a slow leak that eventually makes your visual testing pipeline worthless.

The fix is boring: use deterministic image URLs. Every run, same image. No surprises.

The problem with random placeholder URLs

Here's a typical story using Lorem Picsum:

// ProductCard.stories.jsx
export const Default = {
  args: {
    title: "Wireless Headphones",
    price: "$79",
    image: "https://picsum.photos/400/300", // different image every time
  },
};

picsum.photos/400/300 serves a random photo on every request. That's fine for visual design work, but it means every snapshot run is comparing against a different image. Your visual diff tool flags the image as changed — because it is changed — and your team either ignores the alert or spends 10 minutes confirming it's noise.

Some teams work around this by seeding Picsum with a fixed ID (picsum.photos/id/42/400/300), but now you're hardcoding a photo of a random European city in your card component stories. That's weird, and it'll break if that photo ever gets removed.

The after: PlacePack API URLs

PlacePack generates placeholder images with labeled dimensions and customizable colors. More importantly: the same URL always returns the same image. It's a pure function over its inputs.

// ProductCard.stories.jsx
export const Default = {
  args: {
    title: "Wireless Headphones",
    price: "$79",
    image: "https://placepack.top/api/v1/product-card:400x300.svg",
  },
};

The label (product-card) renders inside the placeholder. The dimensions are baked in. Run this story 1000 times — same SVG, same pixels, no diff noise.

For PNG snapshots (Chromatic, Percy, Playwright Component Testing), use .png instead:

image: "https://placepack.top/api/v1/product-card:400x300.png"

Real-world example: a component with multiple image slots

Here's a HeroSection story that uses PlacePack for both the hero background and the author avatar:

// HeroSection.stories.jsx
import { HeroSection } from "../components/HeroSection";

const BASE = "https://placepack.top/api/v1";

export default {
  title: "Marketing/HeroSection",
  component: HeroSection,
};

export const Default = {
  args: {
    backgroundImage: `${BASE}/hero-bg:1200x630.png`,
    authorAvatar: `${BASE}/avatar:80x80.png`,
    authorName: "Jane Smith",
    headline: "Ship faster with better placeholders",
  },
};

export const DarkTheme = {
  args: {
    ...Default.args,
    backgroundImage: `${BASE}/hero-bg:1200x630.png?bg=1a1a2e&color=ffffff`,
    authorAvatar: `${BASE}/avatar:80x80.png?bg=1a1a2e&color=ffffff`,
  },
};

The URL parameters bg and color let you customize the fill and text color to match your brand or theme — still deterministic, still stable.

Using the presets endpoint

If you're setting up Storybook for a new project and aren't sure what sizes to use, hit the presets endpoint:

curl https://placepack.top/api/v1/presets

It returns named presets for common use cases — hero banners, thumbnails, avatars, open graph images — with the exact dimensions already filled in. You can use those names directly in your API URLs:

// generate-story-fixtures.mjs
const res = await fetch("https://placepack.top/api/v1/presets");
const { presets } = await res.json();

// presets.storybook contains the sizes relevant to Storybook stories
console.log(presets.storybook);
// [{ label: "hero", width: 1200, height: 630 }, { label: "thumb", width: 400, height: 300 }, ...]

You can run this script once to generate a fixtures.js file that exports all your placeholder URLs keyed by name:

// scripts/generate-placeholders.mjs
import { writeFileSync } from "fs";

const res = await fetch("https://placepack.top/api/v1/presets");
const { presets } = await res.json();

const storybook = presets.storybook ?? [];
const urls = Object.fromEntries(
  storybook.map(({ label, width, height }) => [
    label,
    `https://placepack.top/api/v1/${label}:${width}x${height}.png`,
  ])
);

writeFileSync(
  "src/test-utils/placeholders.js",
  `export const placeholders = ${JSON.stringify(urls, null, 2)};\n`
);

Then import it everywhere:

import { placeholders } from "@/test-utils/placeholders";

export const Default = {
  args: { image: placeholders.thumb },
};

A note on network access in CI

If your Storybook CI environment blocks outbound requests, you have two options:

Use the pack endpoint to download PNG/SVG files locally and commit them as fixtures (covered in the visual regression article).
Allow outbound HTTPS to placepack.top — the API is free, no key needed, and rate-limited to 30 requests per 60 seconds, which is plenty for a story build.

The API requires no authentication. No signup, no token rotation, no surprise 402s because you hit a free tier ceiling.

Try it

The quickest way to see what your stories will look like: open the generator at placepack.top, type a label and size, pick your colors, and copy the API URL directly.

More Storybook-specific guidance — including a Storybook decorator that auto-replaces broken image src values — lives at placepack.top/storybook.