Loading the demo.
pnpm add @quartifex/dailiesNot on npm yet: the first release is pending. The quickstart, API table, browser support and limitations are in the README.
Page under test (scrolls)
A short page with a pinned image-sequence scrub in the middle.
The last chapter.
Canvas and WebGL frames differ slightly between runs and GPUs. Strict comparison fails on that noise; canvas-tolerant mode averages 2 x 2 blocks, raises the colour threshold and allows 1% of pixels, and still fails a real change.
import { test, expect } from "@playwright/test";
import { screenshotChapters, matchSnapshot, captureJank, scrollThrough } from "@quartifex/dailies";
test("every chapter matches its baseline", async ({ page }) => {
await page.goto("/launch");
for (const shot of await screenshotChapters(page)) {
const result = await matchSnapshot(shot.image, `baselines/${shot.chapter.name}.png`, { canvas: true });
expect(result.pass, result.diffFile).toBe(true);
}
const jank = await captureJank(page, () => scrollThrough(page, { durationMs: 2000 }));
expect(jank.slowFrames).toBeLessThan(3);
});