52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
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`);
|
|
});
|
|
}
|
|
});
|
|
});
|