objs-core 2.2.1 → 2.4.0

package/objs.js

@@ -1,6 +1,6 @@
 /**
  * @fileoverview Objs-core library
- * @version 2.2
+ * @version 2.4.0
  * @author Roman Torshin
  * @license Apache-2.0
  */
@@ -1029,6 +1029,50 @@ const __DEV__ = true;
 		result.style(val || null);
 	}, "css");
 
+	/**
+	 * Merge into existing inline styles. Pass null for a property to remove it; pass null for the whole argument to clear the style attribute (same as css(null)).
+	 * Keys may be camelCase or kebab-case; stored names follow kebab-case in the serialized attribute.
+	 * @param {Object|null} styles - Partial CSS properties, or null to remove style entirely
+	 */
+	result.cssMerge = returner((styles = {}) => {
+		if (styles === null) {
+			result.style(null);
+			return;
+		}
+		typeVerify([[styles, objectType]]);
+		const normKey = (k) => (k.indexOf("-") !== -1 ? k : o.camelToKebab(k));
+		const parseStyleAttr = (s) => {
+			const out = {};
+			if (!s || typeof s !== stringType) return out;
+			const parts = s.split(";");
+			for (let p = 0; p < parts.length; p++) {
+				const part = parts[p];
+				const idx = part.indexOf(":");
+				if (idx === -1) continue;
+				const key = part.slice(0, idx).trim();
+				const val = part.slice(idx + 1).trim();
+				if (key) out[key] = val;
+			}
+			return out;
+		};
+		iterator(() => {
+			const el = result.els[i];
+			const merged = parseStyleAttr(el.getAttribute("style"));
+			cycleObj(styles, (style) => {
+				const k = normKey(style);
+				const v = styles[style];
+				if (v === null || v === u) delete merged[k];
+				else merged[k] = String(v).replace('"', "'");
+			});
+			let serialized = "";
+			cycleObj(merged, (k) => {
+				serialized += k + ":" + merged[k] + ";";
+			});
+			if (serialized) el.setAttribute("style", serialized);
+			else el.removeAttribute("style");
+		});
+	}, "cssMerge");
+
 	/**
 	 * Set class attribute
 	 * @param {string} cl - Class name
@@ -2754,25 +2798,44 @@ o.test = (title = "", ...tests) => {
 
 	const finalize = () => {
 		if (o.tFinalized[testN]) return;
+		// When waits > 0, defer finalization to o.testUpdate (when async step resolves)
+		if (waits > 0) {
+			row = "├ ";
+			row += "DONE " + done + "/" + num + ", waiting: " + waits;
+			log(row, true);
+			if (o.tStyled) {
+				o.tLog[testN] +=
+					o.tPre +
+					'<div style="color:orange;"><b>DONE ' +
+					done +
+					"/" +
+					num +
+					", waiting: " +
+					waits +
+					"</b>" +
+					o.tDc +
+					o.tDc;
+			} else {
+				o.tLog[testN] += row + "\n";
+			}
+			return;
+		}
 		o.tFinalized[testN] = true;
 		const anyFailed = o.tStatus[testN].some((s) => s === false);
 		o.tRes[testN] = !anyFailed && done === num;
-		row = waits ? "├ " : "╘ ";
-		row += "DONE " + done + "/" + num + (waits ? ", waiting: " + waits : "");
-		log(row, done + waits !== num);
-		if (!waits) {
-			log();
-		}
+		row = "╘ ";
+		row += "DONE " + done + "/" + num;
+		log(row, done !== num);
+		log();
 		if (o.tStyled) {
 			o.tLog[testN] +=
 				o.tPre +
 				'<div style="color:' +
-				(done + waits !== num ? "red" : "green") +
+				(done !== num ? "red" : "green") +
 				';"><b>DONE ' +
 				done +
 				"/" +
 				num +
-				(waits ? ", waiting: " + waits : "") +
 				"</b>" +
 				o.tDc +
 				o.tDc;
@@ -2784,7 +2847,7 @@ o.test = (title = "", ...tests) => {
 			sessionStorage.setItem(`oTest-Res-${testN}`, o.tRes[testN]);
 			sessionStorage.setItem(`oTest-Status-${testN}`, JSON.stringify(o.tStatus[testN]));
 		}
-		if (!waits && typeof o.tFns[testN] === "function") {
+		if (typeof o.tFns[testN] === "function") {
 			o.tFns[testN](testN);
 		}
 	};
@@ -3224,6 +3287,7 @@ o.recorder = {
 	initialData: {},
 	assertions: [],
 	observeRoot: null,
+	strictCapture: null,
 	_originalFetch: null,
 	_listeners: [],
 	_observer: null,
@@ -3233,7 +3297,7 @@ o.recordingAssertionDebug = false;
 
 /**
  * Start recording user interactions
- * @param {string} [observe] - CSS selector to scope the MutationObserver (reduces assertion noise)
+ * @param {string|{observe?: string, events?: string[], timeouts?: Record<string, number>, strictCaptureAssertions?: boolean, strictCaptureNetwork?: boolean, strictCaptureWebSocket?: boolean}} [observe] - CSS selector, or an options object with observe/events/timeouts and optional strictCapture* flags (stored on the recording for replay defaults)
  * @param {string[]} [events] - Events to record (default: click, mouseover, scroll, input, change)
  * @param {{[event: string]: number}} [timeouts] - Debounce delays per event type in ms
  */
