agentic-dev/apps/storybook/tests/visual.spec.ts

import { test, expect } from "@playwright/test";

/**
 * Iterates every story registered in Storybook and takes a screenshot.
 *
 * Storybook exposes its story manifest at /index.json (Storybook 7+). For
 * each entry where `type === "story"`, we navigate to the iframe URL and
 * snapshot.
 *
 * Today the index is empty (no components in the repo). The harness still
 * runs — it just finds zero stories. The moment a story lands, the
 * baseline is captured on first run and subsequent runs diff against it.
 */
type StoryEntry = {
  id: string;
  title: string;
  name: string;
  type: "story" | "docs";
};

async function fetchStoryIndex(baseURL: string): Promise<StoryEntry[]> {
  const res = await fetch(`${baseURL}/index.json`);
  if (!res.ok) return [];
  const json = (await res.json()) as {
    entries?: Record<string, StoryEntry>;
  };
  return Object.values(json.entries ?? {}).filter((e) => e.type === "story");
}

test.describe("Storybook visual regression", () => {
  test("captures a screenshot for every registered story", async ({
    page,
    baseURL,
  }) => {
    const stories = await fetchStoryIndex(baseURL!);
    if (stories.length === 0) {
      test.skip(
        true,
        "No stories registered yet — visual regression harness is inactive until the first story lands.",
      );
      return;
    }
    for (const story of stories) {
      await test.step(`${story.title} — ${story.name}`, async () => {
        await page.goto(`/iframe.html?id=${story.id}&viewMode=story`);
        await page.waitForLoadState("networkidle");
        await expect(page).toHaveScreenshot(`${story.id}.png`);
      });
    }
  });
});