@ralphralphai/playwright 1.7.0 → 1.8.0

package/dist/{upload-ZMnTCjs2.cjs → upload-BvAi7mMY.cjs}

@@ -70,7 +70,463 @@ function snapshot(value) {
 }
 //#endregion
 //#region package.json
-var version = "1.7.0";
+var version = "1.8.0";
+//#endregion
+//#region src/actions.ts
+const BINDING = "__ralphAction";
+const MAX_TEXT = 200;
+const text = (key) => {
+	return (params) => {
+		return typeof params[key] === "string" ? params[key] : void 0;
+	};
+};
+/** Keyed by Playwright protocol method, which is what `Locator`, `Page`, `Frame`, `ElementHandle`, `Keyboard` and `Mouse` calls all arrive as. */
+const ACTIONS = {
+	click: {
+		kind: "click",
+		events: ["click"]
+	},
+	mouseClick: {
+		kind: "click",
+		events: ["click"]
+	},
+	dblclick: {
+		kind: "dblclick",
+		events: ["dblclick", "click"]
+	},
+	tap: {
+		kind: "tap",
+		events: ["touchstart", "click"]
+	},
+	hover: {
+		kind: "hover",
+		events: ["mouseover"]
+	},
+	check: {
+		kind: "check",
+		events: ["click"]
+	},
+	uncheck: {
+		kind: "uncheck",
+		events: ["click"]
+	},
+	fill: {
+		kind: "fill",
+		events: ["input"],
+		value: text("value")
+	},
+	type: {
+		kind: "type",
+		events: ["input"],
+		value: text("text")
+	},
+	keyboardType: {
+		kind: "type",
+		events: ["input"],
+		value: text("text")
+	},
+	keyboardInsertText: {
+		kind: "type",
+		events: ["input"],
+		value: text("text")
+	},
+	press: {
+		kind: "press",
+		events: ["keydown"],
+		value: text("key")
+	},
+	keyboardPress: {
+		kind: "press",
+		events: ["keydown"],
+		value: text("key")
+	},
+	selectOption: {
+		kind: "selectOption",
+		events: ["input"],
+		value: (params) => {
+			const options = params["options"];
+			if (!Array.isArray(options)) return;
+			return options.map((option) => {
+				return String(option["valueOrLabel"] ?? option["label"] ?? option["value"] ?? "#" + String(option["index"]));
+			}).join(", ");
+		}
+	},
+	setInputFiles: {
+		kind: "setInputFiles",
+		events: ["input"],
+		value: (params) => {
+			const payloads = params["payloads"];
+			const localPaths = params["localPaths"];
+			const names = Array.isArray(payloads) ? payloads.map((payload) => {
+				return String(payload.name);
+			}) : Array.isArray(localPaths) ? localPaths.map((file) => {
+				return node_path.default.basename(String(file));
+			}) : [];
+			return names.length > 0 ? names.join(", ") : void 0;
+		}
+	},
+	dragAndDrop: {
+		kind: "dragTo",
+		events: ["mousedown", "dragstart"],
+		value: text("target")
+	},
+	goto: {
+		kind: "goto",
+		events: [],
+		value: text("url")
+	},
+	goBack: {
+		kind: "goBack",
+		events: []
+	},
+	goForward: {
+		kind: "goForward",
+		events: []
+	},
+	reload: {
+		kind: "reload",
+		events: []
+	}
+};
+/**
+* What Playwright may perform by setting the value from script, whose `input`
+* event is untrusted. An untrusted event the app fires itself is not taken
+* for any other action.
+*/
+const SCRIPTED = /* @__PURE__ */ new Set([
+	"fill",
+	"selectOption",
+	"setInputFiles"
+]);
+const NAVIGATIONS = /* @__PURE__ */ new Set([
+	"goto",
+	"goBack",
+	"goForward",
+	"reload"
+]);
+/** Only the page can tell a password field from another, so these values wait
+* for its report. */
+const VALUE_NEEDS_TARGET = /* @__PURE__ */ new Set([
+	"fill",
+	"type",
+	"press"
+]);
+/**
+* The actions a test takes between two nodes, each with the element it
+* landed on, for the edge between them. Two sources are needed because
+* neither knows enough alone.
+*
+* 1. What the test asked for. The Playwright client turns every call, such
+*    as `locator.click()`, into a protocol message, such as `Frame.click
+*    { selector }`, that it sends to the Playwright server driving the
+*    browser. Before sending, it calls `onApiCallBegin(zone, { type, method,
+*    params })` on its instrumentation, and `onApiCallEnd(zone)` once the
+*    reply arrives. `@playwright/test` builds its report steps from the same
+*    hook. It gives the exact action and its selector, value, key or URL, but
+*    not the tab it ran in or the element the selector resolved to. It is
+*    not public API, so when a Playwright release changes it, `attach` finds
+*    no listener interface and only the page's reports of clicks, typing and
+*    Enter remain.
+*
+* 2. Where it landed. An init script in every page reports the trusted DOM
+*    events Playwright's input causes: the element's role, name,
+*    `data-track-id` and box in the screenshot's space, whether it is a
+*    password field, and when the event fired. The binding it reports
+*    through tells which tab it came from. A navigation causes no such
+*    event, so its tab is the one that navigates while it runs (see
+*    `navigated`).
+*
+* A report travels from the page through the Playwright server separately
+* from the call's reply, so it can arrive after the next call began. It is
+* therefore matched by the time the event fired against each call's start
+* and end, never by arrival (see `landed`). A typed value survives only once
+* the page has shown that its field is not sensitive.
+*
+* Calls and node requests draw from one counter (`next`), so at the end of
+* the test `assign` can give each action to the edge into the first node
+* requested after it.
+*/
+var ActionLog = class {
+	next;
+	recording;
+	pageIdOf;
+	openPageIds;
+	actions = [];
+	byZone = /* @__PURE__ */ new WeakMap();
+	instrumentation;
+	listener = {
+		onApiCallBegin: (zone, call) => {
+			this.begin(zone, call);
+		},
+		onApiCallEnd: (zone) => {
+			const action = this.byZone.get(zone);
+			if (action) action.endedAtMs = Date.now();
+		}
+	};
+	constructor(next, recording, pageIdOf, openPageIds) {
+		this.next = next;
+		this.recording = recording;
+		this.pageIdOf = pageIdOf;
+		this.openPageIds = openPageIds;
+	}
+	attach(playwright) {
+		const instrumentation = playwright?._instrumentation;
+		if (typeof instrumentation?.addListener === "function" && typeof instrumentation.removeListener === "function") {
+			this.instrumentation = instrumentation;
+			this.instrumentation.addListener(this.listener);
+		}
+	}
+	detach() {
+		this.instrumentation?.removeListener(this.listener);
+	}
+	async observe(context) {
+		await Promise.all([
+			context.exposeBinding(BINDING, ({ page }, event) => {
+				if (isDomEvent(event)) this.landed(page, event);
+			}).catch(() => {}),
+			context.addInitScript(installActionReporter, BINDING).catch(() => {}),
+			...context.pages().map((page) => {
+				return page.evaluate(installActionReporter, BINDING).catch(() => {});
+			})
+		]);
+	}
+	/**
+	* A navigation reaches no element for the page to report, so the tab whose
+	* main frame navigates while the call runs is the tab it ran in.
+	*/
+	navigated(page) {
+		const pageId = this.pageIdOf(page);
+		const running = this.actions.slice(-20).reverse().find((action) => {
+			return NAVIGATIONS.has(action.kind) && action.pageId === void 0 && action.endedAtMs === void 0;
+		});
+		if (running && pageId !== void 0) running.pageId = pageId;
+	}
+	/**
+	* Each window's actions. An action goes to the earliest window
+	* that holds it, so the click that opened a popup is on the edge into the
+	* popup and not also on the next edge of its own tab. An action whose tab
+	* is still unknown goes to none: it could have run in any tab open then.
+	*/
+	assign(windows, limit) {
+		const taken = /* @__PURE__ */ new Set();
+		const assigned = /* @__PURE__ */ new Map();
+		const byEnd = [...windows].sort((a, b) => a.upTo - b.upTo);
+		for (const { nodeId, after, upTo, pageIds } of byEnd) {
+			const actions = this.actions.filter((action) => {
+				return !taken.has(action) && action.order > after && action.order <= upTo && action.pageId !== void 0 && pageIds.has(action.pageId);
+			});
+			for (const action of actions) taken.add(action);
+			if (actions.length > 0) assigned.set(nodeId, actions.slice(-limit).map(toRawAction));
+		}
+		return assigned;
+	}
+	begin(zone, call) {
+		const spec = ACTIONS[call.method];
+		if (!spec || ![
+			"Frame",
+			"Page",
+			"ElementHandle"
+		].includes(call.type) || !this.recording()) return;
+		const params = call.params ?? {};
+		const selector = typeof params["selector"] === "string" ? params["selector"] : typeof params["source"] === "string" ? params["source"] : void 0;
+		const open = this.openPageIds();
+		const action = {
+			kind: spec.kind,
+			order: this.next(),
+			startedAt: (/* @__PURE__ */ new Date()).toISOString(),
+			startedAtMs: Date.now(),
+			awaits: spec.events,
+			selector,
+			value: clip(spec.value?.(params)),
+			pageId: open.length === 1 ? open[0] : void 0
+		};
+		this.byZone.set(zone, action);
+		this.actions.push(action);
+	}
+	/**
+	* The event goes to the action that was running when it fired. Its report
+	* can reach here after the next action started, so arrival order says
+	* nothing. When one action ends in the millisecond the next starts, the
+	* earlier one takes it, since an event fires before its action returns.
+	*/
+	landed(page, event) {
+		const pageId = this.pageIdOf(page);
+		const action = this.actions.slice(-20).find((candidate) => {
+			return candidate.target === void 0 && candidate.awaits.includes(event.type) && (event.trusted || SCRIPTED.has(candidate.kind)) && candidate.startedAtMs <= event.at && event.at <= (candidate.endedAtMs ?? Infinity);
+		});
+		if (action) {
+			action.target = event.target;
+			action.sensitive = event.sensitive;
+			if (event.valueLength !== void 0) action.valueLength = event.valueLength;
+			if (pageId !== void 0) action.pageId = pageId;
+			return;
+		}
+		if (!this.instrumentation && event.trusted && this.recording()) this.logFromPage(event, pageId);
+	}
+	logFromPage(event, pageId) {
+		const kind = event.type === "click" ? "click" : event.type === "input" ? "fill" : event.type === "keydown" && event.key === "Enter" ? "press" : void 0;
+		if (kind === void 0) return;
+		const previous = this.actions.at(-1);
+		if (kind === "fill" && previous?.kind === "fill" && JSON.stringify(previous.target) === JSON.stringify(event.target)) return;
+		this.actions.push({
+			kind,
+			order: this.next(),
+			startedAt: (/* @__PURE__ */ new Date()).toISOString(),
+			startedAtMs: Date.now(),
+			awaits: [],
+			target: event.target,
+			sensitive: event.sensitive,
+			value: kind === "press" ? event.key : void 0,
+			pageId
+		});
+	}
+};
+function toRawAction(action) {
+	return {
+		kind: action.kind,
+		startedAt: action.startedAt,
+		pageId: action.pageId,
+		selector: action.selector,
+		value: revealedValue(action),
+		target: action.target
+	};
+}
+function revealedValue(action) {
+	if (!VALUE_NEEDS_TARGET.has(action.kind)) return action.value;
+	if (action.kind === "press" && (action.value?.length ?? 0) > 1) return action.value;
+	if (action.target === void 0 || action.sensitive !== false) return;
+	const length = action.value?.length ?? 0;
+	return (action.kind === "fill" ? action.valueLength === length : action.kind === "type" ? (action.valueLength ?? -1) >= length : true) ? action.value : void 0;
+}
+function clip(value) {
+	return value === void 0 || value.length <= MAX_TEXT ? value : value.slice(0, 199) + "…";
+}
+function isDomEvent(event) {
+	const candidate = event;
+	const box = candidate?.target?.box;
+	return typeof candidate?.type === "string" && typeof candidate.at === "number" && typeof candidate.trusted === "boolean" && typeof candidate.sensitive === "boolean" && typeof candidate.target?.tag === "string" && typeof box?.x === "number" && typeof box.y === "number" && typeof box.width === "number" && typeof box.height === "number";
+}
+/**
+* Runs in every page. Serialized by Playwright, so it may use nothing from
+* its module.
+*/
+function installActionReporter(binding) {
+	if (window !== window.top) return;
+	const installed = binding + "Installed";
+	if (installed in window) return;
+	Object.defineProperty(window, installed, { value: true });
+	const maxText = 200;
+	const clean = (value) => {
+		const collapsed = value?.replace(/\s+/g, " ").trim();
+		return collapsed ? collapsed.slice(0, maxText) : void 0;
+	};
+	const inputRoles = {
+		checkbox: "checkbox",
+		radio: "radio",
+		button: "button",
+		submit: "button",
+		reset: "button",
+		image: "button",
+		range: "slider",
+		number: "spinbutton",
+		search: "searchbox"
+	};
+	const roleOf = (element) => {
+		const explicit = element.getAttribute("role")?.trim().split(/\s+/)[0];
+		if (explicit) return explicit;
+		const tag = element.tagName.toLowerCase();
+		if (tag === "a") return element.hasAttribute("href") ? "link" : void 0;
+		if (tag === "button" || tag === "summary") return "button";
+		if (tag === "select") {
+			const select = element;
+			return select.multiple || select.size > 1 ? "listbox" : "combobox";
+		}
+		if (tag === "textarea") return "textbox";
+		if (tag === "option") return "option";
+		if (tag === "img") return "img";
+		if (/^h[1-6]$/.test(tag)) return "heading";
+		if (tag === "input") {
+			const input = element;
+			return inputRoles[input.type] ?? (input.hasAttribute("list") ? "combobox" : "textbox");
+		}
+	};
+	const nameOf = (element) => {
+		const labelledBy = element.getAttribute("aria-labelledby");
+		if (labelledBy) {
+			const labelled = clean(labelledBy.split(/\s+/).map((id) => document.getElementById(id)?.textContent ?? "").join(" "));
+			if (labelled) return labelled;
+		}
+		const ariaLabel = clean(element.getAttribute("aria-label"));
+		if (ariaLabel) return ariaLabel;
+		if (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+			const labels = clean([...element.labels ?? []].map((label) => label.textContent ?? "").join(" "));
+			if (labels) return labels;
+			if (element instanceof HTMLInputElement && [
+				"submit",
+				"button",
+				"reset"
+			].includes(element.type)) return clean(element.value);
+			return clean(element.getAttribute("placeholder")) ?? clean(element.getAttribute("title"));
+		}
+		if (element instanceof HTMLImageElement) return clean(element.alt) ?? clean(element.title);
+		return clean(element.innerText ?? element.textContent) ?? clean(element.getAttribute("title"));
+	};
+	const interactive = "a[href],button,input,select,textarea,summary,label,option,[role],[data-track-id],[contenteditable=\"\"],[contenteditable=\"true\"],[tabindex]";
+	let lastHovered;
+	const report = (event) => {
+		if (!event.isTrusted && event.type !== "input") return;
+		const origin = event.composedPath()[0];
+		const element = origin instanceof Element ? origin : origin instanceof Node ? origin.parentElement : null;
+		if (!element) return;
+		const actual = element.closest(interactive) ?? element;
+		if (event.type === "mouseover") {
+			if (actual === lastHovered) return;
+			lastHovered = actual;
+		}
+		const key = event.key;
+		const rect = actual.getBoundingClientRect();
+		const trackId = actual.closest("[data-track-id]")?.getAttribute("data-track-id");
+		const role = roleOf(actual);
+		const name = nameOf(actual);
+		const sensitive = actual instanceof HTMLInputElement && (actual.type === "password" || /password|one-time-code|cc-/.test(actual.autocomplete));
+		const valueLength = event.type === "input" && (actual instanceof HTMLInputElement || actual instanceof HTMLTextAreaElement) ? actual.value.length : void 0;
+		const send = window[binding];
+		if (typeof send !== "function") return;
+		send({
+			type: event.type,
+			trusted: event.isTrusted,
+			at: Date.now(),
+			...valueLength === void 0 ? {} : { valueLength },
+			...event.type === "keydown" && key && key.length > 1 ? { key } : {},
+			sensitive,
+			target: {
+				tag: actual.tagName.toLowerCase(),
+				...role ? { role } : {},
+				...name ? { name } : {},
+				...trackId ? { trackId } : {},
+				box: {
+					x: rect.x + window.scrollX,
+					y: rect.y + window.scrollY,
+					width: rect.width,
+					height: rect.height
+				}
+			}
+		}).catch(() => void 0);
+	};
+	for (const type of [
+		"click",
+		"dblclick",
+		"touchstart",
+		"mouseover",
+		"mousedown",
+		"dragstart",
+		"input",
+		"keydown"
+	]) window.addEventListener(type, report, {
+		capture: true,
+		passive: true
+	});
+}
 //#endregion
 //#region src/animations.ts
 /**
@@ -274,6 +730,8 @@ const SCREENSHOT_ATTACHMENT_PREFIX = "ralph-screenshot-";
 let warnedNoTracker = false;
 const DEFAULT_SETTLE_MS = 150;
 const DEFAULT_RECORD_TIMEOUT_MS = 5e3;
+/** The actions kept on one edge, the latest ones, so a long setup does not bloat the graph. */
+const MAX_ACTIONS_PER_EDGE = 100;
 /** Where the raw graph and screenshots are written, inside Playwright's per-test output directory. */
 const OUTPUT_DIR = "ralph";
 var Recorder = class {
@@ -316,7 +774,14 @@ var Recorder = class {
 	paused = false;
 	/** The most recently requested node, the anchor for tabs used while paused. */
 	lastRequestedNodeId;
-	constructor(options, config, testInfo, mode) {
+	/**
+	* Orders node requests and actions on one counter, which decides the edge
+	* an action belongs to. Timestamps could tie.
+	*/
+	order = 0;
+	requestOrder = /* @__PURE__ */ new Map();
+	actions = new ActionLog(() => ++this.order, () => !this.paused && !this.closed, (page) => this.pages.get(page)?.info.pageId, () => [...this.pages.values()].filter((state) => !state.page.isClosed()).map((state) => state.info.pageId));
+	constructor(options, config, testInfo, mode, playwright) {
 		this.options = options;
 		this.config = config;
 		this.testInfo = testInfo;
@@ -324,6 +789,7 @@ var Recorder = class {
 		this.settleMs = options.settleMs ?? DEFAULT_SETTLE_MS;
 		this.recordTimeoutMs = options.recordTimeoutMs ?? DEFAULT_RECORD_TIMEOUT_MS;
 		if (!(Number.isFinite(this.settleMs) && this.settleMs >= 0 && Number.isFinite(this.recordTimeoutMs) && this.recordTimeoutMs > this.settleMs)) throw new Error("Ralph recordTimeoutMs must be finite and greater than settleMs, which must be non-negative.");
+		this.actions.attach(playwright);
 	}
 	/** Starts recording URL changes in every current and future tab of `context`. */
 	observe(context) {
@@ -331,6 +797,7 @@ var Recorder = class {
 		if (this.contexts.has(context)) return;
 		const onPage = (page) => this.watchPage(page);
 		this.contexts.set(context, onPage);
+		this.actions.observe(context);
 		context.on("page", onPage);
 		for (const page of context.pages()) onPage(page);
 	}
@@ -339,7 +806,7 @@ var Recorder = class {
 		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?.name);
+		await this.enqueueCreateNodeRequest(state, "explicit", options);
 	}
 	async setNodeConditions(page, declaration) {
 		this.observe(page.context());
@@ -382,10 +849,12 @@ var Recorder = class {
 	*/
 	async finish() {
 		this.closed = true;
+		this.actions.detach();
 		await Promise.all([...this.contexts.keys()].map((context) => this.stopContext(context)));
 		await Promise.all([...this.pages.values()].map((state) => state.opener));
 		const nodes = this.nodes.sort((a, b) => a.pageId.localeCompare(b.pageId) || a.sequence - b.sequence);
 		linkPreviousNodes(nodes, (pageId) => this.pageInfo(pageId)?.openerPageId, (nodeId) => this.requestedAtMs.get(nodeId) ?? 0, (pageId) => this.pageState(pageId)?.pauseAnchor);
+		this.attachActions(nodes);
 		const failures = nodes.filter((item) => item.status === "uncaptured" && item.reason === "error");
 		await this.writeRawGraph(this.buildRawGraph(nodes, failures.length));
 		const mismatched = nodes.filter((item) => item.tagMismatches?.length);
@@ -407,7 +876,10 @@ var Recorder = class {
 			tail: Promise.resolve(),
 			opener: Promise.resolve(),
 			onNavigation: (frame) => {
-				if (frame === page.mainFrame()) this.urlChanged(state);
+				if (frame === page.mainFrame()) {
+					this.actions.navigated(page);
+					this.urlChanged(state);
+				}
 			}
 		};
 		this.pages.set(page, state);
@@ -440,7 +912,7 @@ var Recorder = class {
 		return page.evaluate(() => window.__ralphTags?.()).catch(() => void 0);
 	}
 	/** Queues a recording behind the tab's earlier ones. */
-	enqueueCreateNodeRequest(state, trigger, name) {
+	enqueueCreateNodeRequest(state, trigger, { name, edgeLabel } = {}) {
 		const url = state.page.url();
 		if (!isHttpUrl(url)) throw new Error("Ralph recordings require an HTTP or HTTPS page.");
 		const request = {
@@ -451,9 +923,11 @@ var Recorder = class {
 			actualUrl: url,
 			url,
 			trigger,
-			...name === void 0 ? {} : { name }
+			...name === void 0 ? {} : { name },
+			...edgeLabel === void 0 ? {} : { edgeLabel }
 		};
 		this.requestedAtMs.set(request.nodeId, Date.now());
+		this.requestOrder.set(request.nodeId, ++this.order);
 		this.lastRequestedNodeId = request.nodeId;
 		const generation = state.generation;
 		const task = state.tail.then(() => this.createNode(state, generation, request));
@@ -519,9 +993,10 @@ var Recorder = class {
 					nodeId: request.nodeId
 				};
 			} else {
-				const { nodeId, sequence, requestedAt, name } = this.nodes[retaken];
+				const { nodeId, sequence, requestedAt, name, edgeLabel } = this.nodes[retaken];
 				this.nodes[retaken] = {
 					...name === void 0 ? {} : { name },
+					...edgeLabel === void 0 ? {} : { edgeLabel },
 					...recorded,
 					nodeId,
 					sequence,
@@ -567,6 +1042,24 @@ var Recorder = class {
 			contentType: image.contentType
 		};
 	}
+	/** Gives each node the actions taken since the node it was reached from was requested. */
+	attachActions(nodes) {
+		const byId = new Map(nodes.map((item) => [item.nodeId, item]));
+		const windows = nodes.flatMap((item) => {
+			const from = byId.get(item.previousNodeId ?? "");
+			return from ? [{
+				nodeId: item.nodeId,
+				after: this.requestOrder.get(from.nodeId) ?? 0,
+				upTo: this.requestOrder.get(item.nodeId) ?? 0,
+				pageIds: /* @__PURE__ */ new Set([from.pageId, item.pageId])
+			}] : [];
+		});
+		const actions = this.actions.assign(windows, MAX_ACTIONS_PER_EDGE);
+		for (const item of nodes) {
+			const taken = actions.get(item.nodeId);
+			if (taken) item.actions = taken;
+		}
+	}
 	pageState(pageId) {
 		return [...this.pages.values()].find((state) => state.info.pageId === pageId);
 	}
@@ -952,4 +1445,4 @@ Object.defineProperty(exports, "version", {
 	}
 });
 
-//# sourceMappingURL=upload-ZMnTCjs2.cjs.map
+//# sourceMappingURL=upload-BvAi7mMY.cjs.map