@@ -3241,25 +3305,81 @@ o.startRecording = (observe, events, timeouts) => {
 	if (o.recorder.active) {
 		return;
 	}
-	const defaultEvents = ["click", "mouseover", "scroll", "input", "change"];
+	let observeSel;
+	let eventsOpt;
+	let timeoutsOpt;
+	let strictCapture = null;
+	const isStartBag =
+		observe != null &&
+		typeof observe === "object" &&
+		!Array.isArray(observe) &&
+		(o.C(observe, "observe") ||
+			o.C(observe, "events") ||
+			o.C(observe, "timeouts") ||
+			o.C(observe, "strictCaptureAssertions") ||
+			o.C(observe, "strictCaptureNetwork") ||
+			o.C(observe, "strictCaptureWebSocket"));
+	if (isStartBag) {
+		const bag = observe;
+		observeSel = bag.observe != null ? String(bag.observe) : undefined;
+		eventsOpt = bag.events;
+		timeoutsOpt = bag.timeouts;
+		if (
+			o.C(bag, "strictCaptureAssertions") ||
+			o.C(bag, "strictCaptureNetwork") ||
+			o.C(bag, "strictCaptureWebSocket")
+		) {
+			strictCapture = {
+				assertions: !!bag.strictCaptureAssertions,
+				network: !!bag.strictCaptureNetwork,
+				websocket: !!bag.strictCaptureWebSocket,
+			};
+		}
+	} else {
+		observeSel = typeof observe === "string" ? observe : undefined;
+		eventsOpt = events;
+		timeoutsOpt = timeouts;
+	}
+	const defaultEvents = [
+		"click",
+		"mouseover",
+		"scroll",
+		"input",
+		"change",
+		"submit",
+		"keydown",
+		"focus",
+		"blur",
+	];
 	const defaultStepDelays = {
 		click: 100,
 		mouseover: 50,
 		scroll: 30,
 		input: 50,
 		change: 50,
+		submit: 100,
+		keydown: 50,
+		focus: 50,
+		blur: 50,
+	};
+	const listenEvents = eventsOpt || defaultEvents;
+	const stepDelays = Object.assign({}, defaultStepDelays, timeoutsOpt || {});
+	const captureDebounce = {
+		scroll: 30,
+		mouseover: 50,
+		keydown: 50,
+		focus: 50,
+		blur: 50,
 	};
-	const listenEvents = events || defaultEvents;
-	const stepDelays = Object.assign({}, defaultStepDelays, timeouts || {});
-	const captureDebounce = { scroll: 30, mouseover: 50 };
 	const rec = o.recorder;
 	rec.active = true;
 	rec.actions = [];
 	rec.mocks = {};
 	rec.stepDelays = stepDelays;
 	rec.initialData = { url: window.location.href, timestamp: Date.now() };
+	rec.strictCapture = strictCapture;
 
-	rec.observeRoot = observe || null;
+	rec.observeRoot = observeSel || null;
 	rec.assertions = [];
 	rec.removedElements = [];
 
@@ -3299,6 +3419,71 @@ o.startRecording = (observe, events, timeouts) => {
 		return response;
 	};
 
+	// intercept XMLHttpRequest
+	rec._originalXHROpen = XMLHttpRequest.prototype.open;
+	rec._originalXHRSend = XMLHttpRequest.prototype.send;
+	XMLHttpRequest.prototype.open = function (method, url) {
+		this._oMethod = (method || "GET").toUpperCase();
+		this._oUrl = url;
+		return rec._originalXHROpen.apply(this, arguments);
+	};
+	XMLHttpRequest.prototype.send = function (body) {
+		const capture = () => {
+			if (this.readyState !== 4) return;
+			let reqBody;
+			try {
+				reqBody = body ? JSON.parse(body) : undefined;
+			} catch (_e) {
+				reqBody = body;
+			}
+			let respBody;
+			try {
+				const text = this.responseText;
+				respBody = text ? JSON.parse(text) : null;
+			} catch (_e) {
+				respBody = this.responseText ?? null;
+			}
+			const key = (this._oMethod || "GET") + ":" + (this._oUrl || "");
+			rec.mocks[key] = {
+				url: this._oUrl,
+				method: this._oMethod,
+				request: reqBody,
+				response: respBody,
+				status: this.status,
+			};
+		};
+		this.addEventListener("readystatechange", capture);
+		return rec._originalXHRSend.apply(this, arguments);
+	};
+
+	// intercept WebSocket
+	rec.websocketEvents = [];
+	rec._originalWebSocket = window.WebSocket;
+	window.WebSocket = function (url, protocols) {
+		const ws = new rec._originalWebSocket(url, protocols);
+		const id = rec.websocketEvents.length;
+		rec.websocketEvents.push({
+			url: typeof url === "string" ? url : String(url),
+			protocol: Array.isArray(protocols) ? protocols[0] : protocols,
+			open: true,
+			messages: [],
+		});
+		ws.addEventListener("message", (e) => {
+			const data = typeof e.data === "string" ? e.data : String(e.data);
+			rec.websocketEvents[id].messages.push({ dir: "in", data });
+		});
+		ws.addEventListener("close", () => {
+			rec.websocketEvents[id].open = false;
+		});
+		const origSend = ws.send.bind(ws);
+		ws.send = function (data) {
+			const d = typeof data === "string" ? data : String(data);
+			rec.websocketEvents[id].messages.push({ dir: "out", data: d });
+			return origSend(data);
+		};
+		return ws;
+	};
+
 	// Internal Objs attributes must not be used for selectors (they change across restores).
 	const unstableDataAttrs = { "data-o-init": 1, "data-o-init-i": 1, "data-o-state": 1 };
 	const qualify = (sel, fromNode) => {
@@ -3352,7 +3537,7 @@ o.startRecording = (observe, events, timeouts) => {
 	};
 
 	// Scoped MutationObserver: captures DOM mutations tied to the last recorded action
-	const observeTarget = (observe && o.D.querySelector(observe)) || o.D.body;
+	const observeTarget = (observeSel && o.D.querySelector(observeSel)) || o.D.body;
 	rec._observer = new MutationObserver((mutations) => {
 		const actionIdx = rec.actions.length - 1;
 		if (actionIdx < 0) return;
@@ -3373,22 +3558,28 @@ o.startRecording = (observe, events, timeouts) => {
 				if (sel && observeTarget) {
 					const matches = observeTarget.querySelectorAll(sel);
 					if (matches.length > 1) {
-						let n = node;
-						while (n && n !== observeTarget && n.nodeType === 1) {
-							const qaAttr = o.autotag && n.dataset && n.dataset[o.autotag];
-							if (qaAttr) {
-								const itemSel = `[data-${o.autotag}="${qaAttr}"]`;
-								const itemMatches = observeTarget.querySelectorAll(itemSel);
-								if (itemMatches.length > 1) {
-									const idx = [...itemMatches].indexOf(n);
-									if (idx !== -1) {
-										listSelector = itemSel;
-										index = idx;
-										break;
+						const idxAmong = [...matches].indexOf(node);
+						if (idxAmong !== -1) {
+							listSelector = sel;
+							index = idxAmong;
+						} else {
+							let n = node;
+							while (n && n !== observeTarget && n.nodeType === 1) {
+								const qaAttr = o.autotag && n.dataset && n.dataset[o.autotag];
+								if (qaAttr) {
+									const itemSel = `[data-${o.autotag}="${qaAttr}"]`;
+									const itemMatches = observeTarget.querySelectorAll(itemSel);
+									if (itemMatches.length > 1) {
+										const idx = [...itemMatches].indexOf(n);
+										if (idx !== -1) {
+											listSelector = itemSel;
+											index = idx;
+											break;
+										}
 									}
 								}
+								n = n.parentElement;
 							}
-							n = n.parentElement;
 						}
 					}
 				}
@@ -3461,30 +3652,53 @@ o.startRecording = (observe, events, timeouts) => {
 				});
 			}
 			if (m.type === "attributes") {
+				const attr = m.attributeName;
+				if (!attr) return;
 				const sel = buildSelector(m.target);
 				if (!sel) return;
+				const attrToType = {
+					class: "class",
+					style: "style",
+					hidden: "hidden",
+					disabled: "disabled",
+					"aria-expanded": "aria-expanded",
+					"aria-checked": "aria-checked",
+				};
+				const type = attrToType[attr];
+				if (!type) return;
 				if (
 					rec.assertions.some(
-						(a) => a.actionIdx === actionIdx && a.selector === sel && a.type === "class",
+						(a) => a.actionIdx === actionIdx && a.selector === sel && a.type === type,
 					)
 				)
 					return;
 				const { listSelector: aListSel, index: aIdx } = addAssertionIndex(sel, m.target);
-				const a = {
-					actionIdx,
-					type: "class",
-					selector: sel,
-					className: m.target.className,
-				};
+				const el = m.target;
+				let value;
+				if (type === "class") value = el.className;
+				else if (type === "style") value = el.style?.cssText || el.getAttribute("style") || "";
+				else if (type === "hidden") value = el.hidden;
+				else if (type === "disabled") value = el.disabled === true;
+				else if (type === "aria-expanded")
+					value = el.getAttribute("aria-expanded");
+				else if (type === "aria-checked") value = el.getAttribute("aria-checked");
+				const a = { actionIdx, type, selector: sel };
+				if (type === "class") a.className = value;
+				else if (type === "style") a.style = value;
+				else if (type === "hidden") a.hidden = value;
+				else if (type === "disabled") a.disabled = value;
+				else if (type === "aria-expanded") a.ariaExpanded = value;
+				else if (type === "aria-checked") a.ariaChecked = value;
 				if (aListSel != null) a.listSelector = aListSel;
 				if (aIdx != null) a.index = aIdx;
 				rec.assertions.push(a);
 				if (o.recordingAssertionDebug && typeof console !== "undefined" && console.log) {
-					console.log("[recording] +class assertion:", {
+					console.log("[recording] +attr assertion:", {
 						actionIdx,
 						lastAction: lastAction?.type + " " + lastAction?.target,
 						selector: sel,
-						className: m.target.className,
+						type,
+						value,
 						index: aIdx,
 						listSelector: aListSel,
 					});
@@ -3512,7 +3726,7 @@ o.startRecording = (observe, events, timeouts) => {
 		const handler = (e) => {
 			const target = e.target;
 			if (
-				observe &&
+				observeSel &&
 				observeTarget &&
 				target?.nodeType === 1 &&
 				!observeTarget.contains(target)
@@ -3542,22 +3756,28 @@ o.startRecording = (observe, events, timeouts) => {
 			if (selector && observeTarget) {
 				const matches = observeTarget.querySelectorAll(selector);
 				if (matches.length > 1) {
-					let node = target;
-					while (node && node !== observeTarget && node.nodeType === 1) {
-						const qaAttr = o.autotag && node.dataset && node.dataset[o.autotag];
-						if (qaAttr) {
-							const itemSel = `[data-${o.autotag}="${qaAttr}"]`;
-							const itemMatches = observeTarget.querySelectorAll(itemSel);
-							if (itemMatches.length > 1) {
-								const idx = [...itemMatches].indexOf(node);
-								if (idx !== -1) {
-									listSelector = itemSel;
-									targetIndex = idx;
-									break;
+					const idxAmongMatches = [...matches].indexOf(target);
+					if (idxAmongMatches !== -1) {
+						listSelector = selector;
+						targetIndex = idxAmongMatches;
+					} else {
+						let node = target;
+						while (node && node !== observeTarget && node.nodeType === 1) {
+							const qaAttr = o.autotag && node.dataset && node.dataset[o.autotag];
+							if (qaAttr) {
+								const itemSel = `[data-${o.autotag}="${qaAttr}"]`;
+								const itemMatches = observeTarget.querySelectorAll(itemSel);
+								if (itemMatches.length > 1) {
+									const idx = [...itemMatches].indexOf(node);
+									if (idx !== -1) {
+										listSelector = itemSel;
+										targetIndex = idx;
+										break;
+									}
 								}
 							}
+							node = node.parentElement;
 						}
-						node = node.parentElement;
 					}
 				}
 			}
@@ -3572,21 +3792,44 @@ o.startRecording = (observe, events, timeouts) => {
 				ev === "change" && (target?.type === "checkbox" || target?.type === "radio")
 					? target?.checked
 					: undefined;
+			// For keydown, capture key/code for replay
+			const key = ev === "keydown" ? target?.key : undefined;
+			const code = ev === "keydown" ? target?.code : undefined;
 
-			// Push click/change immediately so MutationObserver sees correct actionIdx
+			// Push click/change/submit immediately so MutationObserver sees correct actionIdx
 			// (mutations fire sync after target handler; debounce would attach assertions to wrong action)
 			const delay =
-				ev === "click" || ev === "change"
+				ev === "click" || ev === "change" || ev === "submit"
 					? 0
 					: stepDelays[ev] !== undefined
 						? stepDelays[ev]
 						: captureDebounce[ev] ?? 0;
 			const pushAction = () => {
+				// Don't record blur/focus on elements removed by the previous action (e.g. click delete → blur on removed node)
+				if ((ev === "blur" || ev === "focus") && selector) {
+					const lastIdx = rec.actions.length - 1;
+					const lastAction = lastIdx >= 0 ? rec.actions[lastIdx] : null;
+					if (lastAction) {
+						const sameTarget =
+							lastAction.target === selector &&
+							(lastAction.listSelector == null) === (listSelector == null) &&
+							(lastAction.targetIndex == null) === (targetIndex == null) &&
+							(lastAction.targetIndex == null || lastAction.targetIndex === targetIndex);
+						if (sameTarget) return;
+						for (const r of rec.removedElements) {
+							if (r.actionIdx !== lastIdx) continue;
+							if (r.selector === selector || selector.startsWith(r.selector + " ") || selector.startsWith(r.selector + ">"))
+								return;
+						}
+					}
+				}
 				const action = { type: ev, target: selector, time: Date.now() };
 				if (targetType) action.targetType = targetType;
 				if (scrollY !== undefined) action.scrollY = scrollY;
 				if (value !== undefined) action.value = value;
 				if (checked !== undefined) action.checked = checked;
+				if (key !== undefined) action.key = key;
+				if (code !== undefined) action.code = code;
 				if (listSelector != null) action.listSelector = listSelector;
 				if (targetIndex != null) action.targetIndex = targetIndex;
 				rec.actions.push(action);
@@ -3614,6 +3857,16 @@ o.stopRecording = () => {
 		window.fetch = rec._originalFetch;
 		rec._originalFetch = null;
 	}
+	if (rec._originalXHROpen) {
+		XMLHttpRequest.prototype.open = rec._originalXHROpen;
+		XMLHttpRequest.prototype.send = rec._originalXHRSend;
+		rec._originalXHROpen = null;
+		rec._originalXHRSend = null;
+	}
+	if (rec._originalWebSocket) {
+		window.WebSocket = rec._originalWebSocket;
+		rec._originalWebSocket = null;
+	}
 	rec._listeners.forEach(({ ev, handler }) => {
 		o.D.removeEventListener(ev, handler, true);
 	});
@@ -3622,7 +3875,7 @@ o.stopRecording = () => {
 		rec._observer.disconnect();
 		rec._observer = null;
 	}
-	return {
+	const out = {
 		actions: [...rec.actions],
 		mocks: { ...rec.mocks },
 		initialData: { ...rec.initialData },
@@ -3630,7 +3883,12 @@ o.stopRecording = () => {
 		assertions: [...(rec.assertions || [])],
 		removedElements: [...(rec.removedElements || [])],
 		observeRoot: rec.observeRoot || null,
+		websocketEvents: [...(rec.websocketEvents || [])],
 	};
+	if (rec.strictCapture) {
+		out.strictCapture = { ...rec.strictCapture };
+	}
+	return out;
 };
 
 /**
@@ -3654,10 +3912,14 @@ o.clearRecording = (id) => {
  * Run recording assertions in the current DOM.
  * @param {{actions: Array, assertions: Array, observeRoot?: string}} recording
  * @param {Element|string} [root] - Root element or selector; defaults to recording.observeRoot or document.body
- * @param {number} [actionIdx] - When provided, run only assertions for this action index
+ * @param {number} [actionIdx] - When set, only assertions for this action run and **removedElements** matching uses this index; when omitted, **isRemoved** is never true (no removed-element skip / strictRemoved), so full runs should pass **actionIdx** per step like **o.playRecording** does.
+ * @param {{assertions?: Array, removedElements?: Array, strictAssertions?: boolean, strictRemoved?: boolean}} [opts] - optional filtered assertions; strictAssertions tightens list index, visible text, style, className; strictRemoved verifies removed nodes are absent (default: same as strictAssertions when omitted)
  * @returns {{ passed: number, total: number, failures: Array<{selector: string, message: string}> }}
  */
 o.runRecordingAssertions = (recording, root, actionIdx, opts) => {
+	const strictAssertions = !!(opts && opts.strictAssertions);
+	const strictRemoved =
+		opts && opts.strictRemoved !== undefined ? !!opts.strictRemoved : strictAssertions;
 	const preFiltered = opts && opts.assertions;
 	const assertions =
 		preFiltered != null
@@ -3695,6 +3957,8 @@ o.runRecordingAssertions = (recording, root, actionIdx, opts) => {
 	};
 	const r = resolveRoot();
 	const norm = (s) => (s || "").trim().replace(/\s+/g, " ");
+	const styleNorm = (s) =>
+		norm(String(s || "").replace(/\s*:\s*/g, ": ").replace(/\s*;\s*/g, "; "));
 	const getText = (el) => (el ? norm(el.textContent || "") : "");
 	const removedElements = opts?.removedElements || [];
 	const isRemoved = (a) => {
@@ -3714,20 +3978,77 @@ o.runRecordingAssertions = (recording, root, actionIdx, opts) => {
 	const failures = [];
 	for (const a of deduped) {
 		if (isRemoved(a)) {
-			passed += 1;
-			if (o.recordingAssertionDebug && typeof console !== "undefined" && console.log) {
-				console.log("[runRecordingAssertions] skip (explicit removed):", {
-					actionIdx: a.actionIdx,
+			if (!strictRemoved) {
+				passed += 1;
+				if (o.recordingAssertionDebug && typeof console !== "undefined" && console.log) {
+					console.log("[runRecordingAssertions] skip (explicit removed):", {
+						actionIdx: a.actionIdx,
+						selector: a.selector,
+						text: (a.text || "").slice(0, 40),
+					});
+				}
+				continue;
+			}
+			let ghost = null;
+			const expText = norm(a.text || "");
+			if (a.listSelector != null && a.index != null) {
+				const items = r.querySelectorAll(a.listSelector);
+				let item = items[a.index];
+				if (!item && a.index > 0) item = items[a.index - 1];
+				if (item) {
+					ghost =
+						a.selector !== a.listSelector
+							? item.querySelector(a.selector) || item
+							: item;
+				}
+				if (!ghost && expText && a.type === "visible") {
+					for (let j = 0; j < items.length; j++) {
+						const it = items[j];
+						const cand =
+							a.selector !== a.listSelector
+								? it.querySelector(a.selector) || it
+								: it;
+						if (cand && getText(cand).indexOf(expText) !== -1) {
+							ghost = cand;
+							break;
+						}
+					}
+				}
+			} else {
+				const matches = r.querySelectorAll(a.selector);
+				ghost = matches.length > 0 ? matches[0] : o.D.querySelector(a.selector);
+			}
+			if (ghost && a.type === "visible") {
+				const vis =
+					ghost.nodeType === 1 &&
+					(ghost.offsetParent !== null ||
+						(ghost.getBoundingClientRect && ghost.getBoundingClientRect().width > 0));
+				const gtext = getText(ghost);
+				const still =
+					vis && (!expText || gtext.indexOf(expText) !== -1 || expText.indexOf(gtext) !== -1);
+				if (still) {
+					failures.push({
+						selector: a.selector,
+						message: "expected absent (recorded removed) but matching content still visible",
+					});
+					continue;
+				}
+			} else if (ghost && a.type !== "visible") {
+				failures.push({
 					selector: a.selector,
-					text: (a.text || "").slice(0, 40),
+					message: "expected absent (recorded removed) but element still present",
 				});
+				continue;
 			}
+			passed += 1;
 			continue;
 		}
 		let el = null;
 		let indexOutOfBounds = false;
+		let listItemsLength = -1;
 		if (a.listSelector != null && a.index != null) {
 			const items = r.querySelectorAll(a.listSelector);
+			listItemsLength = items.length;
 			const expectedText = norm(a.text || "");
 			const tryItem = (idx) => {
 				const it = items[idx];
@@ -3736,28 +4057,38 @@ o.runRecordingAssertions = (recording, root, actionIdx, opts) => {
 					a.selector !== a.listSelector ? it.querySelector(a.selector) : it;
 				return (e || (a.selector !== a.listSelector ? it : null));
 			};
-			let item = items[a.index];
-			if (!item && a.index > 0) item = items[a.index - 1];
-			if (item) {
-				el = tryItem(a.index) || (a.index > 0 ? tryItem(a.index - 1) : null);
-				if (!el && a.selector !== a.listSelector) el = item;
-				if (a.type === "visible" && expectedText && el) {
-					const actualText = getText(el);
-					const textMismatch =
-						actualText.indexOf(expectedText) === -1 &&
-						expectedText.indexOf(actualText) === -1;
-					if (textMismatch) {
-						for (let j = 0; j < items.length; j++) {
-							const candEl = tryItem(j);
-							if (candEl && getText(candEl).indexOf(expectedText) !== -1) {
-								el = candEl;
-								item = items[j];
-								break;
+			let item;
+			if (strictAssertions) {
+				item = items[a.index];
+				if (item) {
+					el = tryItem(a.index);
+					if (!el && a.selector !== a.listSelector) el = item;
+				}
+			} else {
+				item = items[a.index];
+				if (!item && a.index > 0) item = items[a.index - 1];
+				if (item) {
+					el = tryItem(a.index) || (a.index > 0 ? tryItem(a.index - 1) : null);
+					if (!el && a.selector !== a.listSelector) el = item;
+					if (a.type === "visible" && expectedText && el) {
+						const actualText = getText(el);
+						const textMismatch =
+							actualText.indexOf(expectedText) === -1 &&
+							expectedText.indexOf(actualText) === -1;
+						if (textMismatch) {
+							for (let j = 0; j < items.length; j++) {
+								const candEl = tryItem(j);
+								if (candEl && getText(candEl).indexOf(expectedText) !== -1) {
+									el = candEl;
+									item = items[j];
+									break;
+								}
 							}
 						}
 					}
 				}
-			} else {
+			}
+			if (!item) {
 				indexOutOfBounds = true;
 			}
 		} else {
@@ -3772,17 +4103,20 @@ o.runRecordingAssertions = (recording, root, actionIdx, opts) => {
 					(el.getBoundingClientRect && el.getBoundingClientRect().width > 0));
 			const expectedText = norm(a.text || "");
 			const actualText = getText(el);
-			const fullActual = actualText;
-			const textOk =
-				!expectedText ||
-				actualText.indexOf(expectedText) !== -1 ||
-				fullActual.indexOf(expectedText) !== -1 ||
-				(expectedText.length > 0 && expectedText.indexOf(actualText) !== -1);
+			const textOk = strictAssertions
+				? !expectedText || actualText === expectedText
+				: !expectedText ||
+					actualText.indexOf(expectedText) !== -1 ||
+					(expectedText.length > 0 && expectedText.indexOf(actualText) !== -1);
 			if (visible && textOk) {
 				passed += 1;
 			} else {
+				const listCount =
+					listItemsLength >= 0
+						? listItemsLength
+						: r.querySelectorAll(a.listSelector || a.selector).length;
 				const message = indexOutOfBounds
-					? `index out of bounds (list has ${r.querySelectorAll(a.listSelector || a.selector).length} items, assertion expected index ${a.index})`
+					? `index out of bounds (list has ${listCount} items, assertion expected index ${a.index})`
 					: !el
 						? "element not found"
 						: !visible
@@ -3807,14 +4141,20 @@ o.runRecordingAssertions = (recording, root, actionIdx, opts) => {
 			const tokens = (a.className || "").trim().split(/\s+/).filter(Boolean);
 			const hasClass =
 				el && (tokens.length === 0 || tokens.every((c) => el.classList?.contains(c)));
-			if (hasClass) {
+			const classOrderOk =
+				!strictAssertions ||
+				!a.className ||
+				norm((el?.className || "").trim()) === norm((a.className || "").trim());
+			if (hasClass && classOrderOk) {
 				passed += 1;
 			} else {
 				const msg = indexOutOfBounds
 					? `index out of bounds (list has ${r.querySelectorAll(a.listSelector).length} items, expected index ${a.index})`
 					: !el
 						? "element not found"
-						: `expected class "${a.className}"`;
+						: hasClass && !classOrderOk
+							? `expected exact className "${a.className}" (strict)`
+							: `expected class "${a.className}"`;
 				failures.push({ selector: a.selector, message: msg });
 				if (typeof console !== "undefined" && console.warn) {
 					console.warn("[runRecordingAssertions] failed:", {
@@ -3828,20 +4168,70 @@ o.runRecordingAssertions = (recording, root, actionIdx, opts) => {
 					});
 				}
 			}
+		} else if (a.type === "style") {
+			const expected = (a.style || "").trim();
+			const actual = (el?.style?.cssText || el?.getAttribute?.("style") || "").trim();
+			const ok =
+				el &&
+				(!expected ||
+					(strictAssertions
+						? styleNorm(actual) === styleNorm(expected)
+						: actual.indexOf(expected) !== -1 || expected === actual));
+			if (ok) {
+				passed += 1;
+			} else {
+				const msg = !el ? "element not found" : `expected style "${expected.slice(0, 60)}..."`;
+				failures.push({ selector: a.selector, message: msg });
+			}
+		} else if (a.type === "hidden") {
+			const ok = el && el.hidden === a.hidden;
+			if (ok) {
+				passed += 1;
+			} else {
+				const msg = !el ? "element not found" : `expected hidden=${a.hidden}`;
+				failures.push({ selector: a.selector, message: msg });
+			}
+		} else if (a.type === "disabled") {
+			const ok = el && el.disabled === a.disabled;
+			if (ok) {
+				passed += 1;
+			} else {
+				const msg = !el ? "element not found" : `expected disabled=${a.disabled}`;
+				failures.push({ selector: a.selector, message: msg });
+			}
+		} else if (a.type === "aria-expanded") {
+			const actual = el?.getAttribute?.("aria-expanded");
+			const ok = el && (a.ariaExpanded == null || String(actual) === String(a.ariaExpanded));
+			if (ok) {
+				passed += 1;
+			} else {
+				const msg = !el ? "element not found" : `expected aria-expanded="${a.ariaExpanded}"`;
+				failures.push({ selector: a.selector, message: msg });
+			}
+		} else if (a.type === "aria-checked") {
+			const actual = el?.getAttribute?.("aria-checked");
+			const ok = el && (a.ariaChecked == null || String(actual) === String(a.ariaChecked));
+			if (ok) {
+				passed += 1;
+			} else {
+				const msg = !el ? "element not found" : `expected aria-checked="${a.ariaChecked}"`;
+				failures.push({ selector: a.selector, message: msg });
+			}
 		}
 	}
 	return { passed, total: deduped.length, failures };
 };
 
 /**
- * Export a recording as a ready-to-commit o.addTest() code string.
+ * Export a recording as a ready-to-commit test code string.
  * Includes assertions interleaved with actions (Playwright parity).
  * @param {{actions: Array, assertions: Array, mocks: Object, initialData: Object, observeRoot?: string}} recording
- * @param {{delay?: number}} [options] - delay in ms at end of each action (default 16 for recorded actions)
+ * @param {{delay?: number, extensionExport?: boolean}} [options] - delay in ms at end of each action (default 16). Set **extensionExport: true** for the Chrome extension (variadic `o.test` + `{ sync: true }` + `__objsExtensionTestRun`); default is **`o.addTest`** for normal use with `handle.run()`.
  * @returns {string}
  */
 o.exportTest = (recording, options = {}) => {
 	const delay = options.delay !== undefined ? options.delay : 16;
+	const extensionExport = options.extensionExport === true;
 	const recordingData = {
 		actions: recording.actions,
 		assertions: recording.assertions || [],
@@ -3877,16 +4267,26 @@ o.exportTest = (recording, options = {}) => {
 				(a.value !== undefined ? `    el.value = ${JSON.stringify(a.value)};\n` : "") +
 				(a.checked !== undefined ? `    el.checked = ${a.checked};\n` : "") +
 				`    el.dispatchEvent(new Event('${a.type}', {bubbles:true}));${endSuffix}`;
+		} else if (a.type === "submit") {
+			body = `    (el.requestSubmit && el.requestSubmit()) || el.submit();${endSuffix}`;
+		} else if (a.type === "keydown") {
+			body =
+				`    el.dispatchEvent(new KeyboardEvent('keydown', {key:${JSON.stringify(a.key || "")}, code:${JSON.stringify(a.code || "")}, bubbles:true, cancelable:true}));${endSuffix}`;
+		} else if (a.type === "focus") {
+			body = `    el.focus();${endSuffix}`;
+		} else if (a.type === "blur") {
+			body = `    el.blur();${endSuffix}`;
 		} else {
 			const useNativeClick = a.type === "click";
 			body = useNativeClick
 				? `    el.click();${endSuffix}`
 				: `    el.dispatchEvent(new MouseEvent('${a.type}', {bubbles:true,cancelable:true}));${endSuffix}`;
 		}
+		const skipIfMissing = a.type === "blur" || a.type === "focus";
 		steps.push(
 			`  ['${a.type} on ${a.target}', ${stepFn} {\n` +
 				getEl(a) +
-				`\n    if (!el && '${a.type}' !== 'scroll') return 'element not found: ${a.target.replace(/'/g, "\\'")}';\n` +
+				`\n    if (!el && '${a.type}' !== 'scroll') { if (${skipIfMissing}) return true; return 'element not found: ${a.target.replace(/'/g, "\\'")}'; }\n` +
 				body +
 				`  }]`,
 		);
@@ -3904,11 +4304,24 @@ o.exportTest = (recording, options = {}) => {
 		? JSON.stringify(recording.mocks, null, 2)
 		: "{}";
 
-	return (
+	const header =
 		`// Auto-generated by o.exportTest() — review and anonymize mocks before committing\n` +
 		`const recordingMocks = ${mocksStr};\n` +
-		`const recordingData = { actions: ${JSON.stringify(recording.actions)}, assertions: ${JSON.stringify(recording.assertions || [])}, observeRoot: ${JSON.stringify(recording.observeRoot || null)} };\n\n` +
-		`o.addTest('Recorded test', [\n${steps.join(",\n")}\n  // Add manual checks: ['Manual: label', () => o.testConfirm('label', ['item1'])],\n], () => {\n` +
+		`const recordingData = { actions: ${JSON.stringify(recording.actions)}, assertions: ${JSON.stringify(recording.assertions || [])}, observeRoot: ${JSON.stringify(recording.observeRoot || null)} };\n\n`;
+	const manualLine =
+		`  // Add manual checks: ['Manual: label', () => o.testConfirm('label', ['item1'])],`;
+
+	if (extensionExport) {
+		return (
+			header +
+			`const __objsExtensionTestRun = o.test('Recorded test',\n${steps.join(",\n")},\n${manualLine}\n{ sync: true }, () => {\n` +
+			`  // teardown\n});\n`
+		);
+	}
+
+	return (
+		header +
+		`o.addTest('Recorded test', [\n${steps.join(",\n")}\n${manualLine}\n], () => {\n` +
 		`  // teardown\n});\n`
 	);
 };
@@ -3933,19 +4346,43 @@ o.exportPlaywrightTest = (recording, options = {}) => {
 
 	const routes = Object.values(recording.mocks)
 		.map((mock) => {
-			const urlPath = mock.url.startsWith("/") ? mock.url : "/" + mock.url;
-			const body = JSON.stringify(mock.response);
+			let urlPath = mock.url;
+			try {
+				urlPath = new URL(mock.url).pathname || urlPath;
+			} catch (_e) {}
+			if (!urlPath.startsWith("/")) urlPath = "/" + urlPath;
+			const respBody = JSON.stringify(mock.response);
+			const reqBody = JSON.stringify(mock.request);
+			const method = (mock.method || "GET").toUpperCase();
+			let verify = `    if (route.request().method() !== ${JSON.stringify(method)}) { await route.continue(); return; }\n`;
+			if (mock.request != null && (method === "POST" || method === "PUT" || method === "PATCH")) {
+				verify +=
+					`    const postData = route.request().postData();\n` +
+					`    const body = (() => { try { return JSON.parse(postData || '{}'); } catch { return {}; } })();\n` +
+					`    expect(body).toEqual(${reqBody});\n`;
+			}
 			return (
 				`  await page.route('**${urlPath}', async route => {\n` +
+				verify +
 				`    await route.fulfill({ status: ${mock.status || 200}, contentType: 'application/json',\n` +
-				`      body: JSON.stringify(${body}) });\n` +
+				`      body: JSON.stringify(${respBody}) });\n` +
 				`  });`
 			);
 		})
 		.join("\n");
 
 	const sd = Object.assign(
-		{ click: 100, mouseover: 50, scroll: 30, input: 50, change: 50 },
+		{
+			click: 100,
+			mouseover: 50,
+			scroll: 30,
+			input: 50,
+			change: 50,
+			submit: 100,
+			keydown: 50,
+			focus: 50,
+			blur: 50,
+		},
 		recording.stepDelays || {},
 	);
 	const steps = recording.actions
@@ -3977,6 +4414,20 @@ o.exportPlaywrightTest = (recording, options = {}) => {
 				} else {
 					step = `  await ${loc}.fill(${JSON.stringify(action.value || "")});`;
 				}
+			} else if (action.type === "submit") {
+				step = `  await ${loc}.evaluate((el) => el.requestSubmit?.() || el.submit());`;
+			} else if (action.type === "keydown") {
+				const key = action.key || "";
+				step =
+					key === "Enter"
+						? `  await ${loc}.press("Enter");`
+						: key
+							? `  await ${loc}.press(${JSON.stringify(key)});`
+							: `  await ${loc}.press(${JSON.stringify(action.code || "")});`;
+			} else if (action.type === "focus") {
+				step = `  if (await ${loc}.count() > 0) await ${loc}.focus();`;
+			} else if (action.type === "blur") {
+				step = `  if (await ${loc}.count() > 0) await ${loc}.blur();`;
 			} else {
 				step = `  await ${loc}.click();`;
 			}
@@ -4004,7 +4455,39 @@ o.exportPlaywrightTest = (recording, options = {}) => {
 						return s;
 					}
 					if (a.type === "class") {
-						return `  // class on ${a.selector} changed to: "${a.className}"`;
+						const classes = (a.className || "").trim().split(/\s+/).filter(Boolean);
+						if (classes.length > 0)
+							return classes
+								.map((c) => `  await expect(${aLoc}).toHaveClass(${JSON.stringify(c)});`)
+								.join("\n");
+						return `  // class on ${a.selector} (no specific classes asserted)`;
+					}
+					if (a.type === "style") {
+						const style = (a.style || "").trim();
+						if (style) {
+							// Try to emit toHaveCSS for common props; fallback to attribute
+							const m = style.match(/(\w+)\s*:\s*([^;]+)/);
+							if (m)
+								return `  await expect(${aLoc}).toHaveCSS(${JSON.stringify(m[1])}, ${JSON.stringify(m[2].trim())});`;
+							return `  await expect(${aLoc}).toHaveAttribute("style", ${JSON.stringify(style)});`;
+						}
+						return "";
+					}
+					if (a.type === "hidden") {
+						return a.hidden
+							? `  await expect(${aLoc}).toBeHidden();`
+							: `  await expect(${aLoc}).toBeVisible();`;
+					}
+					if (a.type === "disabled") {
+						return a.disabled
+							? `  await expect(${aLoc}).toBeDisabled();`
+							: `  await expect(${aLoc}).toBeEnabled();`;
+					}
+					if (a.type === "aria-expanded" && a.ariaExpanded != null) {
+						return `  await expect(${aLoc}).toHaveAttribute("aria-expanded", ${JSON.stringify(String(a.ariaExpanded))});`;
+					}
+					if (a.type === "aria-checked" && a.ariaChecked != null) {
+						return `  await expect(${aLoc}).toHaveAttribute("aria-checked", ${JSON.stringify(String(a.ariaChecked))});`;
 					}
 					return "";
 				})
@@ -4016,6 +4499,27 @@ o.exportPlaywrightTest = (recording, options = {}) => {
 		.join("\n");
 
 	const hasAutoAssertions = (recording.assertions || []).length > 0;
+	const wsEvents = recording.websocketEvents || [];
+	const hasWsEvents = wsEvents.length > 0 && wsEvents.some((c) => c.messages?.length > 0);
+	const wsSetup =
+		hasWsEvents
+			? `  const wsCollected = [];\n` +
+				`  page.on('websocket', ws => {\n` +
+				`    ws.on('framereceived', ev => wsCollected.push({ dir: 'in', payload: typeof ev.payload === 'string' ? ev.payload : String(ev.payload) }));\n` +
+				`    ws.on('framesent', ev => wsCollected.push({ dir: 'out', payload: typeof ev.payload === 'string' ? ev.payload : String(ev.payload) }));\n` +
+				`  });\n\n`
+			: "";
+	const wsAssertions =
+		hasWsEvents
+			? wsEvents
+					.flatMap((conn) => (conn.messages || []).map((msg) => ({ dir: msg.dir, data: msg.data })))
+					.map(
+						(msg) =>
+							`  expect(wsCollected).toContainEqual({ dir: ${JSON.stringify(msg.dir)}, payload: ${JSON.stringify(msg.data)} });`,
+					)
+					.join("\n") + "\n\n"
+			: "";
+
 	return (
 		`// Auto-generated by o.exportPlaywrightTest() — review and anonymize mocks before committing\n` +
 		`// Prerequisites: npm install @playwright/test && npx playwright install chromium\n` +
@@ -4025,15 +4529,19 @@ o.exportPlaywrightTest = (recording, options = {}) => {
 		(routes
 			? `  // Network mocks — edit/anonymize before committing\n` + routes + "\n\n"
 			: "") +
+		wsSetup +
 		`  // Set baseURL in playwright.config.ts: { use: { baseURL: 'https://staging.example.com' } }\n` +
 		`  await page.goto(${JSON.stringify(baseUrl)});\n\n` +
 		(steps ? steps + "\n\n" : "") +
-		(!hasAutoAssertions
+		(wsAssertions ? `  // WebSocket verifications\n` + wsAssertions : "") +
+		(!hasAutoAssertions && !hasWsEvents
 			? `  // TODO: Add assertions before committing, e.g.:\n` +
 				`  // await expect(page.locator('[data-qa="success-panel"]')).toBeVisible();\n` +
 				`  // await expect(page).toHaveURL(/\\/confirmation/);\n` +
 				`  // await expect(page.locator('[data-qa="error-banner"]')).not.toBeVisible();\n`
-			: `  // Auto-generated assertions above — review for correctness before committing\n`) +
+			: hasAutoAssertions || hasWsEvents
+				? `  // Auto-generated assertions above — review for correctness before committing\n`
+				: "") +
 		`});\n`
 	);
 };
@@ -4041,8 +4549,8 @@ o.exportPlaywrightTest = (recording, options = {}) => {
 // Available in all builds so assessors can replay and see results (testOverlay) on staging.
 /**
  * Play back a recording as an automated test sequence
- * @param {{actions: Array, mocks: Object, assertions?: Array, observeRoot?: string}} recording
- * @param {Object} [opts] - mockOverrides or { runAssertions?, root?, manualChecks?, mockOverrides? }
+ * @param {{actions: Array, mocks: Object, assertions?: Array, observeRoot?: string, websocketEvents?: Array}} recording
+ * @param {Object} [opts] - mockOverrides or { runAssertions?, root?, manualChecks?, mockOverrides?, skipWebSocketMock?, skipNetworkMocks?, recordingAssertionDebug?, strictPlay?, strictAssertions?, strictNetwork?, strictWebSocket?, strictRemoved? }
  * @returns {number|{testId: number, assertionResult?: Object}}
  */
 o.playRecording = (recording, opts = {}) => {
@@ -4052,26 +4560,270 @@ o.playRecording = (recording, opts = {}) => {
 		(opts.runAssertions !== undefined ||
 			opts.root !== undefined ||
 			opts.manualChecks !== undefined ||
-			opts.actionDelay !== undefined);
+			opts.actionDelay !== undefined ||
+			opts.skipWebSocketMock !== undefined ||
+			opts.skipNetworkMocks !== undefined ||
+			opts.recordingAssertionDebug !== undefined ||
+			opts.strictPlay !== undefined ||
+			opts.strictAssertions !== undefined ||
+			opts.strictNetwork !== undefined ||
+			opts.strictWebSocket !== undefined ||
+			opts.strictRemoved !== undefined ||
+			opts.onComplete !== undefined);
 	const mockOverrides = isOptions ? opts.mockOverrides || {} : opts;
 	const runAssertions = isOptions && opts.runAssertions;
 	const rootOpt = isOptions ? opts.root : undefined;
 	const manualChecks = (isOptions && opts.manualChecks) || [];
 	const actionDelay = isOptions && opts.actionDelay !== undefined ? opts.actionDelay : 16;
+	const skipWebSocketMock = isOptions && opts.skipWebSocketMock;
+	const skipNetworkMocks = isOptions && opts.skipNetworkMocks;
+	if (isOptions && opts.recordingAssertionDebug !== undefined) {
+		o.recordingAssertionDebug = !!opts.recordingAssertionDebug;
+	}
+
+	const sc = recording.strictCapture || {};
+	const strictPlay = isOptions && opts.strictPlay === true;
+	const strictAssertions =
+		isOptions && opts.strictAssertions !== undefined
+			? !!opts.strictAssertions
+			: strictPlay
+				? true
+				: !!sc.assertions;
+	const strictNetwork =
+		isOptions && opts.strictNetwork !== undefined
+			? !!opts.strictNetwork
+			: strictPlay
+				? true
+				: !!sc.network;
+	const strictWebSocket =
+		isOptions && opts.strictWebSocket !== undefined
+			? !!opts.strictWebSocket
+			: strictPlay
+				? true
+				: !!sc.websocket;
+	const strictRemoved =
+		isOptions && opts.strictRemoved !== undefined ? !!opts.strictRemoved : strictAssertions;
+
+	const parseBodyLikeRecorder = (body) => {
+		if (body == null || body === "") return undefined;
+		if (typeof body === "string") {
+			try {
+				return JSON.parse(body);
+			} catch (_e) {
+				return body;
+			}
+		}
+		return body;
+	};
+	const mockRequestMatchesLive = (recordedReq, liveBody) => {
+		const live = parseBodyLikeRecorder(liveBody);
+		if (recordedReq === live) return true;
+		if (recordedReq == null && live == null) return true;
+		if (recordedReq == null || live == null) return false;
+		if (typeof recordedReq === "object" && typeof live === "object")
+			return JSON.stringify(recordedReq) === JSON.stringify(live);
+		return String(recordedReq) === String(live);
+	};
+	const normWsData = (s) => String(s || "").trim().replace(/\s+/g, " ");
 
 	const allMocks = Object.assign({}, recording.mocks, mockOverrides);
 	const origFetch = window.fetch;
-	window.fetch = (url, opts = {}) => {
-		const method = (opts.method || "GET").toUpperCase();
-		const key = method + ":" + url;
-		if (allMocks[key]) {
+	const origXHROpen = XMLHttpRequest.prototype.open;
+	const origXHRSend = XMLHttpRequest.prototype.send;
+	if (!skipNetworkMocks) {
+		window.fetch = (url, fetchOpts = {}) => {
+			const method = (fetchOpts.method || "GET").toUpperCase();
+			const key = method + ":" + url;
+			if (allMocks[key]) {
+				const mock = allMocks[key];
+				if (strictNetwork && o.C(mock, "request") && !mockRequestMatchesLive(mock.request, fetchOpts.body)) {
+					return Promise.reject(
+						new Error(
+							"[Objs playRecording] strictNetwork: request body does not match recording for " +
+								key,
+						),
+					);
+				}
+				const body =
+					typeof mock.response === "string" ? mock.response : JSON.stringify(mock.response);
+				return Promise.resolve(new Response(body, { status: mock.status || 200 }));
+			}
+			return origFetch(url, fetchOpts);
+		};
+
+		XMLHttpRequest.prototype.open = function (method, url) {
+			this._oMethod = (method || "GET").toUpperCase();
+			this._oUrl = url;
+			return origXHROpen.apply(this, arguments);
+		};
+		XMLHttpRequest.prototype.send = function (body) {
+			const xhr = this;
+			const key = (xhr._oMethod || "GET") + ":" + (xhr._oUrl || "");
 			const mock = allMocks[key];
-			const body =
-				typeof mock.response === "string" ? mock.response : JSON.stringify(mock.response);
-			return Promise.resolve(new Response(body, { status: mock.status || 200 }));
+			if (mock) {
+				if (strictNetwork && o.C(mock, "request") && !mockRequestMatchesLive(mock.request, body)) {
+					setTimeout(() => {
+						xhr.readyState = 4;
+						xhr.status = 0;
+						xhr.statusText = "Objs strictNetwork mismatch";
+						xhr.dispatchEvent(new Event("readystatechange"));
+						xhr.dispatchEvent(new Event("error"));
+					}, 0);
+					return;
+				}
+				const respBody =
+					typeof mock.response === "string" ? mock.response : JSON.stringify(mock.response);
+				setTimeout(() => {
+					xhr.readyState = 4;
+					xhr.status = mock.status || 200;
+					xhr.statusText = "OK";
+					xhr.responseText = respBody;
+					xhr.response = respBody;
+					xhr.dispatchEvent(new Event("readystatechange"));
+					xhr.dispatchEvent(new Event("load"));
+				}, 0);
+				return;
+			}
+			return origXHRSend.apply(this, arguments);
+		};
+	}
+
+	/** @type {typeof WebSocket | null} */
+	let origWebSocket = null;
+	const wsEvents = recording.websocketEvents || [];
+	const useWsMock =
+		!skipWebSocketMock &&
+		wsEvents.length > 0 &&
+		wsEvents.some((e) => e.messages && e.messages.length > 0);
+	if (useWsMock && typeof window.WebSocket === "function") {
+		origWebSocket = window.WebSocket;
+		let wsConsumeIdx = 0;
+		const normalizeWsUrl = (u) => {
+			const s = typeof u === "string" ? u : String(u);
+			try {
+				return new URL(s, window.location.href).href;
+			} catch (_e) {
+				return s;
+			}
+		};
+		const takeNextRecorded = (urlStr) => {
+			const norm = normalizeWsUrl(urlStr);
+			for (let i = wsConsumeIdx; i < wsEvents.length; i++) {
+				if (normalizeWsUrl(wsEvents[i].url) === norm) {
+					wsConsumeIdx = i + 1;
+					return wsEvents[i];
+				}
+			}
+			for (let i = wsConsumeIdx; i < wsEvents.length; i++) {
+				if (String(wsEvents[i].url) === String(urlStr)) {
+					wsConsumeIdx = i + 1;
+					return wsEvents[i];
+				}
+			}
+			return null;
+		};
+		const C = origWebSocket;
+		class O_MockWebSocket extends EventTarget {
+			constructor(url, protocols, recorded) {
+				super();
+				const urlStr = typeof url === "string" ? url : String(url);
+				this.url = urlStr;
+				this.readyState = C.CONNECTING;
+				const p = protocols;
+				this.protocol = Array.isArray(p) ? p[0] || "" : p ? String(p) : "";
+				this.extensions = "";
+				this.binaryType = "blob";
+				this._messages = (recorded.messages || []).slice();
+				this._pos = 0;
+				const self = this;
+				setTimeout(() => {
+					if (self.readyState === C.CLOSED) return;
+					self.readyState = C.OPEN;
+					self._dispatchOpen();
+					self._drainInbound();
+				}, 0);
+			}
+			_dispatchOpen() {
+				const ev = new Event("open");
+				this.dispatchEvent(ev);
+				if (typeof this.onopen === "function") this.onopen(ev);
+			}
+			_dispatchMessage(data) {
+				const ev = new MessageEvent("message", { data });
+				this.dispatchEvent(ev);
+				if (typeof this.onmessage === "function") this.onmessage(ev);
+			}
+			_drainInbound() {
+				while (this._pos < this._messages.length && this._messages[this._pos].dir === "in") {
+					const m = this._messages[this._pos++];
+					this._dispatchMessage(m.data);
+				}
+			}
+			send(data) {
+				if (this.readyState !== C.OPEN) {
+					const err =
+						typeof DOMException !== "undefined"
+							? new DOMException("Still in CONNECTING state.", "InvalidStateError")
+							: new Error("InvalidStateError");
+					throw err;
+				}
+				if (this._pos >= this._messages.length) {
+					if (strictWebSocket) {
+						throw new Error(
+							"[Objs playRecording] strictWebSocket: unexpected send() after recorded frames exhausted",
+						);
+					}
+					this._drainInbound();
+					return;
+				}
+				const next = this._messages[this._pos];
+				if (next.dir === "out") {
+					if (strictWebSocket) {
+						const got = typeof data === "string" ? data : String(data);
+						const exp = String(next.data != null ? next.data : "");
+						if (normWsData(got) !== normWsData(exp)) {
+							throw new Error(
+								"[Objs playRecording] strictWebSocket: outbound frame mismatch",
+							);
+						}
+					}
+					this._pos++;
+				}
+				this._drainInbound();
+			}
+			close(code, reason) {
+				if (this.readyState === C.CLOSING || this.readyState === C.CLOSED) return;
+				this.readyState = C.CLOSING;
+				const self = this;
+				setTimeout(() => {
+					self.readyState = C.CLOSED;
+					const ev =
+						typeof CloseEvent !== "undefined"
+							? new CloseEvent("close", {
+									code: code !== undefined ? code : 1000,
+									reason: reason !== undefined ? String(reason) : "",
+									wasClean: true,
+								})
+							: new Event("close");
+					self.dispatchEvent(ev);
+					if (typeof self.onclose === "function") self.onclose(ev);
+				}, 0);
+			}
 		}
-		return origFetch(url, opts);
-	};
+		const MockWebSocketCtor = function MockWebSocketCtor(url, protocols) {
+			const urlStr = typeof url === "string" ? url : String(url);
+			const rec = takeNextRecorded(urlStr);
+			if (!rec || !rec.messages || rec.messages.length === 0) {
+				return new origWebSocket(url, protocols);
+			}
+			return new O_MockWebSocket(url, protocols, rec);
+		};
+		MockWebSocketCtor.CONNECTING = C.CONNECTING;
+		MockWebSocketCtor.OPEN = C.OPEN;
+		MockWebSocketCtor.CLOSING = C.CLOSING;
+		MockWebSocketCtor.CLOSED = C.CLOSED;
+		window.WebSocket = MockWebSocketCtor;
+	}
 
 	const resolveRoot = () => {
 		if (rootOpt != null) {
@@ -4137,7 +4889,9 @@ o.playRecording = (recording, opts = {}) => {
 						el = scope.querySelector(action.target);
 					}
 				}
+				// blur/focus on removed elements: skip (fallback for older recordings)
 				if (!el && action.type !== "scroll") {
+					if (action.type === "blur" || action.type === "focus") return true;
 					return `element not found: ${action.target}`;
 				}
 				if (action.type === "scroll") {
@@ -4146,6 +4900,22 @@ o.playRecording = (recording, opts = {}) => {
 					if (action.value !== undefined) el.value = action.value;
 					if (action.checked !== undefined) el.checked = action.checked;
 					el.dispatchEvent(new Event(action.type, { bubbles: true }));
+				} else if (action.type === "submit") {
+					if (typeof el.requestSubmit === "function") el.requestSubmit();
+					else el.submit();
+				} else if (action.type === "keydown") {
+					el.dispatchEvent(
+						new KeyboardEvent("keydown", {
+							key: action.key || "",
+							code: action.code || "",
+							bubbles: true,
+							cancelable: true,
+						}),
+					);
+				} else if (action.type === "focus") {
+					el.focus();
+				} else if (action.type === "blur") {
+					el.blur();
 				} else {
 					if (action.type === "click") {
 						el.click();
@@ -4169,6 +4939,8 @@ o.playRecording = (recording, opts = {}) => {
 							const r = o.runRecordingAssertions(recording, rootEl, i, {
 								assertions: asserted,
 								removedElements: recording.removedElements,
+								strictAssertions,
+								strictRemoved,
 							});
 							assertionAccum.passed += r.passed;
 							assertionAccum.total += r.total;
@@ -4206,6 +4978,9 @@ o.playRecording = (recording, opts = {}) => {
 	const onComplete = isOptions && opts.onComplete;
 	const testId = o.test("Recorded playback", ...testCases, { sync: true }, (testId) => {
 		window.fetch = origFetch;
+		XMLHttpRequest.prototype.open = origXHROpen;
+		XMLHttpRequest.prototype.send = origXHRSend;
+		if (origWebSocket) window.WebSocket = origWebSocket;
 		const assertionResult = runAssertions && assertions.length > 0 ? assertionAccum : undefined;
 		if (assertionResult?.failures?.length > 0) {
 			o.tRes[testId] = false;
@@ -4237,41 +5012,79 @@ o.testOverlay = () => {
 		return;
 	}
 
+	const scrollId = "o-test-overlay-scroll";
+	const exportBtnId = "o-test-export-objs";
+	const copyBtnId = "o-test-copy-txt";
+	const btnBarStyle =
+		"padding:6px 10px;background:#334155;color:#e2e8f0;border:none;border-radius:6px;cursor:pointer;font-size:12px;";
+
+	const buildListPlainText = () =>
+		o.tLog
+			.map((log, i) => (log != null && log !== "" ? String(log) : "Test #" + i) + (o.tRes[i] ? " ✓" : " ✗"))
+			.join("\n\n");
+
 	const updatePanel = () => {
-		const panel = o("#" + panelId);
-		if (!panel.el) return;
-		const total = o.tRes.length;
-		const passed = o.tRes.filter(Boolean).length;
-		let html = `<b>Tests: ${passed}/${total}</b><hr style="margin:4px 0">`;
+		const scroll = o("#" + scrollId);
+		if (!scroll.el) return;
+		let html = "";
 		o.tLog.forEach((log, i) => {
 			const ok = o.tRes[i];
-			html += `<div style="margin:2px 0;padding:2px 4px;border-radius:3px;background:${ok ? "#d4edda" : "#f8d7da"};color:${ok ? "#155724" : "#721c24"};font-size:11px;white-space:pre-wrap">${log || "Test #" + i}</div>`;
-		});
-		html += `<button id="o-test-export" style="margin-top:6px;padding:4px 8px;font-size:11px;cursor:pointer">Export results</button>`;
-		panel.html(html);
-		o("#o-test-export").on("click", () => {
-			const data = JSON.stringify({ results: o.tRes, logs: o.tLog }, null, 2);
-			const blob = new Blob([data], { type: "application/json" });
-			const a = o.D.createElement("a");
-			a.href = URL.createObjectURL(blob);
-			a.download = "objs-test-results.json";
-			a.click();
+			html += `<div style="margin:2px 0;padding:2px 4px;border-radius:3px;background:${ok ? "#14532d" : "#450a0a"};color:${ok ? "#86efac" : "#fca5a5"};font-size:11px;white-space:pre-wrap">${log || "Test #" + i}</div>`;
 		});
+		scroll.html(html);
 	};
 
 	const innerHTML =
-		`<div style="display:flex;align-items:center;gap:12px;">` +
+		`<div class="o-test-overlay-root" style="display:flex;flex-direction:column;gap:4px;max-height:min(88vh,560px);overflow:hidden;">` +
+		`<div style="display:flex;align-items:center;gap:12px;flex-shrink:0;">` +
 		`<span class="o-test-overlay-summary" style="flex:1;font-size:13px;cursor:grab;">Tests: 0/0</span>` +
-		`<button type="button" class="o-test-overlay-toggle" style="padding:6px 10px;background:#334155;color:#e2e8f0;border:none;border-radius:6px;cursor:pointer;font-size:12px;">List</button>` +
+		`<button type="button" class="o-test-overlay-toggle" style="${btnBarStyle}">List</button>` +
 		`<button type="button" class="o-test-overlay-close" style="padding:4px 8px;background:transparent;color:#94a3b8;border:none;border-radius:4px;cursor:pointer;font-size:16px;line-height:1;" title="Close">×</button>` +
 		`</div>` +
-		`<div id="${panelId}" style="display:none;margin-top:4px;padding:8px;background:#fff;border:1px solid #334155;border-radius:6px;max-height:240px;overflow-y:auto;box-shadow:0 2px 8px rgba(0,0,0,.15);font-size:11px;user-select:text;cursor:text;"></div>`;
+		`<div id="${panelId}" style="display:none;flex-direction:column;margin-top:4px;max-height:min(52vh,420px);background:#0a0f1e;border:1px solid #1e293b;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.35);overflow:hidden;">` +
+		`<div id="${scrollId}" style="box-sizing:border-box;height:min(48vh,380px);overflow-y:scroll;padding:8px;font-size:11px;user-select:text;cursor:text;"></div>` +
+		`<div id="o-test-overlay-footer" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px;border-top:1px solid #1e293b;background:#0f172a;flex-shrink:0;">` +
+		`<button type="button" id="${exportBtnId}" class="o-test-overlay-export-btn" style="${btnBarStyle}">Export (objs)</button>` +
+		`<button type="button" id="${copyBtnId}" class="o-test-overlay-export-btn" style="${btnBarStyle}">Copy (txt)</button>` +
+		`</div></div></div>`;
 	const box = o.overlay({
 		innerHTML,
 		removeExisting: false,
 		className: "o-test-overlay",
 		id: btnId,
-		excludeDragSelector: ".o-test-overlay-close, .o-test-overlay-toggle, #" + panelId,
+		excludeDragSelector:
+			".o-test-overlay-close, .o-test-overlay-toggle, #" +
+			panelId +
+			", #" +
+			scrollId +
+			", #o-test-overlay-footer, .o-test-overlay-export-btn",
+	});
+
+	o("#" + exportBtnId).on("click", () => {
+		const data = JSON.stringify({ results: o.tRes, logs: o.tLog }, null, 2);
+		const blob = new Blob([data], { type: "application/json" });
+		const a = o.D.createElement("a");
+		a.href = URL.createObjectURL(blob);
+		a.download = "objs-test-results.json";
+		a.click();
+	});
+	o("#" + copyBtnId).on("click", () => {
+		const text = buildListPlainText();
+		const write = () => {
+			const ta = o.D.createElement("textarea");
+			ta.value = text;
+			ta.setAttribute("readonly", "");
+			ta.style.cssText = "position:fixed;left:-9999px;top:0";
+			o.D.body.appendChild(ta);
+			ta.select();
+			o.D.execCommand("copy");
+			ta.remove();
+		};
+		if (typeof navigator !== "undefined" && navigator.clipboard && navigator.clipboard.writeText) {
+			navigator.clipboard.writeText(text).catch(write);
+		} else {
+			write();
+		}
 	});
 
 	const refreshSummary = () => {
@@ -4284,8 +5097,12 @@ o.testOverlay = () => {
 		const panel = o("#" + panelId);
 		if (!panel.el) return;
 		const isOpen = panel.el.style.display !== "none";
-		panel.css({ display: isOpen ? "none" : "block" });
-		if (!isOpen) updatePanel();
+		if (isOpen) {
+			panel.el.style.display = "none";
+		} else {
+			panel.el.style.display = "flex";
+			updatePanel();
+		}
 	});
 
 	box.first(".o-test-overlay-close").on("click", () => {
@@ -4295,7 +5112,7 @@ o.testOverlay = () => {
 	o.testOverlay.showPanel = () => {
 		const panel = o("#" + panelId);
 		if (!panel.el) return;
-		panel.css({ display: "block" });
+		panel.el.style.display = "flex";
 		updatePanel();
 		refreshSummary();
 	};