worker/dyad-recorder-client.js
Rama main · réplica de lectura del repositorio original.
/**
* dyad-recorder-client.js
*
* Injected into the preview iframe by the proxy server (see proxy_server.js).
* Observes user interactions while recording is active and reports a normalized
* action stream to the renderer via postMessage. OBSERVE-ONLY: it never calls
* preventDefault, so the app behaves exactly as it would without the recorder.
*
* Capture semantics are a small port of Playwright's in-page RecordActionTool:
* text entry becomes a single `fill` with the full value, form-control toggles
* come from `change`, and selectors prefer stable, human-readable locators.
* Clicks are reported immediately — a click that navigates would otherwise be
* lost with the unloading document — and only the first click of a multi-click
* gesture is reported, so the renderer's `collapseActions` folds exactly one
* click into the `dblclick` that follows it.
*
* Plain, dependency-free IIFE JS: it is read verbatim and injected into every
* previewed HTML document. See `src/lib/test_recorder/types.ts` for the schemas
* of the actions and locator descriptors it emits.
*
* Protocol:
* down (from parent): { type: "activate-dyad-recorder" | "deactivate-dyad-recorder", token }
* { type: "flush-dyad-recorder", token, requestId }
* up (to parent): { type: "dyad-recorder-initialized" }
* { type: "dyad-recorder-action", action: RecordedAction }
* { type: "dyad-recorder-flushed", requestId }
*
* Known limitation — the top-level preview document only. This script is
* injected into nested frames too, but Dyad activates only the frame it embeds,
* and `window.parent` from a nested document is the app, not the renderer. So
* interactions inside an app's own iframes are absent from the recording rather
* than misrecorded. Covering them needs the activation relayed down, the actions
* relayed back up, and a frame reference carried on each action so replay can
* address it via `page.frameLocator` — without that last part a relayed action
* would replay against the main frame and silently assert the wrong document.
* Tracked as follow-up work; see the PR discussion.
*/
(() => {
// Read once, here, and then take the global away.
//
// The vm/happy-dom unit test sets this before the script runs so it can drive
// the recorder with synthetic events. Nothing else legitimately sets it, and
// the proxy splices this script in immediately after `<head>` — so every one
// of the app's own scripts, inline or bundled or from a CDN, runs strictly
// after this line. Snapshotting is therefore enough to stop a page script
// flipping the recorder into accepting untrusted events mid-recording and
// fabricating clicks and fills that land in a spec the user commits and runs.
const allowUntrustedEvents =
window.__DYAD_RECORDER_ALLOW_UNTRUSTED__ === true;
// Minted per proxy and known only to the trusted renderer. Without this, an
// unrelated page can frame the localhost preview, arm the recorder, and
// receive every captured fill value through the parent message channel.
//
// Removed from the DOM once read, for the same reason the global below is
// deleted: the app's own scripts all run after this line, but the attribute
// would otherwise stay in the document for any of them — including CDN code
// in an AI-generated app — to lift with one `querySelector`.
const recorderToken = document.currentScript?.dataset.dyadRecorderToken;
try {
document.currentScript?.removeAttribute("data-dyad-recorder-token");
} catch {
// Best effort: the value is already snapshotted above either way.
}
try {
delete window.__DYAD_RECORDER_ALLOW_UNTRUSTED__;
} catch {
// Non-configurable, so someone is holding it deliberately. The snapshot
// above already decided this session's answer either way.
}
const OVERLAY_CLASS = "__dyad_recorder_overlay__";
// Absorbs the synthetic duplicate the browser dispatches when a <label>
// activates its control, without swallowing deliberate repeat interactions.
const DEDUPE_MS = 50;
// A typed password must never land in the generated spec as a plaintext
// secret. The `fill` step is still recorded so the flow/locator is preserved.
const PASSWORD_PLACEHOLDER = "REPLACE_WITH_PASSWORD";
// Fields whose name says "secret" even though the type doesn't. Deliberately
// conservative — a false positive costs one placeholder to replace, a false
// negative writes a live credential into the user's repo.
const SECRET_NAME_RE =
/password|passwd|passphrase|secret|token|api[-_ ]?key|private[-_ ]?key|credential|\botp|\btotp|\bmfa|\b2fa/i;
const SECRET_ATTRS = ["name", "id", "data-testid", "aria-label"];
// Controls seen as type="password" at any point this session. A show/hide
// toggle flips the input to type="text", so without this every keystroke after
// the reveal would be captured in plaintext.
//
// Known limitation: heuristic. A secret typed into a field that was never
// type="password" and whose attributes don't read as secret-bearing is still
// recorded verbatim, so a generated spec is worth a glance before committing.
const seenAsPassword = new WeakSet();
// Native elements that are interactive whatever their role says.
const INTERACTIVE_TAGS = "button, a, input, select, textarea, summary";
// Roles that make an element the thing a click is really aimed at. Matched
// against `computeRole`'s answer rather than the `role` attribute's text: only
// the first supported token of a fallback list is live, so
// `role="presentation button"` is a presentation element that merely contains
// the word "button". Retargeting to it would record the click against a
// wrapper and leave the real handler on the descendant unexercised on replay.
const INTERACTIVE_ROLES = new Set([
"button",
"link",
"checkbox",
"radio",
"tab",
"menuitem",
"switch",
"option",
]);
// WAI-ARIA 1.2 roles, which is what Playwright's `getByRole` accepts. Used to
// pick the winning token out of a fallback role list — see `computeRole`.
const KNOWN_ROLES = new Set([
"alert",
"alertdialog",
"application",
"article",
"banner",
"blockquote",
"button",
"caption",
"cell",
"checkbox",
"code",
"columnheader",
"combobox",
"complementary",
"contentinfo",
"definition",
"deletion",
"dialog",
"directory",
"document",
"emphasis",
"feed",
"figure",
"form",
"generic",
"grid",
"gridcell",
"group",
"heading",
"img",
"insertion",
"link",
"list",
"listbox",
"listitem",
"log",
"main",
"marquee",
"math",
"menu",
"menubar",
"menuitem",
"menuitemcheckbox",
"menuitemradio",
"meter",
"navigation",
"none",
"note",
"option",
"paragraph",
"presentation",
"progressbar",
"radio",
"radiogroup",
"region",
"row",
"rowgroup",
"rowheader",
"scrollbar",
"search",
"searchbox",
"separator",
"slider",
"spinbutton",
"status",
"strong",
"subscript",
"superscript",
"switch",
"tab",
"table",
"tablist",
"tabpanel",
"term",
"textbox",
"time",
"timer",
"toolbar",
"tooltip",
"tree",
"treegrid",
"treeitem",
]);
const NAV_KEYS = new Set([
"Enter",
"Escape",
"ArrowUp",
"ArrowDown",
"ArrowLeft",
"ArrowRight",
]);
let active = false;
let lastEmit = { key: "", at: 0 };
/**
* The last Enter press this recorder actually recorded, and where.
*
* Enter in a text field inside a form submits it implicitly, and the browser
* delivers that submission as a trusted `click` on the form's default submit
* button. Recording both replays the submission twice — and since the press
* navigates first, the duplicate click usually lands on the destination
* document and fails. `onClick` uses this to recognise that click.
*/
let lastEnterPress = { target: null, at: 0 };
/** How long after an Enter press a click may still be its implicit submit. */
const IMPLICIT_SUBMIT_MS = 100;
let hoverBox = null;
let passwordObserver = null;
/* ---------- small helpers -------------------------------------------- */
const css = (el, obj) => Object.assign(el.style, obj);
function normalize(text) {
return (text || "").replace(/\s+/g, " ").trim();
}
function cssEscape(value) {
if (typeof window !== "undefined" && window.CSS && window.CSS.escape) {
return window.CSS.escape(value);
}
return String(value).replace(/["\\\]]/g, "\\$&");
}
function trustedOk(e) {
return e.isTrusted || allowUntrustedEvents;
}
function deepTarget(e) {
const path = e.composedPath && e.composedPath();
if (path && path.length) {
for (const node of path) {
if (node && node.nodeType === 1) return node;
}
}
return e.target;
}
function isOverlayEvent(e) {
const path = (e.composedPath && e.composedPath()) || [];
return path.some(
(node) =>
node && node.classList && node.classList.contains(OVERLAY_CLASS),
);
}
function isCheckboxOrRadio(el) {
if (!el || el.tagName !== "INPUT") return false;
const type = (el.getAttribute("type") || "text").toLowerCase();
return type === "checkbox" || type === "radio";
}
/**
* Controls whose value is chosen rather than typed — a colour picker, a
* slider. `isEditable` excludes them because there is no text to type, but
* the value is still the user's choice, and Playwright's `fill` sets these
* directly instead of typing (its `kInputTypesToSetValue`), so `fill("42")`
* replays exactly what was picked.
*
* Captured from `change` (the commit) rather than `input`, which fires for
* every frame of a drag.
*/
const VALUE_PICKER_TYPES = ["color", "range"];
function isValuePicker(el) {
if (!el || el.tagName !== "INPUT") return false;
return VALUE_PICKER_TYPES.includes(
(el.getAttribute("type") || "").toLowerCase(),
);
}
/**
* A file picker. Nothing here can be replayed: the value is a file the user
* chose from their own machine, which the page cannot read and this recorder
* has no business capturing. A recorded `click()` is worse than no step —
* replay opens the OS file chooser and the test hangs there.
*/
function isFileInput(el) {
if (!el || el.tagName !== "INPUT") return false;
return (el.getAttribute("type") || "").toLowerCase() === "file";
}
function isPasswordField(el) {
if (!el || el.tagName !== "INPUT") return false;
return (el.getAttribute("type") || "text").toLowerCase() === "password";
}
/**
* Remember a control that is currently a password field, so a later reveal
* toggle (type="text") can't launder its value into the recording.
*/
function notePasswordField(el) {
if (isPasswordField(el)) seenAsPassword.add(el);
}
function noteRevealedPasswords(records) {
for (const record of records) {
if (
record.attributeName === "type" &&
(record.oldValue || "").toLowerCase() === "password"
) {
seenAsPassword.add(record.target);
}
}
}
/**
* MutationObserver callbacks are microtasks, so a reveal toggle and a keystroke
* landing in the same task would otherwise be evaluated before the flip is
* known — and that one keystroke captured in plaintext.
*/
function drainPasswordMutations() {
if (passwordObserver) noteRevealedPasswords(passwordObserver.takeRecords());
}
/**
* Catch a reveal toggle even for a field never seen as a password: the
* password→text flip is itself the signal, so a field that was autofilled and
* then unmasked is still redacted rather than captured in plaintext.
*/
function watchPasswordReveals() {
const Observer =
typeof MutationObserver !== "undefined"
? MutationObserver
: window.MutationObserver;
if (!Observer || passwordObserver) return;
passwordObserver = new Observer(noteRevealedPasswords);
passwordObserver.observe(document.documentElement || document, {
subtree: true,
attributes: true,
attributeFilter: ["type"],
attributeOldValue: true,
});
// Anything already masked when recording starts is a password field even if
// the user only ever touches its reveal toggle.
Array.prototype.forEach.call(
document.querySelectorAll('input[type="password"]'),
(el) => seenAsPassword.add(el),
);
}
function stopWatchingPasswordReveals() {
if (!passwordObserver) return;
passwordObserver.disconnect();
passwordObserver = null;
}
function looksSecretByName(el) {
if (!el || !el.getAttribute) return false;
const autocomplete = (el.getAttribute("autocomplete") || "").toLowerCase();
if (
autocomplete.includes("password") ||
autocomplete === "one-time-code" ||
autocomplete === "cc-number" ||
autocomplete === "cc-csc"
) {
return true;
}
return SECRET_ATTRS.some((attr) =>
SECRET_NAME_RE.test(el.getAttribute(attr) || ""),
);
}
/** Whether this control's value must be redacted rather than recorded. */
function isSecretField(el) {
if (isPasswordField(el)) {
seenAsPassword.add(el);
return true;
}
drainPasswordMutations();
return seenAsPassword.has(el) || looksSecretByName(el);
}
function isEditable(el) {
if (!el) return false;
if (el.tagName === "TEXTAREA") return true;
if (el.tagName === "INPUT") {
const type = (el.getAttribute("type") || "text").toLowerCase();
return ![
"checkbox",
"radio",
"button",
"submit",
"reset",
"file",
"image",
"range",
"color",
"hidden",
].includes(type);
}
return el.isContentEditable === true;
}
/**
* Resolve the control a pointer interaction concerns. Clicking a <label>
* activates its associated control, so map to that and let the control's own
* `change`/`click` drive recording. Null for non-form-controls.
*/
function resolveControl(el) {
if (!el) return null;
const label = el.closest && el.closest("label");
if (label) {
if (label.control) return label.control;
const forId = label.getAttribute("for");
if (forId) {
const control = document.getElementById(forId);
if (control) return control;
}
}
if (
el.tagName === "INPUT" ||
el.tagName === "SELECT" ||
el.tagName === "TEXTAREA"
) {
return el;
}
return null;
}
/**
* Controls that arrow keys DRIVE rather than merely move a caret within, so
* the keypress produces a `change` this recorder already captures as the
* value action.
*
* A `<select>` walks its options, range and number inputs step, and arrows
* inside a radio group both move focus and check the radio they land on.
* Recording the press as well as the resulting `select`/`fill`/`check` makes
* replay perform the value change twice — once by keystroke, once by the
* value action — and land somewhere the user never went. Text fields are not
* here: arrows only move the caret, and no `change` follows.
*
* Checkboxes are deliberately absent even though radios are here. Arrows do
* nothing to a checkbox — there is no group to walk and no `change` to take
* the press's place — so suppressing it would erase the only record of a
* keyboard-only interaction with the app's own key handler.
*
* A number input is the one control where WHICH arrow matters: only up and
* down step it. Left and right move the caret exactly as in a text field, so
* no `change` follows to stand in for the press and dropping it would erase
* caret navigation — and any app key handler behind it — from the recording.
*/
function changesValueOnArrowKeys(control, key) {
if (!control || control.nodeType !== 1) return false;
if (control.tagName === "SELECT") return true;
if (control.tagName !== "INPUT") return false;
const type = (control.getAttribute("type") || "text").toLowerCase();
if (type === "radio" || type === "range") return true;
return type === "number" && (key === "ArrowUp" || key === "ArrowDown");
}
/** Controls whose meaningful action is captured by input/change, not click. */
function recordsWithoutClick(control) {
return (
isCheckboxOrRadio(control) ||
isValuePicker(control) ||
isFileInput(control) ||
control.tagName === "SELECT" ||
isEditable(control)
);
}
function retarget(el) {
if (!el || el.nodeType !== 1) return el;
// Nearest-first, the way `closest` walked it — but asking `computeRole`
// per node instead of letting a CSS attribute match stand in for the role.
for (
let node = el;
node && node.nodeType === 1;
node = node.parentElement
) {
if (node.matches && node.matches(INTERACTIVE_TAGS)) return node;
if (INTERACTIVE_ROLES.has(computeRole(node))) return node;
}
return el;
}
/* ---------- role / accessible-name (minimal port) -------------------- */
function computeRole(el) {
if (!el || el.nodeType !== 1) return null;
const explicit = el.getAttribute && el.getAttribute("role");
if (explicit && explicit.trim()) {
// `role` is a space-separated fallback list, and the browser takes the
// first token it recognises — `role="switch checkbox"` is a switch. Handing
// the whole attribute over as one role emits
// `getByRole("switch checkbox")`, which matches nothing on replay.
for (const token of explicit.trim().toLowerCase().split(/\s+/)) {
if (KNOWN_ROLES.has(token)) return token;
}
// Every token was junk. Browsers ignore an unrecognised `role` and fall
// back to the implicit one, so drop through rather than returning null.
}
const tag = el.tagName ? el.tagName.toLowerCase() : "";
switch (tag) {
case "button":
return "button";
case "a":
return el.hasAttribute("href") ? "link" : null;
case "select":
// A select is a combobox only while it presents one row at a time.
// `multiple`, or a `size` above 1, makes it a list — and Playwright
// matches it as `listbox`, so calling it a combobox generates a locator
// that never resolves.
return el.hasAttribute("multiple") ||
Number(el.getAttribute("size")) > 1
? "listbox"
: "combobox";
case "textarea":
return "textbox";
case "nav":
return "navigation";
case "h1":
case "h2":
case "h3":
case "h4":
case "h5":
case "h6":
return "heading";
case "img":
return "img";
case "input": {
const type = (el.getAttribute("type") || "text").toLowerCase();
if (type === "checkbox") return "checkbox";
if (type === "radio") return "radio";
if (["button", "submit", "reset", "image"].includes(type))
return "button";
if (type === "range") return "slider";
if (type === "search") return "searchbox";
if (type === "password") return null; // no matching ARIA role
// Playwright exposes number inputs as `spinbutton`; calling them
// textboxes would generate a locator that matches nothing at replay.
if (type === "number") return "spinbutton";
// No ARIA role Playwright can match. Falling through to `textbox` would
// let a unique-looking `getByRole("textbox", { name })` win over
// `getByLabel` and generate a locator that resolves to nothing every
// time the test runs.
if (
[
"date",
"datetime-local",
"month",
"week",
"time",
"color",
"file",
"hidden",
].includes(type)
) {
return null;
}
// An unknown or missing type behaves as `text`, so textbox is right for
// everything left.
return "textbox";
}
default:
return null;
}
}
function associatedLabelText(el) {
if (!el || el.nodeType !== 1) return null;
// Native labelable controls expose every associated label in document
// order through `.labels`, including both `for=` and wrapping labels.
// Playwright concatenates those labels for the accessible name, so using
// only the first one can produce a unique-looking locator that never
// resolves on replay.
let labels = el.labels ? Array.from(el.labels) : [];
if (!labels.length) {
// Fallback for DOM implementations without `HTMLInputElement.labels`.
if (el.id) {
labels = Array.from(
document.querySelectorAll(`label[for="${cssEscape(el.id)}"]`),
);
}
const wrap = el.closest && el.closest("label");
if (wrap && !labels.includes(wrap)) labels.push(wrap);
}
const parts = labels
.map((label) => normalize(accessibleTextContent(label)))
.filter(Boolean);
return parts.length ? normalize(parts.join(" ")) : null;
}
/**
* Text as an accessible-name computation reads it: `aria-hidden` and `hidden`
* subtrees contribute nothing.
*
* Raw `textContent` would name `<button><span aria-hidden="true">×</span>Close
* </button>` "×Close", and the `getByRole("button", { name: "×Close" })` that
* produced would match nothing when the test replays — Playwright computes the
* name the same way this does, and gets "Close".
*/
function accessibleTextContent(el, includeHidden = false) {
let out = "";
const children = el.childNodes || [];
for (let i = 0; i < children.length; i++) {
const node = children[i];
if (node.nodeType === 3) {
out += node.nodeValue || "";
continue;
}
if (node.nodeType !== 1) continue;
if (
!includeHidden &&
node.getAttribute &&
node.getAttribute("aria-hidden") === "true"
)
continue;
// The same visibility rule `getByRole` matching uses, so a name built
// here is one Playwright can actually match. `display: none` and
// `visibility: hidden` descendants contribute nothing to a name — a
// screen-reader-only label or a collapsed tooltip would otherwise be
// baked into a locator that matches nothing at replay.
if (!includeHidden && !isAriaVisible(node)) continue;
out += accessibleTextContent(node, includeHidden);
}
return out;
}
/**
* The text `aria-labelledby` resolves to, or null when it names nothing.
*
* Ahead of `aria-label` wherever both are consulted: the accessible-name
* algorithm gives `aria-labelledby` precedence (accname step 2B before 2C),
* and Playwright implements it faithfully. Reading `aria-label` first on an
* element carrying both makes the uniqueness scan call
* `getByRole(..., { name: <aria-label>, exact: true })` unique while
* Playwright computes the referenced text as the name — so the locator
* matches nothing at replay. A labelledby that resolves to nothing falls
* through to `aria-label`, as the algorithm's own fallthrough does.
*/
function labelledByText(el) {
const labelledby = el.getAttribute && el.getAttribute("aria-labelledby");
if (!labelledby) return null;
const parts = labelledby
.split(/\s+/)
.map((id) => {
const ref = document.getElementById(id);
// Explicit aria-labelledby references contribute even when the
// referenced node is visually hidden. Ordinary descendants and native
// labels still use the visibility filter in accessibleTextContent.
return ref ? normalize(accessibleTextContent(ref, true)) : "";
})
.filter(Boolean);
return parts.length ? normalize(parts.join(" ")) : null;
}
function computeAccName(el) {
if (!el || el.nodeType !== 1) return null;
const labelled = labelledByText(el);
if (labelled) return labelled;
const aria = el.getAttribute && el.getAttribute("aria-label");
if (aria && aria.trim()) return normalize(aria);
const fromLabel = associatedLabelText(el);
if (fromLabel) return fromLabel;
if (el.tagName === "IMG") {
const alt = el.getAttribute("alt");
if (alt && alt.trim()) return normalize(alt);
}
const role = computeRole(el);
if (
["button", "link", "heading", "tab", "menuitem", "option"].includes(role)
) {
const text = normalize(accessibleTextContent(el));
if (text) return text;
}
const title = el.getAttribute && el.getAttribute("title");
if (title && title.trim()) return normalize(title);
return null;
}
function labelForGetByLabel(el) {
// Same precedence as computeAccName, for the same reason: Playwright's
// `getByLabel` reads aria-labelledby before aria-label too, so the other
// order produces a locator it will never match.
const labelled = labelledByText(el);
if (labelled) return labelled;
const aria = el.getAttribute && el.getAttribute("aria-label");
if (aria && aria.trim()) return normalize(aria);
return associatedLabelText(el);
}
/* ---------- selector generation -------------------------------------- */
// Per-`selectorFor`-call scratch space. Each candidate kind would otherwise
// re-walk the document recomputing role + accessible name — several O(N)
// sweeps per event, in the capture phase. Memoizing collapses that to one.
let scan = null;
function beginScan() {
scan = { all: null, roles: new Map(), names: new Map() };
}
function endScan() {
scan = null;
}
/**
* Every element the locator has to be unique among — open shadow roots
* included.
*
* Playwright's locators pierce open shadow roots, so uniqueness judged from
* `document.querySelectorAll` alone can call a locator unique while replay
* finds a second match inside a web component and fails on strict mode.
*/
function collectElements(root, into) {
const found = root.querySelectorAll("*");
for (let i = 0; i < found.length; i++) {
const el = found[i];
into.push(el);
if (el.shadowRoot) collectElements(el.shadowRoot, into);
}
return into;
}
function allElements() {
if (scan) {
if (!scan.all) scan.all = collectElements(document, []);
return scan.all;
}
return collectElements(document, []);
}
function roleOf(el) {
if (!scan) return computeRole(el);
if (!scan.roles.has(el)) scan.roles.set(el, computeRole(el));
return scan.roles.get(el);
}
function accNameOf(el) {
if (!scan) return computeAccName(el);
if (!scan.names.has(el)) scan.names.set(el, computeAccName(el));
return scan.names.get(el);
}
/**
* The next element up, crossing out of a shadow root to its host.
*
* `parentElement` returns null at a shadow boundary, so without this a
* component whose host is `aria-hidden` or `display: none` would have its
* shadow content counted as visible — and now that uniqueness scans include
* shadow descendants, that is a locator claiming to be unique against
* elements Playwright can't see.
*/
function ariaParent(el) {
if (el.parentElement) return el.parentElement;
const root = el.getRootNode && el.getRootNode();
return root && root.host ? root.host : null;
}
/**
* Whether an element is exposed to the a11y tree the way Playwright's
* `getByRole` sees it (`includeHidden: false`). Uniqueness and `nth` are
* computed from these matches, so counting a hidden duplicate — a closed
* dialog's buttons, a `display: none` mobile nav — would hand replay an
* `.nth(1)` pointing at an element Playwright never sees.
*/
function isAriaVisible(el) {
if (!el || el.nodeType !== 1) return false;
for (let node = el; node && node.nodeType === 1; node = ariaParent(node)) {
if (node.getAttribute && node.getAttribute("aria-hidden") === "true") {
return false;
}
if (node.hasAttribute && node.hasAttribute("hidden")) return false;
}
// `checkVisibility` accounts for an ancestor's `display: none`,
// `content-visibility`, and detached subtrees. Walking computed styles
// cannot: `display` doesn't inherit, so a child of a hidden container
// computes to `block` and reads as visible.
if (typeof el.checkVisibility === "function") {
try {
// Playwright treats `visibility: hidden` as hidden but NOT `opacity: 0`,
// so `visibilityProperty` is on and `opacityProperty` stays off.
return el.checkVisibility({
visibilityProperty: true,
contentVisibilityAuto: true,
});
} catch {
// fall through to the manual check
}
}
// happy-dom and other minimal DOMs don't implement layout; treat "can't
// tell" as visible so selector quality degrades rather than breaking.
const view =
(el.ownerDocument && el.ownerDocument.defaultView) ||
(typeof window !== "undefined" ? window : null);
if (!view || typeof view.getComputedStyle !== "function") return true;
for (let node = el; node && node.nodeType === 1; node = ariaParent(node)) {
let style;
try {
style = view.getComputedStyle(node);
} catch {
return true;
}
if (!style) return true;
if (style.display === "none") return false;
// `visibility` inherits, so only the element's own computed value matters.
if (node === el && style.visibility === "hidden") return false;
}
return true;
}
function hasDescendantWithText(el, value) {
return Array.prototype.some.call(
el.querySelectorAll("*"),
(child) => normalize(child.textContent) === value,
);
}
function queryAll(descriptor) {
switch (descriptor.kind) {
case "testid":
return allElements().filter(
(e) => e.getAttribute("data-testid") === descriptor.value,
);
case "role":
return allElements().filter(
(e) =>
roleOf(e) === descriptor.value &&
accNameOf(e) === descriptor.name &&
isAriaVisible(e),
);
case "placeholder":
return allElements().filter(
(e) => e.getAttribute("placeholder") === descriptor.value,
);
case "label":
return allElements().filter(
(e) => labelForGetByLabel(e) === descriptor.value,
);
case "text":
return allElements().filter(
(e) =>
normalize(e.textContent) === descriptor.value &&
!hasDescendantWithText(e, descriptor.value),
);
case "css":
try {
return Array.prototype.slice.call(
document.querySelectorAll(descriptor.value),
);
} catch {
return [];
}
default:
return [];
}
}
/**
* Candidate descriptors for `el`, highest priority first.
*
* Every name/text-based candidate carries `exact: true`: Playwright matches
* names as case-insensitive substrings by default, but the uniqueness check
* below compares with `===`. Without it the recorder would call a "Save" button
* unique and omit `.nth()`, while replay also matched "Save draft".
*/
function buildCandidates(el) {
const candidates = [];
const testid = el.getAttribute && el.getAttribute("data-testid");
if (testid) candidates.push({ kind: "testid", value: testid });
const role = roleOf(el);
const name = accNameOf(el);
if (role && name)
candidates.push({ kind: "role", value: role, name, exact: true });
const placeholder = el.getAttribute && el.getAttribute("placeholder");
if (placeholder)
candidates.push({ kind: "placeholder", value: placeholder, exact: true });
const label = labelForGetByLabel(el);
if (label) candidates.push({ kind: "label", value: label, exact: true });
const text = normalize(el.textContent);
if (text && text.length <= 40 && !isEditable(el)) {
candidates.push({ kind: "text", value: text, exact: true });
}
// `data-dyad-id` is deliberately NOT a candidate: it encodes a source
// location, so it moves whenever the file it points into is edited, and the
// Dyad plugin that injects it doesn't run in the build the test replays
// against. An element with no better locator falls through to the CSS path.
return candidates;
}
function cssPathDescriptor(el) {
if (el.id) {
const idSel = `#${cssEscape(el.id)}`;
try {
if (document.querySelectorAll(idSel).length === 1) {
return { kind: "css", value: idSel };
}
} catch {
/* fall through to path building */
}
}
const parts = [];
let node = el;
while (node && node.nodeType === 1 && node !== document.body) {
let part = node.tagName.toLowerCase();
if (node.id) {
parts.unshift(`#${cssEscape(node.id)}`);
break;
}
// The nodes `node` is indexed among. Inside a shadow root that's the root
// itself, not an element — `parentElement` is null there.
const siblingRoot = node.parentElement ?? node.getRootNode();
const sameTag = Array.prototype.filter.call(
siblingRoot?.children ?? [],
(c) => c.tagName === node.tagName,
);
if (sameTag.length > 1) {
part += `:nth-of-type(${sameTag.indexOf(node) + 1})`;
}
parts.unshift(part);
// `parentElement` is null at a shadow boundary, which would end the walk
// there and emit a path rooted inside the component — `div`, say, which
// Playwright's shadow-piercing CSS then matches all over the page.
// Continuing through the host keeps the path anchored in the light DOM.
node = ariaParent(node);
}
// The walk stops before <body>, so an element that *is* body produces no
// segments — and `locator("")` throws at replay. Name the element instead.
if (parts.length === 0) {
return {
kind: "css",
value: el === document.documentElement ? "html" : "body",
};
}
// Anchored at <body> unless the walk already terminated on an id, or on
// <html> itself — `body > html` is not a thing, and neither is
// `body > html > head`. A bare `div:nth-of-type(1) > div` is a pattern, not
// a path: it matches anywhere that shape recurs, so Playwright's strict mode
// fails the step or picks the wrong element. `>` from body keeps it a single
// rooted chain.
if (parts[0] !== "html" && !parts[0].startsWith("#")) {
parts.unshift("body");
}
return { kind: "css", value: parts.join(" > ") };
}
/**
* Find the source location Dyad's development tagger attached to this DOM
* node, or to its nearest tagged ancestor when a component rendered the
* concrete control internally. This is agent navigation metadata only — the
* generated Playwright test never locates by `data-dyad-id`.
*/
function sourceHintFor(el) {
// Keep these bounds aligned with LocatorSourceHintSchema. The suffix can
// contain two MAX_SAFE_INTEGER values in addition to the 2,048-char path.
const MAX_SOURCE_HINT_PATH_LENGTH = 2048;
const MAX_SOURCE_HINT_ATTRIBUTE_LENGTH =
MAX_SOURCE_HINT_PATH_LENGTH +
2 * String(Number.MAX_SAFE_INTEGER).length +
2;
const unsafeSourceHintText = /[\u0000-\u001f\u007f-\u009f\u2028\u2029]/;
const isRelativeInAppSourcePath = (value) =>
!/^[\\/]/.test(value) &&
!/^[a-z][a-z0-9+.-]*:/i.test(value) &&
!/(^|[\\/])\.\.([\\/]|$)/.test(value);
let source = el;
while (source && source.nodeType === 1) {
const raw = source.getAttribute && source.getAttribute("data-dyad-id");
if (
raw &&
raw.length <= MAX_SOURCE_HINT_ATTRIBUTE_LENGTH &&
!unsafeSourceHintText.test(raw)
) {
// Paths may themselves contain colons (notably a Windows drive), so
// take the final two colon-delimited integers as line and column.
const match = /^(.*):(\d+):(\d+)$/.exec(raw);
const line = match ? Number(match[2]) : NaN;
const column = match ? Number(match[3]) : NaN;
if (
match &&
match[1] &&
match[1].length <= MAX_SOURCE_HINT_PATH_LENGTH &&
isRelativeInAppSourcePath(match[1]) &&
Number.isSafeInteger(line) &&
line > 0 &&
Number.isSafeInteger(column) &&
column >= 0
) {
const tagName = String(el.tagName || "").toLowerCase();
if (/^[a-z][a-z0-9-]*$/i.test(tagName)) {
const hint = {
relativePath: match[1],
line,
column,
tagName,
exact: source === el,
};
const inputType =
tagName === "input" && el.getAttribute
? el.getAttribute("type")
: null;
if (
inputType &&
inputType.length <= 128 &&
!unsafeSourceHintText.test(inputType)
) {
hint.inputType = inputType;
}
return hint;
}
}
}
source = ariaParent(source);
}
return null;
}
/**
* The highest-priority candidate that uniquely matches `el`; else the
* highest-priority one disambiguated by an nth index; else a CSS-path fallback.
*
* Candidates are resolved lazily and the loop returns on the first unique
* match, so an element carrying a `data-testid` never pays for the
* whole-document role scan behind it.
*/
function selectorFor(el) {
beginScan();
try {
const candidates = buildCandidates(el);
const resolved = [];
for (const descriptor of candidates) {
const matches = queryAll(descriptor);
if (!matches.includes(el)) continue;
if (matches.length === 1) return descriptor;
resolved.push({ descriptor, matches });
}
for (const { descriptor, matches } of resolved) {
if (matches.length <= 20) {
return { ...descriptor, nth: matches.indexOf(el) };
}
}
const descriptor = cssPathDescriptor(el);
const sourceHint = sourceHintFor(el);
return sourceHint ? { ...descriptor, sourceHint } : descriptor;
} finally {
endScan();
}
}
// Typing is the only genuinely hot path: `input` fires per keystroke and the
// element doesn't move between them, so reuse its descriptor instead of
// re-sweeping the document each time. Only an uninterrupted run of `input` on
// the same element reuses it — any other interaction can have changed the DOM
// enough to make the cached locator ambiguous, so those clear it.
let lastFill = { el: null, locator: null };
function clearFillLocator() {
lastFill = { el: null, locator: null };
}
function fillLocatorFor(el) {
if (lastFill.el === el && el.isConnected) return lastFill.locator;
const locator = selectorFor(el);
lastFill = { el, locator };
return locator;
}
/* ---------- emit / dedupe -------------------------------------------- */
function emit(action) {
const key = JSON.stringify(action);
const now = Date.now();
if (key === lastEmit.key && now - lastEmit.at < DEDUPE_MS) return;
lastEmit = { key, at: now };
window.parent.postMessage({ type: "dyad-recorder-action", action }, "*");
}
/* ---------- key handling --------------------------------------------- */
function keyCombo(e) {
const mods = [];
if (e.ctrlKey) mods.push("Control");
if (e.metaKey) mods.push("Meta");
if (e.altKey) mods.push("Alt");
if (e.shiftKey) mods.push("Shift");
let key = e.key;
if (key && key.length === 1) key = key.toUpperCase();
return [...mods, key].join("+");
}
/**
* Controls the browser activates by dispatching its own trusted `click` when
* Enter is pressed on them. `onClick` records that click, so recording the
* press as well replays the action twice — and for a link or a submit button
* the press navigates first, leaving the duplicate click to run against the
* destination document, where it usually fails outright.
*
* NATIVE elements only. `role="button"` is a promise about semantics, not
* behaviour: nothing dispatches a click for it, so the page's own keydown
* handler is the whole interaction. Suppressing the press there would drop
* the action from the recording entirely rather than deduplicate it.
*/
function activatesOnEnter(el) {
if (!el || el.nodeType !== 1) return false;
if (el.tagName === "BUTTON" || el.tagName === "SUMMARY") return true;
if (el.tagName === "A") return el.hasAttribute("href");
if (el.tagName === "INPUT") {
const type = (el.getAttribute("type") || "text").toLowerCase();
return ["submit", "button", "reset", "image"].includes(type);
}
return false;
}
/**
* Elements the browser itself acts on when Space is pressed, producing
* something the recorder already captures — a synthesized click, a toggle, a
* typed character, a native picker.
*
* The mirror of `activatesOnEnter`, and deliberately not the same list: an
* anchor activates on Enter but NOT on Space. So `<a role="button"
* tabindex="0">` is a custom control as far as Space is concerned, however
* native its tag — the required Space behaviour is entirely the page's own
* keydown handler, and a press left unrecorded there vanishes from replay
* with nothing else standing in for it.
*/
function activatesOnSpace(el) {
if (!el || el.nodeType !== 1) return false;
// Space types a character, which the resulting `fill` carries.
if (el.isContentEditable || el.tagName === "TEXTAREA") return true;
// BUTTON/SUMMARY activate; SELECT opens its picker, and whatever is chosen
// arrives as a `select`. Every INPUT type either acts on Space (checkbox,
// radio, the button types, file) or types into it.
return ["BUTTON", "SUMMARY", "SELECT", "INPUT"].includes(el.tagName);
}
function shouldRecordPress(e) {
if (["Control", "Meta", "Alt", "Shift"].includes(e.key)) return false;
const hasNonShiftModifier = e.ctrlKey || e.metaKey || e.altKey;
if (hasNonShiftModifier) return true;
if (e.key === " " || e.key === "Spacebar") {
const t = deepTarget(e);
// Browsers synthesize the useful click/change for the controls above, but
// custom ARIA controls rely on the app's key handler. Record that Space
// press or keyboard-only interactions disappear from replay entirely.
if (!t || activatesOnSpace(t)) return false;
return ["button", "checkbox", "radio", "switch", "menuitem"].includes(
computeRole(t),
);
}
if (NAV_KEYS.has(e.key)) {
if (e.key === "Enter") {
const t = deepTarget(e);
// Enter inside multi-line editors inserts a newline — that is captured
// by the resulting `fill`, so don't also record it as a press.
if (t && (t.tagName === "TEXTAREA" || t.isContentEditable))
return false;
if (activatesOnEnter(t)) return false;
return true;
}
// Arrows that drive a native control are already recorded as the value
// action the resulting `change` produces. Keeping the press too would
// replay the change twice.
//
// Arrow keys only. Escape is in NAV_KEYS as well, and it changes nothing
// on these controls — so no `change` follows to stand in for the press,
// and suppressing it would drop the interaction from the recording
// entirely.
if (e.key.startsWith("Arrow")) {
const raw = deepTarget(e);
const control = resolveControl(raw) || raw;
if (changesValueOnArrowKeys(control, e.key)) return false;
}
return true;
}
return false;
}
/* ---------- event handlers ------------------------------------------- */
function onClick(e) {
if (!active || !trustedOk(e) || isOverlayEvent(e)) return;
// `detail` is the browser's own click counter for the gesture in progress.
// The 2nd (and later) click of a double-click is reported by the `dblclick`
// that follows, so dropping them here leaves exactly one click ahead of it
// — which is what lets `collapseActions` merge without guessing from
// timestamps it only sees after a postMessage hop.
if (typeof e.detail === "number" && e.detail >= 2) return;
const raw = deepTarget(e);
// The implicit submit an Enter press just triggered. A click the browser
// synthesises carries `detail === 0`, and this one lands somewhere other
// than where Enter was pressed — that pair is what tells it apart from
// Enter pressed directly on a button, whose press is suppressed instead so
// that click is the only record of the action.
if (
e.detail === 0 &&
lastEnterPress.target &&
lastEnterPress.target !== raw &&
Date.now() - lastEnterPress.at < IMPLICIT_SUBMIT_MS
) {
return;
}
clearFillLocator();
const control = resolveControl(raw);
if (control) {
// Seen before any reveal toggle can flip it to type="text".
notePasswordField(control);
// Form controls are recorded from `change` (toggles, selects) or `input`
// (text); skip the click so we don't double-record.
if (recordsWithoutClick(control)) {
return;
}
}
// Emitted now, not after a debounce: a click on a link unloads this document
// within milliseconds and a stalled click would go with it. The click
// preceding a double-click is folded in by the renderer's `collapseActions`.
// A label click dispatches a second trusted click on its associated
// click-driven control. Targeting the control here makes both emissions
// identical, so `emit` deduplicates the browser-generated second click.
const target = control || retarget(raw);
emit({ kind: "click", locator: selectorFor(target) });
}
function onDblClick(e) {
if (!active || !trustedOk(e) || isOverlayEvent(e)) return;
const raw = deepTarget(e);
const control = resolveControl(raw);
// Each click composing the gesture already fired `change` on these, so both
// are recorded (a double-clicked checkbox emits `check` then `uncheck`) and
// there is no leading `click` for `collapseActions` to absorb. Emitting the
// double-click as well would replay four activations for the user's two.
if (control && recordsWithoutClick(control)) return;
// Match the leading-click target for label-activated click controls so the
// renderer can collapse click + dblclick into one double-click action.
const target = control || retarget(raw);
emit({ kind: "dblclick", locator: selectorFor(target) });
}
function onInput(e) {
if (!active || !trustedOk(e)) return;
const t = deepTarget(e);
if (!t || t.nodeType !== 1) return;
if (t.tagName === "SELECT") return; // handled by `change`
if (!isEditable(t)) return;
if (isSecretField(t)) {
// Redact at capture time so the plaintext never leaves the iframe.
emit({
kind: "fill",
locator: fillLocatorFor(t),
value: PASSWORD_PLACEHOLDER,
});
return;
}
const value = t.isContentEditable ? t.innerText : t.value;
emit({
kind: "fill",
locator: fillLocatorFor(t),
value: value == null ? "" : value,
});
}
function onChange(e) {
if (!active || !trustedOk(e)) return;
clearFillLocator();
const t = deepTarget(e);
if (!t || t.nodeType !== 1) return;
if (t.tagName === "SELECT") {
const values = [];
const options = t.options || [];
for (let i = 0; i < options.length; i++) {
if (options[i].selected) values.push(options[i].value);
}
emit({ kind: "select", locator: selectorFor(t), values });
return;
}
if (isValuePicker(t)) {
emit({
kind: "fill",
locator: fillLocatorFor(t),
value: t.value == null ? "" : t.value,
});
return;
}
if (isCheckboxOrRadio(t)) {
// `change` fires after the toggle, so `checked` is the final state.
const checked = t.tagName === "INPUT" ? t.checked : false;
emit({ kind: checked ? "check" : "uncheck", locator: selectorFor(t) });
}
}
function onKeyDown(e) {
if (!active || !trustedOk(e)) return;
if (isOverlayEvent(e)) return;
if (!shouldRecordPress(e)) return;
clearFillLocator();
const raw = deepTarget(e);
// Noted before emitting, so the implicit-submit click this may be about to
// trigger can recognise itself as already recorded. Only Enter submits a
// form implicitly.
if (e.key === "Enter") lastEnterPress = { target: raw, at: Date.now() };
const target = retarget(raw);
// Keys fired with nothing focused target <body>, which has no meaningful
// locator; record those as a page-level `page.keyboard.press`.
if (
!target ||
target === document.body ||
target === document.documentElement
) {
emit({ kind: "press", key: keyCombo(e) });
return;
}
emit({ kind: "press", locator: selectorFor(target), key: keyCombo(e) });
}
/* ---------- hover highlight ------------------------------------------ */
function ensureHoverBox() {
if (hoverBox && hoverBox.isConnected) return hoverBox;
hoverBox = document.createElement("div");
hoverBox.className = OVERLAY_CLASS;
css(hoverBox, {
position: "fixed",
pointerEvents: "none",
zIndex: "2147483647",
border: "2px solid #a855f7",
background: "rgba(168,85,247,0.08)",
borderRadius: "3px",
display: "none",
});
(document.body || document.documentElement).appendChild(hoverBox);
return hoverBox;
}
function hideHover() {
if (hoverBox) hoverBox.style.display = "none";
}
/**
* Take the highlight out of the document entirely, rather than just hiding
* it. Hiding is right between pointer moves; this runs when recording stops,
* and this script's whole contract is that the app is left exactly as it
* would have been without it.
*/
function removeHoverBox() {
if (hoverBox && hoverBox.parentNode) {
hoverBox.parentNode.removeChild(hoverBox);
}
hoverBox = null;
}
function onMouseMove(e) {
if (!active || isOverlayEvent(e)) return;
const raw = deepTarget(e);
const target = resolveControl(raw) || retarget(raw);
notePasswordField(target);
if (!target || target.nodeType !== 1 || !target.getBoundingClientRect) {
hideHover();
return;
}
const rect = target.getBoundingClientRect();
const box = ensureHoverBox();
css(box, {
display: "block",
top: `${rect.top}px`,
left: `${rect.left}px`,
width: `${rect.width}px`,
height: `${rect.height}px`,
});
}
/* ---------- activation ----------------------------------------------- */
function activate() {
if (active) return;
active = true;
watchPasswordReveals();
document.addEventListener("click", onClick, true);
document.addEventListener("dblclick", onDblClick, true);
document.addEventListener("input", onInput, true);
document.addEventListener("change", onChange, true);
document.addEventListener("keydown", onKeyDown, true);
document.addEventListener("mousemove", onMouseMove, true);
}
function deactivate() {
if (!active) return;
active = false;
stopWatchingPasswordReveals();
clearFillLocator();
document.removeEventListener("click", onClick, true);
document.removeEventListener("dblclick", onDblClick, true);
document.removeEventListener("input", onInput, true);
document.removeEventListener("change", onChange, true);
document.removeEventListener("keydown", onKeyDown, true);
document.removeEventListener("mousemove", onMouseMove, true);
removeHoverBox();
}
/* ---------- message bridge ------------------------------------------- */
// Same reasoning as the auth bootstrap's guard: `e.source === window.parent`
// is trivially true for a page's own scripts when this document is top-level
// (opening the preview URL in a real browser), and arming the recorder there
// would stream everything the user types — `fill` values included — to
// whoever asked. This script only has a job inside Dyad's preview frame.
const isFramed = window.parent !== window;
window.addEventListener("message", (e) => {
if (!isFramed) return;
if (e.source !== window.parent) return;
if (!recorderToken || e.data?.token !== recorderToken) return;
const type = e.data.type;
if (type === "activate-dyad-recorder") activate();
else if (type === "deactivate-dyad-recorder") deactivate();
else if (
type === "flush-dyad-recorder" &&
typeof e.data.requestId === "string"
) {
window.parent.postMessage(
{ type: "dyad-recorder-flushed", requestId: e.data.requestId },
"*",
);
}
});
function init() {
window.parent.postMessage({ type: "dyad-recorder-initialized" }, "*");
console.debug("Dyad recorder client initialized");
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", init);
} else {
init();
}
})();