webview-preview 1.1.1 → 1.1.2

package/README.md

@@ -170,6 +170,7 @@ npx webview-preview /settings snap:settings
 | `headed` | WebKitGTK: show a real window instead of rendering off-screen. | `false` |
 | `snapMargin` | Room in CSS pixels around `snap:name@selector`, so focus rings and shadows fit. | `8` |
 | `waitTimeout` | How long `waitfor:` waits, ms. | `10000` |
+| `timeout` | Limit for the whole run, ms; `0` turns it off. The run stops with `timed out after … ms` and keeps the snapshots taken so far. | 30 s plus a budget per step: its own time for `wait:` / `film:`, `waitTimeout` for `waitfor:`, 2 s + 0.1 s per character for `type:`, 2 s for any other step |
 | `keepStorage` | WebKitGTK: keep `localStorage`, cookies and cache between runs. By default every run starts clean, like Playwright engines always do. | `false` |
 | `compare` / `updateBaseline` / `baseline` / `maxDiffPixels` / `compareTolerance` | See [Comparing with a baseline](#comparing-with-a-baseline). | — |
 | `init` | Code that runs **before the page's own scripts**, on every load: a string, `{ file: "path" }`, or a list of them. See [below](#1-init--set-things-up-before-the-app-starts). | — |
@@ -337,6 +338,7 @@ webview-preview [route-or-url] [steps...] [options]
 | `--headed` | WebKitGTK: show a real window |
 | `--snap-margin <px>` | Room around `snap:name@selector` |
 | `--wait-timeout <ms>` | How long `waitfor:` waits |
+| `--timeout <ms>` | Limit for the whole run; `0` = none |
 | `--keep-storage` | WebKitGTK: keep storage between runs |
 | `--report` | Write `<out>/report.html` with the output and all snapshots (baseline and difference after `--compare`) |
 | `--compare` / `--update-baseline` | Compare snapshots with baselines / replace the baselines |
@@ -627,13 +629,13 @@ invisible rounding noise; raise it a little if antialiasing differs between mach
 Snapshots pile up in the snapshot folder. Clear them when you no longer need them:
 
 ```sh
-npx webview-preview clean                  # delete every *.png in the snapshot folder
+npx webview-preview clean                  # delete every *.png and report.html in the snapshot folder
 npx webview-preview clean --dry-run        # only list what would be deleted
 npx webview-preview clean --older-than 2h  # only files older than 2 hours (30m, 7d …)
 ```
 
 `clean` reads the same config (`out`, `baseline`) as a normal run. It deletes only `*.png` files directly in the
-snapshot folder (including `.diff.png`), never the baselines, and refuses to run when the snapshot folder is the
+snapshot folder (including `.diff.png`) and `report.html`, never the baselines, and refuses to run when the snapshot folder is the
 project folder, your home folder, the disk root or the baseline folder.
 
 ## Recipes
@@ -725,7 +727,7 @@ More of these — animations frame by frame, measuring, getting past login — i
 | `Server did not open port …` | The `server.command` failed or uses another port. Run it by hand to see why; raise `readyTimeoutMs` for slow starts. |
 | `"/route" is not a full URL` | Set `baseUrl` in the config or pass `--base-url`. |
 | Blank snapshot | The page needs more time or threw on start: add `wait:2000`, and `print:document.body.innerHTML.length`. |
-| `timed out after 30000 ms` (WebKitGTK) | A run longer than 30 s; split it into several runs. |
+| `timed out after … ms` | The run took longer than its limit (30 s plus a budget per step). A step is stuck — check the last output before the message — or the steps really need more: raise `--timeout`, or `--timeout 0` for no limit. |
 | The app starts in its default state every time | Runs start with empty storage on purpose. Set what you need with [`init`](#1-init--set-things-up-before-the-app-starts), or pass `--keep-storage` (WebKitGTK) to carry it over. |
 | `waitfor:… timed out` | The element never became visible, or keeps moving (an endless animation). Check with `measure:`; raise `--wait-timeout`; use `wait:` for elements that never stop moving. |
 | `--headed` Linux snapshot is twice the size | A real window follows your screen's scale (HiDPI): PNG pixels = CSS pixels × scale. Off-screen snapshots are 1×. |

package/bin/webview-preview.mjs

@@ -1,7 +1,10 @@
 #!/usr/bin/env node
 import { readFileSync } from "node:fs";
+import { stopServers } from "#src/core/server.mjs";
 import { cleanSnapshots, ENGINES, preview, watchPreview } from "#src/index.mjs";
 
+const PARENT_POLL_MS = 1000;
+
 const FLAGS = {
 	"--engine": "engine",
 	"--size": "size",
@@ -16,6 +19,7 @@ const FLAGS = {
 	"--compare-tolerance": "compareTolerance",
 	"--older-than": "olderThan",
 	"--wait-timeout": "waitTimeout",
+	"--timeout": "timeout",
 	"--locale": "locale",
 	"--color-scheme": "colorScheme",
 	"--latency": "latency"
@@ -63,6 +67,7 @@ Options:
   --snap-margin <px>  room around snap:name@selector (default: 8)
   --headed         WebKitGTK: show a real window instead of rendering off-screen
   --wait-timeout <ms>  how long waitfor waits (default: 10000)
+  --timeout <ms>   limit for the whole run; 0 = none (default: 30 s plus a budget per step)
   --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
@@ -187,18 +192,25 @@ try {
 		if (steps.length) throw new Error(`clean takes no steps, got ${steps.join(" ")}`);
 		const { removed, out } = await cleanSnapshots(cleanOptions);
 		for (const file of removed) console.log(file);
-		console.log(`${cleanOptions.dryRun ? "would delete" : "deleted"} ${removed.length} snapshot(s) in ${out}`);
+		console.log(`${cleanOptions.dryRun ? "would delete" : "deleted"} ${removed.length} file(s) in ${out}`);
 		process.exit(0);
 	}
 	const { isWatching, ...previewOptions } = parsed.options;
+	let stopWatching = () => {}
+	const exitCleanly = code => {
+		stopWatching();
+		stopServers();
+		process.exit(code);
+	}
+	for (const signal of ["SIGINT", "SIGTERM", "SIGHUP"]) process.once(signal, () => exitCleanly(isWatching ? 0 : 1));
+	const parentPid = process.ppid;
+	setInterval(() => {
+		if (process.ppid !== parentPid) exitCleanly(1);
+	}, PARENT_POLL_MS).unref();
 	if (isWatching) {
-		const stop = await watchPreview(previewOptions, result => {
+		stopWatching = 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);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "webview-preview",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"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",

package/src/core/server.mjs

@@ -3,6 +3,7 @@ import net from "node:net";
 
 const POLL_MS = 250;
 const DEFAULT_READY_TIMEOUT_MS = 30000;
+const running = new Set();
 
 const isPortOpen = (port, host) => new Promise(resolve => {
 	const socket = net.connect(port, host);
@@ -47,11 +48,20 @@ export const startServer = async server => {
 		stdio: "ignore",
 		detached: process.platform !== "win32"
 	});
+	const stop = () => {
+		running.delete(stop);
+		stopProcessTree(child);
+	}
+	running.add(stop);
 	try {
 		await waitForPort(port, host, readyTimeoutMs);
 	} catch (error) {
-		stopProcessTree(child);
+		stop();
 		throw error;
 	}
-	return () => stopProcessTree(child);
+	return stop;
+}
+
+export const stopServers = () => {
+	for (const stop of [...running]) stop();
 }

package/src/core/steps.mjs

@@ -5,6 +5,16 @@ 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_BUDGET_MS = 2000;
+const TYPE_KEY_BUDGET_MS = 100;
+
+export const runTimeoutMs = (steps, waitForTimeoutMs) => TIMEOUT_MS + steps.reduce((total, step) => total + (
+	step.kind === "wait" ? Number(step.value)
+		: step.kind === "film" ? step.durationMs + STEP_BUDGET_MS
+			: step.kind === "waitfor" ? waitForTimeoutMs
+				: step.kind === "type" ? STEP_BUDGET_MS + TYPE_KEY_BUDGET_MS * [...step.value].length
+					: STEP_BUDGET_MS
+), 0);
 
 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:";

package/src/engines/playwright.mjs

@@ -19,8 +19,9 @@ const loadPlaywright = async () => {
 export const runPlaywright = async ({
 	engine, url, steps, init = [], size, locale,
 	colorScheme, isMotionReduced = false, out, prefix, scale,
-	snapMargin = 8, waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, log
+	snapMargin = 8, waitForTimeoutMs = WAIT_FOR_TIMEOUT_MS, timeoutMs = TIMEOUT_MS, log
 }) => {
+	const deadline = timeoutMs > 0 ? Date.now() + timeoutMs : Infinity;
 	const playwright = await loadPlaywright();
 	const browserType = engine === "webkit" ? playwright.webkit : playwright.chromium;
 	const browser = await browserType.launch({ channel: CHANNELS[engine], headless: true });
@@ -113,6 +114,11 @@ export const runPlaywright = async ({
 		}
 
 		for (const step of steps) {
+			if (Date.now() > deadline) {
+				failed = true;
+				log.error(`timed out after ${timeoutMs} ms`);
+				break;
+			}
 			try {
 				await runStep(step);
 			} catch (error) {

package/src/engines/webkitgtk.py

@@ -149,7 +149,10 @@ def main():
         if found and entries:
             event.key.hardware_keycode = entries[0].keycode
         event.set_device(seat.get_keyboard())
-        deliver(event)
+        if kind == Gdk.EventType.KEY_RELEASE:
+            Gtk.main_do_event(event)
+        else:
+            deliver(event)
 
     def press(keyval, modifiers=()):
         mask = Gdk.ModifierType(0)
@@ -162,22 +165,31 @@ 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 press_all(label, 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)
+            start = count(text)
+            expected = start + sum(1 + len(modifiers) for _, modifiers in presses)
             for keyval, modifiers in presses:
                 press(keyval, modifiers)
-            started = GLib.get_monotonic_time()
+            progress = {"keyups": start, "since": GLib.get_monotonic_time()}
 
             def check():
                 def on_value(text):
-                    if count(text) >= expected or (GLib.get_monotonic_time() - started) / 1000 >= KEY_WAIT_MS:
+                    keyups = count(text)
+                    if keyups >= expected:
                         GLib.timeout_add(INPUT_SETTLE_MS, run_step)
-                    else:
-                        GLib.timeout_add(KEY_POLL_MS, lambda: (check(), False)[1])
+                        return
+                    now = GLib.get_monotonic_time()
+                    if keyups > progress["keyups"]:
+                        progress.update(keyups=keyups, since=now)
+                    elif (now - progress["since"]) / 1000 >= KEY_WAIT_MS:
+                        step_failed(f"{label}: only {keyups - start} of {expected - start} key presses reached the page")
+                        GLib.timeout_add(INPUT_SETTLE_MS, run_step)
+                        return
+                    GLib.timeout_add(KEY_POLL_MS, lambda: (check(), False)[1])
 
                 evaluate(KEYUPS, on_value, lambda _: GLib.timeout_add(INPUT_SETTLE_MS, run_step))
 
@@ -364,9 +376,9 @@ def main():
         elif kind in ("hover", "click"):
             with_rect(step, lambda rect: point_at(step, rect))
         elif kind == "key":
-            press_all([(keyval_for(step["key"]), step["modifiers"])])
+            press_all(f"key:{value}", [(keyval_for(step["key"]), step["modifiers"])])
         elif kind == "type":
-            press_all([(Gdk.unicode_to_keyval(ord(character)), ()) for character in value])
+            press_all("type", [(Gdk.unicode_to_keyval(ord(character)), ()) for character in value])
         return False
 
     def start_steps():
@@ -396,7 +408,8 @@ def main():
     view.connect("load-changed", on_load_changed)
     view.connect("load-failed", on_load_failed)
     view.load_uri(args.url)
-    GLib.timeout_add(args.timeout_ms, on_timeout)
+    if args.timeout_ms > 0:
+        GLib.timeout_add(args.timeout_ms, on_timeout)
     Gtk.main()
 
     sys.stdout.flush()

package/src/index.d.ts

@@ -53,6 +53,7 @@ export interface PreviewConfig {
 	headed?: boolean;
 	keepStorage?: boolean;
 	waitTimeout?: number;
+	timeout?: number;
 	snapMargin?: number;
 	compare?: boolean;
 	updateBaseline?: boolean;

package/src/index.mjs

@@ -11,7 +11,7 @@ import { resolveInit, wrapInit } from "#src/page/init.mjs";
 import { compileMock, mockScript, resolveMockFiles } from "#src/page/mock.mjs";
 import { startServer } from "#src/core/server.mjs";
 import { watchFiles } from "#src/core/watch.mjs";
-import { expandMacros, parseSize, parseSteps } from "#src/core/steps.mjs";
+import { expandMacros, parseSize, parseSteps, runTimeoutMs } from "#src/core/steps.mjs";
 import { checkLatency, networkScript } from "#src/page/network.mjs";
 import { resolveTauri, tauriScript } from "#src/page/tauri.mjs";
 
@@ -130,6 +130,9 @@ export const preview = async (options = {}) => {
 				isHeaded: !!merged.headed,
 				isStorageKept: !!merged.keepStorage,
 				waitForTimeoutMs: Number(merged.waitTimeout ?? 10000),
+				timeoutMs: merged.timeout === undefined
+					? runTimeoutMs([...steps, consoleStep], Number(merged.waitTimeout ?? 10000))
+					: Number(merged.timeout),
 				log: output.log
 			});
 			result.saved.push(...run.saved);

package/src/snapshots/clean.mjs

@@ -28,9 +28,9 @@ export const cleanSnapshots = async (options = {}) => {
 	const maxAge = options.olderThan ? parseDuration(options.olderThan) : 0;
 	const now = Date.now();
 	const removed = readdirSync(out)
-		.filter(name => name.toLowerCase().endsWith(".png"))
+		.filter(name => name.toLowerCase().endsWith(".png") || name === "report.html")
 		.map(name => path.join(out, name))
-		.filter(file => statSync(file).isFile() && now - statSync(file).mtimeMs >= maxAge);
+		.filter(file => statSync(file).isFile() && (maxAge === 0 || now - statSync(file).mtimeMs >= maxAge));
 	if (!options.dryRun) for (const file of removed) rmSync(file);
 	return { removed, out }
 }