snapseq

Playwright Test fixtures for scripted screenshot sequences. A sequence is a Playwright test; snapseq adds numbered screenshots per run, sequence and device, env and host selection, one project per device, a snapseq command, and defaults suited to long sequential runs. Everything else is stock Playwright: --headed, --ui, --debug, --trace on, reporters, the VS Code extension. Plugins add to the shots: a label strip above each one, one PDF per sequence, or steady viewport units for snapPage and no motion before a shot.

Quick start

In the app that owns the pages:

pnpm add -D @playwright/test snapseq @snapseq/stabilize
pnpm exec playwright install chromium   # once per machine; under Node 26 run this with Node 22

// snapseq.config.ts
import { defineConfig } from "snapseq";
import { stabilize } from "@snapseq/stabilize";

export default defineConfig({
  envs: { dev: { host: "http://localhost:3000" } },
  plugins: [stabilize()],
});

Without stabilize(), a page with a 100vh section makes snapPage refuse it (the document grew …). With it, the section keeps its height, and motion stops and the pointer leaves the content before each shot.

// snapseq/pricing.seq.ts
import { sequence } from "snapseq";

sequence(async ({ page, seq }) => {
  await page.goto("/pricing");
  await seq.snap();      // 01.png  the viewport
  await seq.snapPage();  // 02.png  the whole page
});

pnpm snapseq

screenshots/2026-10-01 at 04.07.16 PM/pricing/desktop/01.png
screenshots/2026-10-01 at 04.07.16 PM/pricing/desktop/02.png
screenshots/2026-10-01 at 04.07.16 PM/pricing/mobile/01.png
screenshots/2026-10-01 at 04.07.16 PM/pricing/mobile/02.png

Docs

| Page | Answers | | ------------------------------------------- | -------------------------------------------------------------------- | | Getting started | How do I get from an empty app to a PNG? | | Config | How do I set up envs, devices, the dev server, Playwright options? | | Sequences | How do I write a sequence that takes the right shot? | | Running | How do I run it, and what do the outputs and the terminal mean? | | Plugins | How do I add a label strip, a PDF or steady vh units, or write a plugin? | | Examples | Complete sequence files, basic to complex. | | Troubleshooting | Something looks wrong. |

Develop and release

The commands run at the workspace root: see Develop and release. docs/ is the API reference; a public change updates it and gets a changeset.