@ralphralphai/playwright 2.3.0 → 2.5.0

package/dist/{upload-CRXt3vt1.cjs → upload-D40MqSQa.cjs}

@@ -70,7 +70,7 @@ function snapshot(value) {
 }
 //#endregion
 //#region package.json
-var version = "2.3.0";
+var version = "2.5.0";
 //#endregion
 //#region src/actions.ts
 const BINDING = "__ralphAction";
@@ -547,6 +547,54 @@ async function waitForAnimations(page, timeoutMs) {
 		if (!(error instanceof _playwright_test.errors.TimeoutError)) throw error;
 	}
 }
+//#endregion
+//#region src/image_responses.ts
+const IMAGE_HASH_TIMEOUT_MS = 3e4;
+const hashesByPage = /* @__PURE__ */ new WeakMap();
+function sha256(data) {
+	return (0, node_crypto.createHash)("sha256").update(data).digest("hex");
+}
+/**
+* Hashes every image the page loads, as it loads, so a snapshot hashes the
+* bytes the page showed instead of fetching them a second time. A second fetch
+* of a page's images comes as a burst, which hosts such as
+* upload.wikimedia.org answer with 429 for a share of them, and the image then
+* reads as replaced. Only the hash is kept, not the body. Entries persist
+* across navigations until another request for the same image replaces them
+* or the page closes.
+*/
+function watchImageResponses(page) {
+	if (hashesByPage.has(page)) return;
+	const hashes = /* @__PURE__ */ new Map();
+	hashesByPage.set(page, hashes);
+	page.on("request", (request) => {
+		if (request.resourceType() !== "image") return;
+		const hash = request.response().then(async (response) => {
+			return response?.ok() ? sha256(await response.body()) : void 0;
+		}).catch(() => void 0);
+		for (let redirected = request; redirected !== null; redirected = redirected.redirectedFrom()) hashes.set(redirected.url(), hash);
+	});
+	page.once("close", () => hashesByPage.delete(page));
+}
+/**
+* The hash from the latest observed request for this URL, across navigations.
+* Undefined when no request was observed, the latest load failed, or it has
+* not finished within the timeout, so an image that never finishes loading
+* cannot stall a snapshot.
+*/
+async function loadedImageHash(page, url, timeoutMs = IMAGE_HASH_TIMEOUT_MS) {
+	const hash = hashesByPage.get(page)?.get(url.split("#")[0]);
+	if (hash === void 0) return;
+	let timer;
+	const timeout = new Promise((resolve) => {
+		timer = setTimeout(resolve, timeoutMs, void 0);
+	});
+	try {
+		return await Promise.race([hash, timeout]);
+	} finally {
+		clearTimeout(timer);
+	}
+}
 const MAX_ARIA_DEPTH = Math.floor(128 / 2) - 2;
 const STYLE_PROPERTIES = [
 	"font-family",
@@ -680,6 +728,8 @@ function keepShown(node, viewportWidth) {
 		return kept === void 0 ? [] : [kept];
 	});
 	if (!shown && children.length === 0) return;
