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 { const res = await fetch(`${baseURL}/index.json`); if (!res.ok) return []; const json = (await res.json()) as { entries?: Record; }; 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`); }); } }); });