webview-preview 0.0.1 → 1.1.0

package/bin/webview-preview.mjs

@@ -1,8 +1,25 @@
 #!/usr/bin/env node
 import { readFileSync } from "node:fs";
-import { cleanSnapshots, ENGINES, preview } from "#src/index.mjs";
+import { cleanSnapshots, ENGINES, preview, watchPreview } from "#src/index.mjs";
 
-const FLAGS = { "--engine": "engine", "--size": "size", "--out": "out", "--prefix": "prefix", "--scale": "scale", "--config": "config", "--base-url": "baseUrl", "--snap-margin": "snapMargin", "--baseline": "baseline", "--max-diff-pixels": "maxDiffPixels", "--compare-tolerance": "compareTolerance", "--older-than": "olderThan", "--wait-timeout": "waitTimeout" }
+const FLAGS = {
+	"--engine": "engine",
+	"--size": "size",
+	"--out": "out",
+	"--prefix": "prefix",
+	"--scale": "scale",
+	"--config": "config",
+	"--base-url": "baseUrl",
+	"--snap-margin": "snapMargin",
+	"--baseline": "baseline",
+	"--max-diff-pixels": "maxDiffPixels",
+	"--compare-tolerance": "compareTolerance",
+	"--older-than": "olderThan",
+	"--wait-timeout": "waitTimeout",
+	"--locale": "locale",
+	"--color-scheme": "colorScheme",
+	"--latency": "latency"
+}
 const LIST_FLAGS = { "--init": "init", "--init-file": "initFile", "--mock-file": "mockFile" }
 
 const HELP = `Usage: webview-preview [route-or-url] [steps...] [options]
@@ -19,16 +36,26 @@ Steps:
   snap:<name>      save <out>/<prefix><name>.png
   print:<expr>     print the value of an expression
   measure:<css selector>  print size, position, box, visibility, font and text of the element
+  assert:<expr>    check that the expression is truthy; if not, print why and exit with 1
+  focusorder[:<n>] press Tab n times (default 20) and print where focus went; shows when it loops
+  film:<name>:<ms>[/<n>][@<css selector>]  n frames (default 10) over ms, from now, into one
+                   <out>/<prefix><name>.png, 5 per row; with a selector, cropped to where the element was
   resize:<WxH>     resize the window
   snap:<name>@<css selector>  save only that element (plus --snap-margin)
   key:<key>        press a key: Tab, Shift+Tab, Enter, Escape, ArrowDown, Control+a, x …
   type:<text>      type text with the keyboard
   hover:<css selector>  move the mouse to the element's centre
   click:<css selector>  click the element's centre with the mouse
+  offline / online go offline or back: navigator.onLine, online/offline events, fetch and XHR fail
+  latency:<ms>     delay every fetch/XHR request by ms (0 turns it off)
+  macro:<name>     run the steps of a macro from the config (macros: { name: [...] })
 
 Options:
   --engine <name>  ${ENGINES.join(" | ")} (default: auto)
-  --size <WxH>     window size in CSS pixels (default: 1200x650)
+  --size <WxH>     window size in CSS pixels (default: 1200x650); several sizes, comma-separated
+                   (1200x650,800x600), run the steps once per size into <prefix><WxH>-<name>.png
+  --color-scheme <light|dark>  prefers-color-scheme for the page (default: the system's)
+  --reduced-motion prefers-reduced-motion: reduce
   --out <dir>      folder for snapshots (default: .webview-preview)
   --prefix <text>  file name prefix (default: "<engine>-")
   --scale <n>      device pixel ratio for Playwright engines (default: 1); WebKitGTK renders
@@ -37,6 +64,8 @@ Options:
   --headed         WebKitGTK: show a real window instead of rendering off-screen
   --wait-timeout <ms>  how long waitfor waits (default: 10000)
   --keep-storage   WebKitGTK: keep localStorage, cookies and cache between runs (default: start clean)
+  --report         write <out>/report.html: the output and every snapshot, with baseline and
+                   difference next to it after --compare
   --compare        compare every snapshot with the baseline of the same name (a missing one is created)
   --update-baseline  replace the baselines with this run's snapshots
   --baseline <dir> baseline folder (default: webview-preview-baseline)
@@ -48,6 +77,14 @@ Options:
   --mock-file <f>  answer fetch/XHR requests from a .json/.mjs file of mocks (repeatable);
                    every request is listed in window.__webviewPreviewRequests
   --log-requests   only list fetch/XHR requests in window.__webviewPreviewRequests
+  --tauri          stub the Tauri bridge (invoke, events, window); answers come from
+                   tauri.commands in the config, anything else gets null
+  --locale <tag>   navigator.language for the page: en-US, ru-RU … (Playwright: also Intl)
+  --offline        start offline (the page itself still loads)
+  --latency <ms>   delay every fetch/XHR request from the start
+  --watch          run again whenever a file changes (the config's watch, default src/ or the config's folder,
+                   plus the config file); the server stays up between runs
+  --fail-on-error  exit with 1 when the page logged console.error or threw (they are always printed)
   --config <file>  config file (default: webview-preview.config.{mjs,js,json})
   --no-config      ignore config files
 
@@ -83,6 +120,30 @@ const parseArgs = argv => {
 			options.headed = true;
 			continue;
 		}
+		if (arg === "--report") {
+			options.report = true;
+			continue;
+		}
+		if (arg === "--watch") {
+			options.isWatching = true;
+			continue;
+		}
+		if (arg === "--offline") {
+			options.offline = true;
+			continue;
+		}
+		if (arg === "--reduced-motion") {
+			options.reducedMotion = true;
+			continue;
+		}
+		if (arg === "--fail-on-error") {
+			options.failOnError = true;
+			continue;
+		}
+		if (arg === "--tauri") {
+			options.tauri = true;
+			continue;
+		}
 		if (arg === "--log-requests") {
 			options.logRequests = true;
 			continue;
@@ -129,7 +190,18 @@ try {
 		console.log(`${cleanOptions.dryRun ? "would delete" : "deleted"} ${removed.length} snapshot(s) in ${out}`);
 		process.exit(0);
 	}
-	const result = await preview(parsed.options);
+	const { isWatching, ...previewOptions } = parsed.options;
+	if (isWatching) {
+		const stop = await watchPreview(previewOptions, result => {
+			for (const file of result.saved) console.log(file);
+		});
+		for (const signal of ["SIGINT", "SIGTERM", "SIGHUP"]) process.once(signal, () => {
+			stop();
+			process.exit(0);
+		});
+		await new Promise(() => {});
+	}
+	const result = await preview(previewOptions);
 	for (const file of result.saved) console.log(file);
 	process.exit(result.failed ? 1 : 0);
 } catch (error) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "webview-preview",
-	"version": "0.0.1",
+	"version": "1.1.0",
 	"description": "Open your UI in the engine your desktop app really runs on (WebKitGTK, Edge/WebView2, WebKit), drive it with steps and save PNG snapshots.",
 	"license": "MIT",
 	"author": "n0t4u404",
@@ -30,6 +30,9 @@
 	"imports": {
 		"#src/*": "./src/*"
 	},
+	"scripts": {
+		"test": "node --test"
+	},
 	"bin": {
 		"webview-preview": "bin/webview-preview.mjs"
 	},

package/src/core/config.mjs

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync } from "node:fs";
+import { existsSync, readFileSync, statSync } from "node:fs";
 import path from "node:path";
 import { pathToFileURL } from "node:url";
 
@@ -10,7 +10,8 @@ export const loadConfig = async (configPath, cwd = process.cwd()) => {
 		: CONFIG_FILES.map(name => path.join(cwd, name)).find(candidate => existsSync(candidate));
 	if (!file) return {}
 	if (!existsSync(file)) throw new Error(`Config not found: ${file}`);
-	if (file.endsWith(".json")) return { ...JSON.parse(readFileSync(file, "utf8")), configDir: path.dirname(file) }
-	const module = await import(pathToFileURL(file).href);
-	return { ...(module.default ?? module), configDir: path.dirname(file) }
+	const where = { configDir: path.dirname(file), configFile: file }
+	if (file.endsWith(".json")) return { ...JSON.parse(readFileSync(file, "utf8")), ...where }
+	const module = await import(`${pathToFileURL(file).href}?mtime=${statSync(file).mtimeMs}`);
+	return { ...(module.default ?? module), ...where }
 }

package/src/core/steps.mjs

@@ -1,10 +1,19 @@
+import { NETWORK_STEPS, networkStep } from "#src/page/network.mjs";
+
 export const LOAD_SETTLE_MS = 1500;
 export const JS_SETTLE_MS = 700;
 export const TIMEOUT_MS = 30000;
 export const WAIT_FOR_TIMEOUT_MS = 10000;
 export const WAIT_FOR_POLL_MS = 50;
 
-const STEP_KINDS = new Set(["js", "jsnow", "wait", "waitfor", "snap", "print", "measure", "resize", "key", "type", "hover", "click"]);
+const STEP_KINDS = new Set(["js", "jsnow", "wait", "waitfor", "snap", "print", "measure", "assert", "focusorder", "resize", "key", "type", "hover", "click", "offline", "online", "latency", "film"]);
+export const ASSERT_MARKER = "__webviewPreviewAssert:";
+export const FOCUS_MARKER = "__webviewPreviewFocus:";
+const FOCUS_ORDER_DEFAULT = 20;
+const FOCUS_ORDER_MAX = 200;
+const FILM = /^([^:@]+):(\d+)(?:\/(\d+))?(?:@(.+))?$/s;
+const FILM_FRAMES_DEFAULT = 10;
+const FILM_FRAMES_MAX = 60;
 const MODIFIERS = { Shift: "Shift", Control: "Control", Ctrl: "Control", Alt: "Alt", Meta: "Meta" }
 export const KEY_NAMES = [
 	"Tab", "Enter", "Escape", "Backspace", "Delete", "Insert", "Space", "Home", "End", "PageUp", "PageDown",
@@ -82,6 +91,53 @@ const MEASURE_FUNCTION = `(selector, query, isVisible) => {
 	].join(" · ");
 }`;
 
+const assertExpression = expression => `(() => {
+	const show = value => {
+		if (typeof value === "string") return JSON.stringify(value);
+		if (typeof Node !== "undefined" && value instanceof Node) return value.nodeType === 1 ? value.outerHTML.slice(0, 120) : String(value.nodeName);
+		try {
+			return JSON.stringify(value) ?? String(value);
+		} catch {
+			return String(value);
+		}
+	}
+	const report = problem => ${JSON.stringify(ASSERT_MARKER)} + JSON.stringify([${JSON.stringify(expression)}, problem]);
+	try {
+		const value = (${expression});
+		return report(value ? null : "got " + show(value));
+	} catch (error) {
+		return report("threw " + (error && error.message || error));
+	}
+})()`;
+
+const FOCUS_DESCRIBE = `(() => {
+	const element = document.activeElement;
+	if (!element || element === document.body || element === document.documentElement) return ${JSON.stringify(FOCUS_MARKER)} + JSON.stringify(["item", null]);
+	const tag = element.tagName.toLowerCase();
+	const role = element.getAttribute("role");
+	const name = element.getAttribute("name");
+	const type = tag === "input" ? element.getAttribute("type") : null;
+	const label = (element.getAttribute("aria-label") || (element.labels && element.labels[0] ? element.labels[0].innerText : "") || element.getAttribute("placeholder") || element.innerText || element.value || element.getAttribute("title") || "").replace(/\\s+/g, " ").trim().slice(0, 40);
+	const parts = [tag + (role ? "[role=" + role + "]" : "") + (name ? "[name=" + name + "]" : "") + (type ? "[type=" + type + "]" : "")];
+	if (element.id && !/^(:|_r_|«)/.test(element.id)) parts[0] += "#" + element.id;
+	if (label) parts.push(JSON.stringify(label));
+	const dialog = element.closest("[role=dialog], dialog");
+	if (dialog) parts.push("in dialog");
+	const path = [];
+	for (let node = element; node && node.nodeType === 1; node = node.parentElement) path.unshift(node.tagName + ":" + [...(node.parentElement ? node.parentElement.children : [])].indexOf(node));
+	return ${JSON.stringify(FOCUS_MARKER)} + JSON.stringify(["item", parts.join(" "), path.join("/")]);
+})()`;
+
+const focusOrderSteps = (value, step) => {
+	const count = value === "" ? FOCUS_ORDER_DEFAULT : Number(value);
+	if (!Number.isInteger(count) || count < 1 || count > FOCUS_ORDER_MAX) throw new Error(`focusorder takes how many Tab presses, 1-${FOCUS_ORDER_MAX}, got "${step}"`);
+	return [
+		{ kind: "print", value: `${JSON.stringify(FOCUS_MARKER)} + JSON.stringify(["start", ${count}])` },
+		...Array.from({ length: count }, () => [{ kind: "key", value: "Tab", key: "Tab", modifiers: [] }, { kind: "print", value: FOCUS_DESCRIBE }]).flat(),
+		{ kind: "print", value: `${JSON.stringify(FOCUS_MARKER)} + JSON.stringify(["end"])` }
+	];
+}
+
 const measureExpression = selector => `(${MEASURE_FUNCTION})(${JSON.stringify(selector)}, ${QUERY_FUNCTION}, ${VISIBLE_FUNCTION})`;
 
 const rectExpression = (selector, isScrolled) => `(() => {
@@ -101,6 +157,16 @@ const rectExpression = (selector, isScrolled) => `(() => {
 	return JSON.stringify({ x: rect.left, y: rect.top, width: rect.width, height: rect.height });
 })()`;
 
+const filmStep = (value, step) => {
+	const match = FILM.exec(value);
+	if (!match) throw new Error(`film needs name:ms, like film:open:400@[role=dialog], got "${step}"`);
+	const [, name, durationMs, count, selector] = match;
+	const frames = Number(count ?? FILM_FRAMES_DEFAULT);
+	if (frames < 2 || frames > FILM_FRAMES_MAX) throw new Error(`film takes 2 to ${FILM_FRAMES_MAX} frames, got "${step}"`);
+	const film = { kind: "film", value: name, durationMs: Number(durationMs), frames }
+	return selector ? { ...film, selector, rect: rectExpression(selector, false) } : film;
+}
+
 const parseKey = combo => {
 	const parts = combo.split("+");
 	const key = parts.pop();
@@ -112,17 +178,30 @@ const parseKey = combo => {
 	return { key, modifiers }
 }
 
+export const expandMacros = (steps, macros = {}, trail = []) => steps.flatMap(step => {
+	if (!step.startsWith("macro:")) return [step];
+	const name = step.slice(6);
+	if (!Object.hasOwn(macros, name)) {
+		const known = Object.keys(macros);
+		throw new Error(`Unknown macro "${name}". Macros: ${known.length ? known.join(", ") : "none — add them to macros in the config"}`);
+	}
+	if (trail.includes(name)) throw new Error(`macro:${name} uses itself: ${[...trail, name].join(" → ")}`);
+	const body = macros[name];
+	if (!Array.isArray(body) || !body.every(item => typeof item === "string")) throw new Error(`macro "${name}" must be a list of steps`);
+	return expandMacros(body, macros, [...trail, name]);
+})
+
 export const parseSize = value => {
 	const match = /^(\d+)x(\d+)$/.exec(String(value));
 	if (!match) throw new Error(`Size must look like 1200x650, got "${value}"`);
 	return { width: Number(match[1]), height: Number(match[2]) }
 }
 
-export const parseSteps = steps => steps.map(step => {
+export const parseSteps = steps => steps.flatMap(step => {
 	const separator = step.indexOf(":");
 	const kind = separator === -1 ? step : step.slice(0, separator);
 	const value = separator === -1 ? "" : step.slice(separator + 1);
-	if (!STEP_KINDS.has(kind)) throw new Error(`Unknown step "${step}". Steps: ${[...STEP_KINDS].join(", ")}`);
+	if (!STEP_KINDS.has(kind)) throw new Error(`Unknown step "${step}". Steps: ${[...STEP_KINDS, "macro"].join(", ")}`);
 	if (kind === "wait" && !/^\d+$/.test(value)) throw new Error(`wait needs milliseconds, got "${step}"`);
 	if (kind === "resize") parseSize(value);
 	if (kind === "snap") {
@@ -145,6 +224,13 @@ export const parseSteps = steps => steps.map(step => {
 		if (!selector) throw new Error(`waitfor needs a selector, got "${step}"`);
 		return { kind, value, check: waitForExpression(selector, isGone) }
 	}
+	if (kind === "focusorder") return focusOrderSteps(value, step);
+	if (kind === "film") return filmStep(value, step);
+	if (NETWORK_STEPS.has(kind)) return networkStep(kind, value, step);
+	if (kind === "assert") {
+		if (!value) throw new Error(`assert needs an expression, got "${step}"`);
+		return { kind: "print", value: assertExpression(value), assert: value }
+	}
 	if (kind === "measure") {
 		if (!value) throw new Error(`measure needs a selector, got "${step}"`);
 		return { kind: "print", value: printExpression(measureExpression(value)) }

package/src/core/watch.mjs

@@ -0,0 +1,31 @@
+import { existsSync, statSync, watch } from "node:fs";
+import path from "node:path";
+
+const IGNORED = /(^|[\\/])(node_modules|\.git)([\\/]|$)/;
+const DEBOUNCE_MS = 300;
+
+export const watchFiles = ({ targets, ignore, onChange }) => {
+	let timer;
+	let changed = null;
+	const watchers = targets.map(target => {
+		if (!existsSync(target)) throw new Error(`watch: ${target} does not exist`);
+		const isFile = statSync(target).isFile();
+		try {
+			return watch(target, { recursive: true }, (_, file) => {
+				const full = file && !isFile ? path.join(target, String(file)) : target;
+				if (IGNORED.test(full) || ignore.some(dir => full.startsWith(dir + path.sep))) return;
+				changed = full;
+				clearTimeout(timer);
+				timer = setTimeout(() => onChange(changed), DEBOUNCE_MS);
+			});
+		} catch (error) {
+			if (error.code === "ERR_FEATURE_UNAVAILABLE_ON_PLATFORM") throw new Error("--watch needs Node 20 or newer");
+			throw error;
+		}
+	});
+	
+	return () => {
+		clearTimeout(timer);
+		for (const watcher of watchers) watcher.close();
+	}
+}

package/src/engines/playwright.mjs

@@ -16,15 +16,26 @@ const loadPlaywright = async () => {
 	}
 }
 
-export const runPlaywright = async ({ engine, url, steps, init = [], size, out, prefix, scale, snapMargin = 8, waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, log }) => {
+export const runPlaywright = async ({
+	engine, url, steps, init = [], size, locale,
+	colorScheme, isMotionReduced = false, out, prefix, scale,
+	snapMargin = 8, waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, log
+}) => {
 	const playwright = await loadPlaywright();
 	const browserType = engine === "webkit" ? playwright.webkit : playwright.chromium;
 	const browser = await browserType.launch({ channel: CHANNELS[engine], headless: true });
 	const saved = [];
+	const films = [];
 	let failed = false;
 
 	try {
-		const page = await browser.newPage({ viewport: parseSize(size), deviceScaleFactor: scale ?? 1 });
+		const page = await browser.newPage({
+			viewport: parseSize(size),
+			deviceScaleFactor: scale ?? 1,
+			locale,
+			colorScheme,
+			reducedMotion: isMotionReduced ? "reduce" : undefined
+		});
 		page.setDefaultTimeout(TIMEOUT_MS);
 		for (const content of init) await page.addInitScript({ content });
 		await page.goto(url, { waitUntil: "load" });
@@ -45,6 +56,20 @@ export const runPlaywright = async ({ engine, url, steps, init = [], size, out,
 			return parseRect(result.value, step.selector ?? step.value);
 		}
 
+		const film = async step => {
+			const frames = [];
+			const started = Date.now();
+			for (let index = 0; index < step.frames; index += 1) {
+				const due = started + index * step.durationMs / (step.frames - 1);
+				if (Date.now() < due) await page.waitForTimeout(due - Date.now());
+				const time = Date.now() - started;
+				const file = path.join(out, `${prefix}${step.value}.frame-${index}.png`);
+				const [, rect] = await Promise.all([page.screenshot({ path: file }), step.rect ? evaluate(step.rect) : {}]);
+				frames.push({ file, time, rect: rect.value && rect.value !== "null" ? JSON.parse(rect.value) : null });
+			}
+			films.push({ name: step.value, file: path.join(out, `${prefix}${step.value}.png`), scale: scale ?? 1, viewport: page.viewportSize(), frames });
+		}
+
 		const runStep = async step => {
 			const { kind, value } = step;
 			if (kind === "snap") {
@@ -52,6 +77,8 @@ export const runPlaywright = async ({ engine, url, steps, init = [], size, out,
 				const clip = step.selector ? clipRect(await elementRect(step), snapMargin, page.viewportSize()) : undefined;
 				await page.screenshot({ path: file, clip });
 				saved.push(file);
+			} else if (kind === "film") {
+				await film(step);
 			} else if (kind === "hover" || kind === "click") {
 				const rect = await elementRect(step);
 				const x = rect.x + rect.width / 2;
@@ -100,5 +127,5 @@ export const runPlaywright = async ({ engine, url, steps, init = [], size, out,
 		await browser.close();
 	}
 
-	return { saved, failed }
+	return { saved, failed, films }
 }

package/src/engines/webkitgtk.mjs

@@ -9,7 +9,12 @@ const PROBE = "import gi; gi.require_version('Gtk', '3.0'); gi.require_version('
 export const isWebkitGtkAvailable = () => process.platform === "linux"
 	&& spawnSync("python3", ["-c", PROBE], { stdio: "ignore" }).status === 0;
 
-export const runWebkitGtk = ({ url, steps, init = [], size, out, prefix, snapMargin = 8, isHeaded = false, isStorageKept = false, waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, timeoutMs = TIMEOUT_MS, log }) => new Promise((resolve, reject) => {
+export const runWebkitGtk = ({
+	url, steps, init = [], size, colorScheme,
+	isMotionReduced = false, out, prefix, snapMargin = 8,
+	isHeaded = false, isStorageKept = false,
+	waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, timeoutMs = TIMEOUT_MS, log
+}) => new Promise((resolve, reject) => {
 	if (!isWebkitGtkAvailable()) {
 		reject(new Error("WebKitGTK engine needs Linux with python3-gi and WebKit2 4.1 (gir1.2-webkit2-4.1)"));
 		return;
@@ -18,14 +23,14 @@ export const runWebkitGtk = ({ url, steps, init = [], size, out, prefix, snapMar
 	const { width, height } = parseSize(size);
 	const child = spawn("python3", [
 		SCRIPT, url,
-		"--steps", JSON.stringify(steps),
-		"--init", JSON.stringify(init),
 		"--init-errors", INIT_ERRORS_EXPRESSION,
 		"--out", out,
 		"--prefix", prefix,
 		"--width", String(width),
 		"--height", String(height),
 		"--snap-margin", String(snapMargin),
+		...(colorScheme ? ["--color-scheme", colorScheme] : []),
+		...(isMotionReduced ? ["--reduced-motion"] : []),
 		...(isHeaded ? ["--headed"] : []),
 		...(isStorageKept ? ["--keep-storage"] : []),
 		"--wait-for-timeout-ms", String(waitForTimeoutMs),
@@ -34,11 +39,15 @@ export const runWebkitGtk = ({ url, steps, init = [], size, out, prefix, snapMar
 		"--js-settle-ms", String(JS_SETTLE_MS),
 		"--timeout-ms", String(timeoutMs)
 	], {
-		stdio: ["ignore", "pipe", "pipe"],
+		stdio: ["pipe", "pipe", "pipe"],
 		env: { PYTHONUNBUFFERED: "1", ...process.env }
 	});
 
+	child.stdin.on("error", () => undefined);
+	child.stdin.end(JSON.stringify({ steps, init }));
+
 	const saved = [];
+	const films = [];
 	let buffer = "";
 	child.stdout.setEncoding("utf8");
 	child.stdout.on("data", chunk => {
@@ -51,6 +60,7 @@ export const runWebkitGtk = ({ url, steps, init = [], size, out, prefix, snapMar
 			const kind = line.slice(0, tab);
 			const value = JSON.parse(line.slice(tab + 1));
 			if (kind === "saved") saved.push(value);
+			else if (kind === "film") films.push(value);
 			else if (kind === "print") log.info(value);
 			else if (kind === "error") log.error(value);
 			else if (kind === "init-errors") reportInitErrors(value, log);
@@ -63,5 +73,5 @@ export const runWebkitGtk = ({ url, steps, init = [], size, out, prefix, snapMar
 		}
 	});
 	child.once("error", reject);
-	child.once("exit", code => resolve({ saved, failed: code !== 0 }));
+	child.once("exit", code => resolve({ saved, failed: code !== 0, films }));
 });

package/src/engines/webkitgtk.py

@@ -14,6 +14,11 @@ gi.require_version("WebKit2", "4.1")
 from gi.repository import Gdk, GLib, Gtk, WebKit2
 
 INPUT_SETTLE_MS = 50
+UNSUPPORTED_RESULT = "Unsupported result type"
+KEY_POLL_MS = 20
+KEY_WAIT_MS = 2000
+KEYUPS = "window.__webviewPreviewKeyups || 0"
+KEYUP_COUNTER = "addEventListener('keyup', () => { window.__webviewPreviewKeyups = (window.__webviewPreviewKeyups || 0) + 1 }, true);"
 GDK_KEY_NAMES = {
     "Tab": "Tab", "Enter": "Return", "Escape": "Escape", "Backspace": "BackSpace", "Delete": "Delete",
     "Insert": "Insert", "Space": "space", "Home": "Home", "End": "End", "PageUp": "Page_Up", "PageDown": "Page_Down",
@@ -37,14 +42,14 @@ def emit(kind, value):
 def parse_args():
     parser = argparse.ArgumentParser()
     parser.add_argument("url")
-    parser.add_argument("--steps", required=True)
-    parser.add_argument("--init", required=True)
     parser.add_argument("--init-errors", required=True)
     parser.add_argument("--out", required=True)
     parser.add_argument("--prefix", required=True)
     parser.add_argument("--width", type=int, required=True)
     parser.add_argument("--height", type=int, required=True)
     parser.add_argument("--snap-margin", type=int, required=True)
+    parser.add_argument("--color-scheme", choices=("light", "dark"))
+    parser.add_argument("--reduced-motion", action="store_true")
     parser.add_argument("--headed", action="store_true")
     parser.add_argument("--keep-storage", action="store_true")
     parser.add_argument("--wait-for-timeout-ms", type=int, required=True)
@@ -69,17 +74,28 @@ def keyval_for(key):
     return Gdk.unicode_to_keyval(ord(key))
 
 
+def apply_media(args):
+    settings = Gtk.Settings.get_default()
+    if args.color_scheme:
+        settings.set_property("gtk-theme-name", "Adwaita")
+        settings.set_property("gtk-application-prefer-dark-theme", args.color_scheme == "dark")
+    if args.reduced_motion:
+        settings.set_property("gtk-enable-animations", False)
+
+
 def main():
     args = parse_args()
-    steps = json.loads(args.steps)
-    init_scripts = json.loads(args.init)
+    apply_media(args)
+    payload = json.loads(sys.stdin.read())
+    steps = payload["steps"]
+    init_scripts = payload["init"]
     os.makedirs(args.out, exist_ok=True)
 
     window = Gtk.Window(title="webview-preview") if args.headed else Gtk.OffscreenWindow()
     window.set_default_size(args.width, args.height)
     window.set_size_request(args.width, args.height)
     manager = WebKit2.UserContentManager()
-    for source in init_scripts:
+    for source in [KEYUP_COUNTER, *init_scripts]:
         manager.add_script(WebKit2.UserScript.new(
             source,
             WebKit2.UserContentInjectedFrames.TOP_FRAME,
@@ -117,7 +133,9 @@ def main():
         event.focus_change.send_event = 1
         event.focus_change.in_ = 1
         event.set_device(seat.get_keyboard())
+        display.error_trap_push()
         deliver(event)
+        display.error_trap_pop_ignored()
         view.grab_focus()
 
     def key_event(kind, keyval, mask):
@@ -144,6 +162,29 @@ def main():
             key_event(Gdk.EventType.KEY_RELEASE, Gdk.keyval_from_name(MODIFIER_KEYS[modifier]), mask)
             mask &= ~MODIFIER_MASKS[modifier]
 
+    def press_all(presses):
+        def count(text):
+            return int(text) if text and text.isdigit() else 0
+
+        def send(text):
+            expected = count(text) + sum(1 + len(modifiers) for _, modifiers in presses)
+            for keyval, modifiers in presses:
+                press(keyval, modifiers)
+            started = GLib.get_monotonic_time()
+
+            def check():
+                def on_value(text):
+                    if count(text) >= expected or (GLib.get_monotonic_time() - started) / 1000 >= KEY_WAIT_MS:
+                        GLib.timeout_add(INPUT_SETTLE_MS, run_step)
+                    else:
+                        GLib.timeout_add(KEY_POLL_MS, lambda: (check(), False)[1])
+
+                evaluate(KEYUPS, on_value, lambda _: GLib.timeout_add(INPUT_SETTLE_MS, run_step))
+
+            check()
+
+        evaluate(KEYUPS, send, lambda _: send("0"))
+
     def mouse(kind, x, y):
         event = Gdk.Event.new(kind)
         fields = event.motion if kind == Gdk.EventType.MOTION_NOTIFY else event.button
@@ -231,6 +272,44 @@ def main():
 
         evaluate(step["check"], on_value, lambda error: (step_failed(f"waitfor:{step['value']} failed: {error}"), next_step()))
 
+    def film(step):
+        frames = []
+        started = GLib.get_monotonic_time() / 1000
+        interval = step["durationMs"] / (step["frames"] - 1)
+
+        def store_rect(frame, text):
+            frame["rect"] = json.loads(text) if text and text != "null" else None
+
+        def finish_film():
+            width, height = view.get_allocated_width(), view.get_allocated_height()
+            for index, frame in enumerate(frames):
+                path = os.path.join(args.out, f"{args.prefix}{step['value']}.frame-{index}.png")
+                frame.pop("pixbuf").savev(path, "png", [], [])
+                frame["file"] = path
+            emit("film", {
+                "name": step["value"],
+                "file": os.path.join(args.out, f"{args.prefix}{step['value']}.png"),
+                "scale": full_pixbuf().get_width() / width,
+                "viewport": {"width": width, "height": height},
+                "frames": frames
+            })
+            next_step()
+
+        def capture():
+            now = GLib.get_monotonic_time() / 1000
+            frame = {"pixbuf": full_pixbuf(), "time": round(now - started), "rect": None}
+            frames.append(frame)
+            if step.get("rect"):
+                evaluate(step["rect"], lambda text: store_rect(frame, text), lambda _: None)
+            if len(frames) < step["frames"]:
+                due = started + len(frames) * interval
+                GLib.timeout_add(max(0, int(due - GLib.get_monotonic_time() / 1000)), capture)
+            else:
+                evaluate("0", lambda _: finish_film(), lambda _: finish_film())
+            return False
+
+        capture()
+
     def next_step():
         GLib.idle_add(run_step)
 
@@ -247,8 +326,10 @@ def main():
             else:
                 save(value, full_pixbuf())
                 next_step()
+        elif kind == "film":
+            film(step)
         elif kind in ("js", "jsnow"):
-            evaluate(value, lambda _: None, lambda error: emit("error", f"js failed: {error}"))
+            evaluate(value, lambda _: None, lambda error: None if UNSUPPORTED_RESULT in error else emit("error", f"js failed: {error}"))
             if kind == "js":
                 GLib.timeout_add(args.js_settle_ms, run_step)
             else:
@@ -271,12 +352,9 @@ def main():
         elif kind in ("hover", "click"):
             with_rect(step, lambda rect: point_at(step, rect))
         elif kind == "key":
-            press(keyval_for(step["key"]), step["modifiers"])
-            GLib.timeout_add(INPUT_SETTLE_MS, run_step)
+            press_all([(keyval_for(step["key"]), step["modifiers"])])
         elif kind == "type":
-            for character in value:
-                press(Gdk.unicode_to_keyval(ord(character)))
-            GLib.timeout_add(INPUT_SETTLE_MS, run_step)
+            press_all([(Gdk.unicode_to_keyval(ord(character)), ()) for character in value])
         return False
 
     def start_steps():