+	const [only] = children;
+	if (node.role === "generic" && !node.name && (node.children?.length ?? 0) > 1 && children.length === 1 && typeof only !== "string" && only?.ref !== void 0) return only;
 	return node.children === void 0 ? node : {
 		...node,
 		children
@@ -706,7 +756,8 @@ async function readElement(page, ref, isImage) {
 	try {
 		return await page.locator(`aria-ref=${ref}`).evaluate((element, { properties, isImage, dynamicAttribute }) => {
 			const computed = getComputedStyle(element);
-			const style = Object.fromEntries(properties.map((property) => [property, computed.getPropertyValue(property)]));
+			const typed = "computedStyleMap" in element ? element.computedStyleMap() : void 0;
+			const style = Object.fromEntries(properties.map((property) => [property, property.startsWith("margin-") && typed?.get(property)?.toString() === "auto" ? "auto" : computed.getPropertyValue(property)]));
 			const dynamic = element.closest(`[${dynamicAttribute}]`) !== null;
 			if (!isImage) return {
 				style,
@@ -744,23 +795,11 @@ async function readElement(page, ref, isImage) {
 		return;
 	}
 }
-function sha256(data) {
-	return (0, node_crypto.createHash)("sha256").update(data).digest("hex");
-}
 async function hashImage(page, image) {
 	if ("markup" in image) return sha256(image.markup);
 	if (image.src === "") return;
 	if (image.src.startsWith("data:")) return sha256(image.src);
-	try {
-		const response = await page.request.get(image.src);
-		try {
-			return response.ok() ? sha256(await response.body()) : void 0;
-		} finally {
-			await response.dispose();
-		}
-	} catch {
-		return;
-	}
+	return loadedImageHash(page, image.src);
 }
 function distinctStyle(style, inherited) {
 	const distinct = Object.entries(style).filter(([property, value]) => {
@@ -788,6 +827,179 @@ async function describe(page, child, inherited, insideDynamic) {
 	};
 }
 //#endregion
+//#region src/animation_observer.ts
+/** Runs in the page. Keeps native animations and DOM changes observable without app hooks. */
+function observeAnimations() {
+	const paused = /* @__PURE__ */ new Set();
+	const roots = /* @__PURE__ */ new Set();
+	let dirty = true;
+	const observer = new MutationObserver(() => {
+		dirty = true;
+	});
+	const collect = (root, all) => {
+		if (!roots.has(root)) {
+			roots.add(root);
+			observer.observe(root, {
+				subtree: true,
+				childList: true,
+				attributes: true,
+				characterData: true
+			});
+			dirty = true;
+		}
+		root.getAnimations().forEach((animation) => all.add(animation));
+		for (const element of root.querySelectorAll("*")) if (element.shadowRoot) collect(element.shadowRoot, all);
+	};
+	return {
+		sample(finishFinite) {
+			const all = /* @__PURE__ */ new Set();
+			collect(document, all);
+			let changed = dirty;
+			dirty = false;
+			for (const animation of all) {
+				if (animation.playState !== "running") continue;
+				if (finishFinite && animation.playbackRate !== 0 && Number.isFinite(animation.effect?.getComputedTiming().endTime)) animation.finish();
+				else {
+					animation.pause();
+					paused.add(animation);
+				}
+				changed = true;
+			}
+			return changed;
+		},
+		async ready() {
+			await Promise.all([...paused].map((animation) => animation.ready));
+		},
+		resume() {
+			observer.disconnect();
+			for (const animation of paused) if (animation.playState === "paused") animation.play();
+		}
+	};
+}
+//#endregion
+//#region src/capture_freezer.ts
+const PAUSE_LEAD_MS = 100;
+const ANIMATION_QUIET_MS = 150;
+const MAX_ANIMATION_SETTLE_MS = 1500;
+/** One owner of the context-wide clock; captures in different tabs queue here. */
+var CaptureFreezer = class {
+	context;
+	tail = Promise.resolve();
+	closed = false;
+	constructor(context) {
+		this.context = context;
+		context.once("close", () => {
+			this.closed = true;
+		});
+	}
+	install() {
+		if (this.context.pages().some((page) => page.url() !== "about:blank")) throw new Error("Ralph freezeDuringCapture requires the clock before page scripts run. Await ralph.observe(context) before creating or navigating pages in a custom context.");
+		return this.context.clock.install();
+	}
+	async capture(page, signal, capture, deadline = Date.now() + 5e3) {
+		const task = this.tail.then(async () => {
+			signal.throwIfAborted();
+			const animations = /* @__PURE__ */ new Map();
+			try {
+				await this.settleAnimations(page, animations, signal, deadline);
+				await this.pauseClock(page, signal);
+				signal.throwIfAborted();
+				for (let pass = 0; pass < 2; pass++) {
+					await this.sampleAnimations(page, animations, signal, false);
+					await this.waitForAnimationsReady(animations, signal);
+				}
+				return await capture();
+			} finally {
+				try {
+					await this.resumeAnimations(animations);
+				} finally {
+					if (!this.closed) await this.context.clock.resume();
+				}
+			}
+		});
+		this.tail = task.catch(() => void 0);
+		return task;
+	}
+	async settleAnimations(page, animations, signal, deadline) {
+		const now = Date.now();
+		const endsAt = now + Math.min(MAX_ANIMATION_SETTLE_MS, Math.max(0, (deadline - now) / 2));
+		let quietSince = now;
+		while (Date.now() < endsAt) {
+			if (await this.sampleAnimations(page, animations, signal, true)) quietSince = Date.now();
+			if (Date.now() - quietSince >= ANIMATION_QUIET_MS) return;
+			await (0, node_timers_promises.setTimeout)(Math.max(0, Math.min(50, endsAt - Date.now())), void 0, { signal }).catch((error) => {
+				signal.throwIfAborted();
+				throw error;
+			});
+		}
+	}
+	async sampleAnimations(page, animations, signal, finishFinite) {
+		let changed = false;
+		for (const frame of page.frames()) {
+			signal.throwIfAborted();
+			try {
+				let handle = animations.get(frame);
+				if (!handle) {
+					handle = await frame.evaluateHandle(observeAnimations);
+					animations.set(frame, handle);
+				}
+				changed = await handle.evaluate((state, finish) => state.sample(finish), finishFinite) || changed;
+			} catch (error) {
+				if (!frame.isDetached()) throw error;
+			}
+		}
+		signal.throwIfAborted();
+		return changed;
+	}
+	async waitForAnimationsReady(animations, signal) {
+		signal.throwIfAborted();
+		let onAbort;
+		const aborted = new Promise((_, reject) => {
+			onAbort = () => reject(signal.reason);
+			signal.addEventListener("abort", onAbort, { once: true });
+		});
+		try {
+			await Promise.race([Promise.all([...animations].map(async ([frame, handle]) => {
+				if (frame.isDetached()) return;
+				try {
+					await handle.evaluate((state) => state.ready());
+				} catch (error) {
+					if (!frame.isDetached()) throw error;
+				}
+			})), aborted]);
+		} finally {
+			signal.removeEventListener("abort", onAbort);
+		}
+	}
+	async resumeAnimations(animations) {
+		const restored = await Promise.allSettled([...animations.values()].map(async (handle) => {
+			try {
+				await handle.evaluate((state) => state.resume());
+			} catch (error) {
+				if (!destroyedContext(error)) throw error;
+			} finally {
+				await handle.dispose();
+			}
+		}));
+		for (const result of restored) if (result.status === "rejected") throw result.reason;
+	}
+	async pauseClock(page, signal) {
+		for (let attempt = 0;; attempt++) {
+			const time = await page.evaluate(() => Date.now());
+			signal.throwIfAborted();
+			try {
+				await this.context.clock.pauseAt(time + PAUSE_LEAD_MS);
+				return;
+			} catch (error) {
+				if (attempt > 0 || !(error instanceof Error) || !error.message.includes("Cannot fast-forward to the past")) throw error;
+			}
+		}
+	}
+};
+function destroyedContext(error) {
+	return error instanceof Error && /Execution context was destroyed|Cannot find context|Target page, context or browser has been closed|Frame was detached/.test(error.message);
+}
+//#endregion
 //#region src/conditions.ts
 const declared = (declaration = {}) => {
 	const conditions = {};
@@ -849,11 +1061,11 @@ function nodeKey(conditions) {
 */
 const WEBP_QUALITY = 80;
 const WEBP_MAX_DIMENSION = 16383;
-async function takeScreenshot(page, deadline) {
+async function takeScreenshot(page, deadline, frozen = false) {
 	const options = {
 		fullPage: true,
 		scale: "css",
-		animations: "disabled"
+		animations: frozen ? "allow" : "disabled"
 	};
 	const webp = await page.screenshot({
 		...options,
@@ -1082,22 +1294,30 @@ var Recorder = class {
 	/** Starts recording URL changes in every current and future tab of `context`. */
 	observe(context) {
 		if (this.closed) throw new Error("The Ralph recorder has finished.");
-		if (this.contexts.has(context)) return;
+		const existing = this.contexts.get(context);
+		if (existing) return existing.ready;
+		const freezer = this.options.freezeDuringCapture ? new CaptureFreezer(context) : void 0;
+		const ready = freezer?.install() ?? Promise.resolve();
 		const onPage = (page) => this.watchPage(page);
-		this.contexts.set(context, onPage);
+		this.contexts.set(context, {
+			onPage,
+			ready,
+			freezer
+		});
 		this.actions.observe(context);
 		context.on("page", onPage);
 		for (const page of context.pages()) onPage(page);
+		return ready;
 	}
 	async recordNode(page, options) {
-		this.observe(page.context());
+		await this.observe(page.context());
 		const state = this.pages.get(page);
 		if (!state) throw new Error("Cannot record a closed browser page.");
 		if (this.paused) return;
 		await this.enqueueCreateNodeRequest(state, "explicit", options);
 	}
 	async setNodeConditions(page, declaration) {
-		this.observe(page.context());
+		await this.observe(page.context());
 		const state = this.pages.get(page);
 		if (!state) throw new Error("Cannot tag a closed browser page.");
 		const key = Symbol();
@@ -1128,8 +1348,11 @@ var Recorder = class {
 	}
 	/** Stops watching `context` and waits for its queued recordings. */
 	async stopContext(context) {
-		const onPage = this.contexts.get(context);
-		if (onPage) context.off("page", onPage);
+		const observed = this.contexts.get(context);
+		if (observed) {
+			context.off("page", observed.onPage);
+			await observed.ready;
+		}
 		const states = [...this.pages.values()].filter((state) => state.page.context() === context);
 		for (const state of states) state.page.off("framenavigated", state.onNavigation);
 		await Promise.all(states.map((state) => state.tail));
@@ -1182,6 +1405,7 @@ var Recorder = class {
 			}
 		}).catch(() => void 0);
 		page.on("framenavigated", state.onNavigation);
+		watchImageResponses(page);
 		this.urlChanged(state);
 	}
 	urlChanged(state) {
@@ -1244,6 +1468,7 @@ var Recorder = class {
 		};
 		try {
 			check();
+			await wait(this.contexts.get(page.context()).ready);
 			if (request.trigger !== "explicit") await this.waitForPageToSettle(page, deadline, check);
 			check();
 			const conditions = this.declaredConditions(state);
@@ -1256,18 +1481,27 @@ var Recorder = class {
 				warnedNoTracker = true;
 				console.warn("Ralph: this page runs no tracker, so the node conditions the test declares cannot be checked against the tags the app reports. Production events must carry the same tags, or these nodes will match no visitors.");
 			}
-			if (this.options.reduceMotion) {
+			const freezer = this.contexts.get(page.context()).freezer;
+			if (this.options.reduceMotion && !freezer) {
 				check();
 				await wait(waitForAnimations(page, (deadline.endsAt - Date.now()) / 2));
 			}
-			check();
-			const before = await wait(readLayout(page));
-			check();
-			const image = await wait(takeScreenshot(page, deadline.endsAt));
-			check();
-			const after = await wait(readLayout(page));
-			check();
-			const snapshot = await Promise.race([captureAriaSnapshot(page, after).catch(() => void 0), (0, node_timers_promises.setTimeout)(Math.max(0, deadline.endsAt - Date.now()), void 0, { ref: false })]);
+			const capture = async () => {
+				check();
+				const before = await wait(readLayout(page));
+				check();
+				const image = await wait(takeScreenshot(page, deadline.endsAt, !!freezer));
+				check();
+				const after = await wait(readLayout(page));
+				check();
+				return {
+					before,
+					image,
+					after,
+					snapshot: await Promise.race([captureAriaSnapshot(page, after).catch(() => void 0), (0, node_timers_promises.setTimeout)(Math.max(0, deadline.endsAt - Date.now()), void 0, { ref: false })])
+				};
+			};
+			const { before, image, after, snapshot } = freezer ? await freezer.capture(page, deadline.signal, capture, deadline.endsAt) : await capture();
 			checkPage();
 			const recorded = {
 				...request,
@@ -1805,4 +2039,4 @@ Object.defineProperty(exports, "visitAllLinks", {
 	}
 });
 
-//# sourceMappingURL=upload-CRXt3vt1.cjs.map
+//# sourceMappingURL=upload-D40MqSQa.cjs.map