igrlk-vt-playwright

Playwright capture SDK for visual-testing (uiverify.ai) — the Storybook-independent front door.

Swap one import in your Playwright specs and every test also becomes a visual-regression test: the SDK archives each test's final UI state (the serialized DOM via rrweb plus the bytes of every resource the page loaded), and the control plane replays that archive hermetically and pixel-diffs it — with the same AI intended-vs-regression review as the Storybook path. No Storybook required.

// before
import { test, expect } from "@playwright/test";
// after
import { test, expect } from "igrlk-vt-playwright";

That's it — each test auto-archives its final state. To capture intermediate/named states:

import { test, expect } from "igrlk-vt-playwright";

test("checkout flow", async ({ page, vt }) => {
  await page.goto("/cart");
  await vt.snapshot("cart");
  await page.click("#checkout");
  await expect(page.locator("#confirm")).toBeVisible();
  // final state auto-archived at test end
});

Then assemble the upload bundle and upload it with the vt CLI:

playwright test                    # archives land in vt-archive/ (VT_ARCHIVE_DIR)
node -e "require('igrlk-vt-playwright/finalize').finalizeArchive('vt-archive')"
vt upload --static-dir vt-archive  # (see the vt CLI)

How it works

Capture is deliberately cheap and single-browser — it just serializes the DOM (scripts stripped, so the app's JS never re-runs on replay) and buffers resource bytes. All the fidelity work (determinism, cross-browser, the diff, the AI review) happens on the control plane, off the archive. This package talks to nothing at runtime; it only writes an archive directory the CLI uploads.

Notes

• Peer dependency: @playwright/test (>= 1.40).
• Load the assertions you'll snapshot. Below-the-fold lazy images / content must be loaded (e.g. scroll) before the snapshot, or they replay blank — the same discipline Chromatic asks for.
• Animations: CSS animations freeze on replay; JS/requestAnimationFrame-driven animation is captured at whatever frame is on screen, so pause it (or use prefers-reduced-motion) at the snapshot point for stable diffs.
• The published package name is provisional (igrlk-vt-playwright, matching igrlk-vtcli).