browser-debugger-cli 0.12.0 → 0.14.0

package/dist/runtime/dom/reactEventHelpers.js

@@ -7,8 +7,18 @@
  */
 import { FILL_REFUSALS, LABEL_WITHOUT_CONTROL, NAME_QUERY_PLACEHOLDER, VIA_LABEL_SUFFIX, } from '../../errors/messages.js';
 import { REVEAL_SNAPSHOT_JS } from './actionEffectsScripts.js';
-import { ELEMENT_DESCRIPTION_JS, ELEMENT_IDENTITY_JS } from './elementInfo.js';
+import { ANCESTOR_CLIP_JS } from './elementGeometry.js';
+import { DISABLED_CAUSE_JS, ELEMENT_DESCRIPTION_JS, ELEMENT_IDENTITY_JS, } from './elementInfo.js';
 import { FIND_ELEMENTS_JS, LABEL_CONTROL_JS } from './targetNode.js';
+/**
+ * Page-side copy of a list (`select.options`, a NodeList) as an array,
+ * without `Array.from`, which pages replace.
+ */
+const LIST_JS = `(list) => {
+  const items = [];
+  for (let i = 0; i < list.length; i++) items[items.length] = list[i];
+  return items;
+}`;
 /**
  * Page-side read-back of a filled field: a mismatch when its value is not
  * what was asked for (the page rejected, reformatted or moved the input),
@@ -28,7 +38,7 @@ export const FILL_VALUE_MISMATCH_JS = `(field, expected) => {
     : type === 'checkbox' || type === 'radio'
       ? (field.checked ? 'checked' : 'unchecked')
       : field.localName === 'select' && field.multiple
-        ? Array.from(field.selectedOptions).map((o) => o.value).join(', ')
+        ? (${LIST_JS})(field.selectedOptions).map((o) => o.value).join(', ')
         : String(field.value);
   const time = (text) => text.trim().replace(' ', 'T').replace(/(\\d\\d:\\d\\d):00(\\.0+)?$/, '$1');
   const normalize = (text) => {
@@ -81,9 +91,8 @@ export const FILL_REFUSAL_JS = `(el) => {
   });
   const tag = el.localName;
   if (tag === 'input' || tag === 'textarea' || tag === 'select') {
-    if (el.disabled || el.matches(':disabled')) {
-      return refuse('disabled', el.hasAttribute('disabled') ? 'disabled attribute' : el.closest('fieldset[disabled]') ? 'inside a disabled <fieldset>' : '');
-    }
+    const disabled = (${DISABLED_CAUSE_JS})(el);
+    if (disabled !== null) return refuse('disabled', disabled);
     return el.readOnly ? refuse('readOnly', 'readonly attribute') : null;
   }
   if (el.isContentEditable) return null;
@@ -111,6 +120,17 @@ export const SHADOW_FIELD_JS = `(el) => {
   const fields = el.shadowRoot.querySelectorAll('input:not([type="hidden"]), textarea, select, [contenteditable]:not([contenteditable="false"])');
   return fields.length === 1 ? fields[0] : null;
 }`;
+/**
+ * Page-side: fire a bubbling, non-cancelable event of a type on an element,
+ * like `new Event(type, { bubbles: true })`. The event comes from
+ * `document.createEvent`, which keeps working on pages that replace the
+ * `Event` constructor (MooTools 1.2 does).
+ */
+export const FIRE_EVENT_JS = `(target, type) => {
+  const event = target.ownerDocument.createEvent('Event');
+  event.initEvent(type, true, false);
+  return target.dispatchEvent(event);
+}`;
 /**
  * JavaScript function to fill an input element in a React-compatible way.
  *
@@ -132,6 +152,8 @@ export const SHADOW_FIELD_JS = `(el) => {
 export const REACT_FILL_SCRIPT = `
 (function(selector, parts, value, options) {
   const allMatches = (${FIND_ELEMENTS_JS})(selector, parts);
+  const fire = ${FIRE_EVENT_JS};
+  const listOf = ${LIST_JS};
   const warnings = [];
   let expected = value;
   // Why a user could not reach the field (the value is still set, so scripted
@@ -243,7 +265,7 @@ export const REACT_FILL_SCRIPT = `
   if (tagName === 'select' && el.multiple) {
     // Several options, separated by commas (an option whose value contains a
     // comma matches as a whole); "" selects none
-    const options = Array.from(el.options);
+    const options = listOf(el.options);
     const whole = options.some((o) => o.value === value || o.text.trim() === value);
     const wanted = whole ? [value] : value.split(',').map((part) => part.trim()).filter(Boolean);
     const chosen = wanted.map((part) =>
@@ -261,11 +283,11 @@ export const REACT_FILL_SCRIPT = `
     }
     options.forEach((o) => { o.selected = chosen.includes(o); });
     expected = chosen.map((o) => o.value).join(', ');
-    el.dispatchEvent(new Event('input', { bubbles: true }));
-    el.dispatchEvent(new Event('change', { bubbles: true }));
+    fire(el, 'input');
+    fire(el, 'change');
   } else if (tagName === 'select') {
     // Match by option value first, then by visible label
-    const options = Array.from(el.options);
+    const options = listOf(el.options);
     const option =
       options.find((o) => o.value === value) ||
       options.find((o) => o.text.trim() === value);
@@ -280,8 +302,8 @@ export const REACT_FILL_SCRIPT = `
     }
     el.value = option.value;
     expected = option.value;
-    el.dispatchEvent(new Event('input', { bubbles: true }));
-    el.dispatchEvent(new Event('change', { bubbles: true }));
+    fire(el, 'input');
+    fire(el, 'change');
   } else if (inputType === 'checkbox' || inputType === 'radio') {
     // Toggle through a click, like a user: frameworks (React) track checkable
     // state via click events and revert a programmatic \`checked\` assignment
@@ -321,7 +343,7 @@ export const REACT_FILL_SCRIPT = `
     };
   } else if (el.isContentEditable) {
     el.textContent = value;
-    el.dispatchEvent(new Event('input', { bubbles: true }));
+    fire(el, 'input');
   } else {
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
       el.ownerDocument.defaultView.HTMLInputElement.prototype,
@@ -363,8 +385,8 @@ export const REACT_FILL_SCRIPT = `
       };
     }
 
-    el.dispatchEvent(new Event('input', { bubbles: true }));
-    el.dispatchEvent(new Event('change', { bubbles: true }));
+    fire(el, 'input');
+    fire(el, 'change');
     if (el.validity && (el.validity.rangeOverflow || el.validity.rangeUnderflow)) {
       warnings.push('The value is outside the allowed range (' + (el.min || 'no minimum') + ' to ' + (el.max || 'no maximum') + '); the form will not submit until it is fixed');
     }
@@ -383,7 +405,7 @@ export const REACT_FILL_SCRIPT = `
       : inputType === 'password'
         ? '********'
         : tagName === 'select' && el.multiple
-          ? Array.from(el.selectedOptions).map((o) => o.value).join(', ')
+          ? listOf(el.selectedOptions).map((o) => o.value).join(', ')
           : el.value,
     element: (${ELEMENT_IDENTITY_JS})(el),
     elementType: tagName + viaLabel + viaShadow,
@@ -445,7 +467,7 @@ export const FILL_READ_BACK_SCRIPT = `(() => {
 /**
  * JavaScript function to locate an element for clicking.
  *
- * Scrolls the element into view and reports its center point and whether it
+ * Scrolls the element into view (reporting how far the page moved) and reports its center point and whether it
  * is the topmost element there (`hittable`). It does not click; see
  * `clickElement`, which dispatches real mouse events or falls back to
  * `el.click()`.
@@ -461,6 +483,12 @@ export const FILL_READ_BACK_SCRIPT = `(() => {
  * a press, a probe (`window.__bdgPressProbe`) records whether the press
  * reaches the element, and otherwise which element it landed on: a browser
  * dialog or bubble can swallow input while the page looks normal.
+ * Slotted text hit-tests as its shadow host, so an element in a shadow root
+ * that shows slotted content (a button labelled through a `<slot>`) is
+ * topmost where its host is hit. An element that is not topmost because an
+ * ancestor in the flat tree clips it away (a collapsed
+ * `height: 0; overflow: hidden` accordion, {@link ANCESTOR_CLIP_JS}) is
+ * reported as hidden by it, not as covered.
  */
 export const CLICK_ELEMENT_SCRIPT = `
 (function(selector, parts, index, action) {
@@ -540,7 +568,7 @@ export const CLICK_ELEMENT_SCRIPT = `
     };
   }
   // Disabled elements still get hover (tooltips often explain why)
-  if (action !== 'hover' && (el.disabled || el.matches(':disabled'))) {
+  if (action !== 'hover' && (${DISABLED_CAUSE_JS})(el) !== null) {
     return {
       success: false,
       error: 'Element is disabled',
@@ -549,7 +577,11 @@ export const CLICK_ELEMENT_SCRIPT = `
       suggestion: 'A user cannot click a disabled element; enable it first (it may depend on other fields)'
     };
   }
-  el.scrollIntoView({ behavior: 'auto', block: 'center' });
+  let topView = el.ownerDocument.defaultView;
+  while (topView.frameElement) topView = topView.parent;
+  const scrollBefore = { x: topView.scrollX, y: topView.scrollY };
+  el.scrollIntoView({ behavior: 'instant', block: 'center' });
+  const scrolledBy = { x: Math.round(topView.scrollX - scrollBefore.x), y: Math.round(topView.scrollY - scrollBefore.y) };
 
   // The caller clicks with real mouse events at (x, y) when the element is the
   // topmost thing there; otherwise it falls back to el.click() via this handle.
@@ -560,10 +592,11 @@ export const CLICK_ELEMENT_SCRIPT = `
   window.__bdgClickTarget = el;
   const rect = el.getBoundingClientRect();
   const view = el.ownerDocument.defaultView;
+  const showsSlotted = (node) => Array.from(node.querySelectorAll('slot')).some((slot) => slot.assignedNodes().length > 0);
   const hitTest = (node, px, py) => {
     const root = node.getRootNode();
     const hit = (typeof root.elementFromPoint === 'function' ? root : node.ownerDocument).elementFromPoint(px, py);
-    return hit !== null && (hit === node || node.contains(hit));
+    return hit !== null && (hit === node || node.contains(hit) || (hit === root.host && showsSlotted(node)));
   };
   const toTopPage = (px, py) => {
     let hittable = hitTest(el, px, py);
@@ -587,16 +620,16 @@ export const CLICK_ELEMENT_SCRIPT = `
   const fractions = [[0.5, 0.5], [0.5, 0.25], [0.5, 0.75], [0.25, 0.5], [0.75, 0.5], [0.25, 0.25], [0.75, 0.25], [0.25, 0.75], [0.75, 0.75]];
   const hasSize = rect.width > 0 && rect.height > 0;
   let point = null;
-  for (const [fx, fy] of hasSize ? fractions : [[0.5, 0.5]]) {
-    const candidate = toTopPage(area.left + area.width * fx, area.top + area.height * fy);
+  const tried = hasSize ? fractions : [[0.5, 0.5]];
+  for (let i = 0; i < tried.length; i++) {
+    const candidate = toTopPage(area.left + area.width * tried[i][0], area.top + area.height * tried[i][1]);
     point = point || candidate;
     if (hasSize && candidate.hittable) { point = candidate; break; }
   }
   const x = point.x;
   const y = point.y;
   const hittable = hasSize && point.hittable;
-  const describe = (node) => node.tagName.toLowerCase() + (node.id ? '#' + node.id : '') +
-    (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');
+  const describe = ${ELEMENT_DESCRIPTION_JS};
   const coveredBy = () => {
     const root = el.getRootNode();
     const hit = (typeof root.elementFromPoint === 'function' ? root : el.ownerDocument)
@@ -610,7 +643,10 @@ export const CLICK_ELEMENT_SCRIPT = `
   else if (el.closest('[inert]')) obstruction = 'inert (the page made it non-interactive)';
   else if (style.pointerEvents === 'none') obstruction = 'not clickable (pointer-events: none)';
   else if (!hasSize) obstruction = 'zero-size';
-  else if (!hittable) obstruction = 'covered by another element' + coveredBy();
+  else if (!hittable) {
+    const collapsed = (${ANCESTOR_CLIP_JS})(el, rect, describe).collapsed;
+    obstruction = collapsed ? 'hidden (' + collapsed + ')' : 'covered by another element' + coveredBy();
+  }
 
   if (action === 'hover') (${REVEAL_SNAPSHOT_JS})(el);
 
@@ -618,11 +654,17 @@ export const CLICK_ELEMENT_SCRIPT = `
     const probe = { reached: false, landedOn: null };
     const markReached = (event) => {
       const path = event.composedPath();
-      if (path.includes(el)) probe.reached = true;
+      let reached = false;
+      for (let i = 0; i < path.length; i++) reached = reached || path[i] === el;
+      if (reached) probe.reached = true;
       else if (!probe.landedOn && path[0] && path[0].nodeType === 1) probe.landedOn = describe(path[0]);
     };
-    ['pointerdown', 'mousedown'].forEach((type) => view.addEventListener(type, markReached, true));
-    probe.stop = () => ['pointerdown', 'mousedown'].forEach((type) => view.removeEventListener(type, markReached, true));
+    view.addEventListener('pointerdown', markReached, true);
+    view.addEventListener('mousedown', markReached, true);
+    probe.stop = () => {
+      view.removeEventListener('pointerdown', markReached, true);
+      view.removeEventListener('mousedown', markReached, true);
+    };
     window.__bdgPressProbe = probe;
   }
 
@@ -636,7 +678,8 @@ export const CLICK_ELEMENT_SCRIPT = `
     x: x,
     y: y,
     hittable: hittable,
-    obstruction: obstruction
+    obstruction: obstruction,
+    scrolledBy: scrolledBy.x !== 0 || scrolledBy.y !== 0 ? scrolledBy : undefined
   };
 })
 `;

package/dist/runtime/dom/targetNode.d.ts

@@ -12,8 +12,8 @@ import type { CDPConnection } from '../../connection/cdp.js';
 import { CommandError } from '../../errors/index.js';
 /** Selector placeholder that makes page scripts use the bound node. */
 export declare const BOUND_TARGET_SELECTOR = "__bdg_bound_target__";
-/** Removes the node bound for index-based commands from the window it was stored on */
-export declare const UNBIND_TARGET_SCRIPT = "delete window.__bdgTarget";
+/** Removes the node bound for index-based commands, and matches bound for a selector, from the window they were stored on */
+export declare const UNBIND_TARGET_SCRIPT = "delete window.__bdgTarget; delete window.__bdgMatches";
 /**
  * Page-side matching of filters ({@link SelectorFilter}) and scoped steps
  * ({@link ScopedStep}): called with the open shadow roots of the page, returns
@@ -26,16 +26,20 @@ export declare const UNBIND_TARGET_SCRIPT = "delete window.__bdgTarget";
  * the text nodes of hidden ones (display or visibility; not those of
  * `<script>`, `<style>` or `<noscript>`), so text filters match hidden
  * elements like Playwright's and `:visible` decides visibility; button inputs
- * use their value. Whitespace is collapsed; filter texts arrive normalized
- * (`has-text` lowercased). `:visible` is checked before the text filters,
- * which read the text.
+ * use their value. Text is read in the flat tree, as `bdg dom query` shows
+ * it: the text a web component's open shadow root renders, slotted content
+ * in place of its slots. A visible component, slot or element holding either
+ * ({@link COMPOSED_JS}) is read with {@link FLAT_TEXT_JS}, including the
+ * selects and editable regions `innerText` reads. Whitespace is collapsed;
+ * filter texts arrive normalized (`has-text` lowercased). `:visible` is
+ * checked before the text filters, which read the text.
  *
  * Steps and `:has()` match CSS relative to an element (`:scope > css`). A
  * descendant step also searches the open shadow roots under the element (the
  * whole step CSS inside one shadow tree); a child step stays in the
  * element's own tree.
  */
-export declare const FILTER_MATCHING_JS = "(shadowRoots) => {\n  const skipped = /^(script|style|noscript|template)$/;\n  const hiddenText = (el) => {\n    const walker = el.ownerDocument.createTreeWalker(el, 5, {\n      acceptNode: (node) => (node.nodeType === 1 && skipped.test(node.localName) ? 2 : 1)\n    });\n    let text = '';\n    for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n      if (node.nodeType === 3) text += node.data;\n    }\n    return text;\n  };\n  const textOf = (el) => {\n    if (el.localName === 'input' && /^(submit|button|reset)$/i.test(el.type)) return el.value;\n    const rendered = typeof el.innerText === 'string' &&\n      (typeof el.checkVisibility !== 'function' || el.checkVisibility({ visibilityProperty: true }));\n    return (rendered ? el.innerText : hiddenText(el)).replace(/\\s+/g, ' ').trim();\n  };\n  const passes = (el, filter) => {\n    if (filter.kind === 'visible') {\n      if (typeof el.checkVisibility === 'function' && !el.checkVisibility()) return false;\n      const rect = el.getBoundingClientRect();\n      return rect.width > 0 && rect.height > 0 && el.ownerDocument.defaultView.getComputedStyle(el).visibility === 'visible';\n    }\n    if (filter.kind === 'has') return filter.selectors.some((chain) => descend(el, chain).length > 0);\n    const text = textOf(el);\n    return filter.kind === 'text-is' ? text === filter.text : text.toLowerCase().includes(filter.text);\n  };\n  const passesAll = (el, filters) =>\n    filters.every((filter) => filter.kind !== 'visible' || passes(el, filter)) &&\n    filters.every((filter) => filter.kind === 'visible' || passes(el, filter));\n  const isUnder = (scope, node) => {\n    for (let current = node; current; current = current.getRootNode().host) {\n      if (scope === current || scope.contains(current)) return true;\n    }\n    return false;\n  };\n  const stepMatches = (scope, step) => {\n    const matches = [...scope.querySelectorAll(':scope ' + step.combinator + ' ' + step.css)];\n    if (step.combinator !== ' ') return matches;\n    for (const root of shadowRoots) {\n      if (isUnder(scope, root.host)) matches.push(...root.querySelectorAll(step.css));\n    }\n    return matches;\n  };\n  const descend = (scope, steps) => {\n    let current = [scope];\n    for (const step of steps) {\n      const next = new Set();\n      for (const el of current) {\n        for (const match of stepMatches(el, step)) {\n          if (passesAll(match, step.filters)) next.add(match);\n        }\n      }\n      current = [...next];\n    }\n    return current;\n  };\n  return { passesAll: passesAll, descend: descend };\n}";
+export declare const FILTER_MATCHING_JS = "(shadowRoots) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const flatText = (el, limit, fields) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea)$/.test(node.localName)) return;\n    if (!fields && (node.localName === 'select' || node.isContentEditable)) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n};\n  const skipped = /^(script|style|noscript|template)$/;\n  const hiddenText = (el) => {\n    const nodes = el.localName === 'slot' ? el.assignedNodes({ flatten: true }) : (el.shadowRoot || el).childNodes;\n    let text = '';\n    for (const node of nodes) {\n      if (node.nodeType === 3) text += node.data;\n      else if (node.nodeType === 1 && !skipped.test(node.localName)) text += hiddenText(node);\n    }\n    return text;\n  };\n  const textOf = (el) => {\n    if (el.localName === 'input' && /^(submit|button|reset)$/i.test(el.type)) return el.value;\n    const rendered = typeof el.innerText === 'string' &&\n      (typeof el.checkVisibility !== 'function' || el.checkVisibility({ visibilityProperty: true }));\n    const text = !rendered ? hiddenText(el) : composed(el) ? flatText(el, Infinity, true) : el.innerText;\n    return text.replace(/\\s+/g, ' ').trim();\n  };\n  const passes = (el, filter) => {\n    if (filter.kind === 'visible') {\n      if (typeof el.checkVisibility === 'function' && !el.checkVisibility()) return false;\n      const rect = el.getBoundingClientRect();\n      return rect.width > 0 && rect.height > 0 && el.ownerDocument.defaultView.getComputedStyle(el).visibility === 'visible';\n    }\n    if (filter.kind === 'has') return filter.selectors.some((chain) => descend(el, chain).length > 0);\n    const text = textOf(el);\n    return filter.kind === 'text-is' ? text === filter.text : text.toLowerCase().includes(filter.text);\n  };\n  const passesAll = (el, filters) =>\n    filters.every((filter) => filter.kind !== 'visible' || passes(el, filter)) &&\n    filters.every((filter) => filter.kind === 'visible' || passes(el, filter));\n  const isUnder = (scope, node) => {\n    for (let current = node; current; current = current.getRootNode().host) {\n      if (scope === current || scope.contains(current)) return true;\n    }\n    return false;\n  };\n  const stepMatches = (scope, step) => {\n    const matches = [...scope.querySelectorAll(':scope ' + step.combinator + ' ' + step.css)];\n    if (step.combinator !== ' ') return matches;\n    for (const root of shadowRoots) {\n      if (isUnder(scope, root.host)) matches.push(...root.querySelectorAll(step.css));\n    }\n    return matches;\n  };\n  const descend = (scope, steps) => {\n    let current = [scope];\n    for (const step of steps) {\n      const next = new Set();\n      for (const el of current) {\n        for (const match of stepMatches(el, step)) {\n          if (passesAll(match, step.filters)) next.add(match);\n        }\n      }\n      current = [...next];\n    }\n    return current;\n  };\n  return { passesAll: passesAll, descend: descend };\n}";
 /**
  * Page-side selector search that also reaches into open shadow roots and
  * same-origin iframes (recursively), like a user sees the page.
@@ -49,14 +53,16 @@ export declare const FILTER_MATCHING_JS = "(shadowRoots) => {\n  const skipped =
  * reached. Cross-origin iframes are separate processes and cannot be
  * searched. Throws a `SyntaxError` for an invalid selector.
  */
-export declare const DEEP_QUERY_JS = "function (selector, parts) {\n  const css = parts ? parts.map((part) => part.css).join(', ') : selector;\n  const found = [];\n  const roots = [];\n  const visit = (root) => {\n    roots.push(root);\n    for (const match of root.querySelectorAll(css)) found.push(match);\n    for (const el of root.querySelectorAll('*')) {\n      if (el.shadowRoot) visit(el.shadowRoot);\n      if (el.tagName === 'IFRAME' || el.tagName === 'FRAME') {\n        let frameDocument = null;\n        try { frameDocument = el.contentDocument; } catch (e) { frameDocument = null; }\n        if (frameDocument) visit(frameDocument);\n      }\n    }\n  };\n  visit(document);\n  if (!parts) return found;\n  const shadowRoots = roots.filter((root) => root.host);\n  const { passesAll, descend } = ((shadowRoots) => {\n  const skipped = /^(script|style|noscript|template)$/;\n  const hiddenText = (el) => {\n    const walker = el.ownerDocument.createTreeWalker(el, 5, {\n      acceptNode: (node) => (node.nodeType === 1 && skipped.test(node.localName) ? 2 : 1)\n    });\n    let text = '';\n    for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n      if (node.nodeType === 3) text += node.data;\n    }\n    return text;\n  };\n  const textOf = (el) => {\n    if (el.localName === 'input' && /^(submit|button|reset)$/i.test(el.type)) return el.value;\n    const rendered = typeof el.innerText === 'string' &&\n      (typeof el.checkVisibility !== 'function' || el.checkVisibility({ visibilityProperty: true }));\n    return (rendered ? el.innerText : hiddenText(el)).replace(/\\s+/g, ' ').trim();\n  };\n  const passes = (el, filter) => {\n    if (filter.kind === 'visible') {\n      if (typeof el.checkVisibility === 'function' && !el.checkVisibility()) return false;\n      const rect = el.getBoundingClientRect();\n      return rect.width > 0 && rect.height > 0 && el.ownerDocument.defaultView.getComputedStyle(el).visibility === 'visible';\n    }\n    if (filter.kind === 'has') return filter.selectors.some((chain) => descend(el, chain).length > 0);\n    const text = textOf(el);\n    return filter.kind === 'text-is' ? text === filter.text : text.toLowerCase().includes(filter.text);\n  };\n  const passesAll = (el, filters) =>\n    filters.every((filter) => filter.kind !== 'visible' || passes(el, filter)) &&\n    filters.every((filter) => filter.kind === 'visible' || passes(el, filter));\n  const isUnder = (scope, node) => {\n    for (let current = node; current; current = current.getRootNode().host) {\n      if (scope === current || scope.contains(current)) return true;\n    }\n    return false;\n  };\n  const stepMatches = (scope, step) => {\n    const matches = [...scope.querySelectorAll(':scope ' + step.combinator + ' ' + step.css)];\n    if (step.combinator !== ' ') return matches;\n    for (const root of shadowRoots) {\n      if (isUnder(scope, root.host)) matches.push(...root.querySelectorAll(step.css));\n    }\n    return matches;\n  };\n  const descend = (scope, steps) => {\n    let current = [scope];\n    for (const step of steps) {\n      const next = new Set();\n      for (const el of current) {\n        for (const match of stepMatches(el, step)) {\n          if (passesAll(match, step.filters)) next.add(match);\n        }\n      }\n      current = [...next];\n    }\n    return current;\n  };\n  return { passesAll: passesAll, descend: descend };\n})(shadowRoots);\n  const result = new Set();\n  for (const el of found) {\n    for (const part of parts) {\n      if (!el.matches(part.css) || !passesAll(el, part.filters)) continue;\n      for (const match of descend(el, part.steps || [])) result.add(match);\n    }\n  }\n  const rootOrder = new Map(roots.map((root, i) => [root, i]));\n  const rootIndex = (el) => rootOrder.get(el.getRootNode()) ?? roots.length;\n  return [...result].sort((a, b) =>\n    rootIndex(a) - rootIndex(b) || (a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 : 1)\n  );\n}";
+export declare const DEEP_QUERY_JS = "function (selector, parts) {\n  const css = parts ? parts.map((part) => part.css).join(', ') : selector;\n  const found = [];\n  const roots = [];\n  const visit = (root) => {\n    roots.push(root);\n    for (const match of root.querySelectorAll(css)) found.push(match);\n    for (const el of root.querySelectorAll('*')) {\n      if (el.shadowRoot) visit(el.shadowRoot);\n      if (el.tagName === 'IFRAME' || el.tagName === 'FRAME') {\n        let frameDocument = null;\n        try { frameDocument = el.contentDocument; } catch (e) { frameDocument = null; }\n        if (frameDocument) visit(frameDocument);\n      }\n    }\n  };\n  visit(document);\n  if (!parts) return found;\n  const shadowRoots = roots.filter((root) => root.host);\n  const { passesAll, descend } = ((shadowRoots) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const flatText = (el, limit, fields) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea)$/.test(node.localName)) return;\n    if (!fields && (node.localName === 'select' || node.isContentEditable)) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n};\n  const skipped = /^(script|style|noscript|template)$/;\n  const hiddenText = (el) => {\n    const nodes = el.localName === 'slot' ? el.assignedNodes({ flatten: true }) : (el.shadowRoot || el).childNodes;\n    let text = '';\n    for (const node of nodes) {\n      if (node.nodeType === 3) text += node.data;\n      else if (node.nodeType === 1 && !skipped.test(node.localName)) text += hiddenText(node);\n    }\n    return text;\n  };\n  const textOf = (el) => {\n    if (el.localName === 'input' && /^(submit|button|reset)$/i.test(el.type)) return el.value;\n    const rendered = typeof el.innerText === 'string' &&\n      (typeof el.checkVisibility !== 'function' || el.checkVisibility({ visibilityProperty: true }));\n    const text = !rendered ? hiddenText(el) : composed(el) ? flatText(el, Infinity, true) : el.innerText;\n    return text.replace(/\\s+/g, ' ').trim();\n  };\n  const passes = (el, filter) => {\n    if (filter.kind === 'visible') {\n      if (typeof el.checkVisibility === 'function' && !el.checkVisibility()) return false;\n      const rect = el.getBoundingClientRect();\n      return rect.width > 0 && rect.height > 0 && el.ownerDocument.defaultView.getComputedStyle(el).visibility === 'visible';\n    }\n    if (filter.kind === 'has') return filter.selectors.some((chain) => descend(el, chain).length > 0);\n    const text = textOf(el);\n    return filter.kind === 'text-is' ? text === filter.text : text.toLowerCase().includes(filter.text);\n  };\n  const passesAll = (el, filters) =>\n    filters.every((filter) => filter.kind !== 'visible' || passes(el, filter)) &&\n    filters.every((filter) => filter.kind === 'visible' || passes(el, filter));\n  const isUnder = (scope, node) => {\n    for (let current = node; current; current = current.getRootNode().host) {\n      if (scope === current || scope.contains(current)) return true;\n    }\n    return false;\n  };\n  const stepMatches = (scope, step) => {\n    const matches = [...scope.querySelectorAll(':scope ' + step.combinator + ' ' + step.css)];\n    if (step.combinator !== ' ') return matches;\n    for (const root of shadowRoots) {\n      if (isUnder(scope, root.host)) matches.push(...root.querySelectorAll(step.css));\n    }\n    return matches;\n  };\n  const descend = (scope, steps) => {\n    let current = [scope];\n    for (const step of steps) {\n      const next = new Set();\n      for (const el of current) {\n        for (const match of stepMatches(el, step)) {\n          if (passesAll(match, step.filters)) next.add(match);\n        }\n      }\n      current = [...next];\n    }\n    return current;\n  };\n  return { passesAll: passesAll, descend: descend };\n})(shadowRoots);\n  const result = new Set();\n  for (const el of found) {\n    for (const part of parts) {\n      if (!el.matches(part.css) || !passesAll(el, part.filters)) continue;\n      for (const match of descend(el, part.steps || [])) result.add(match);\n    }\n  }\n  const rootOrder = new Map(roots.map((root, i) => [root, i]));\n  const rootIndex = (el) => rootOrder.get(el.getRootNode()) ?? roots.length;\n  return [...result].sort((a, b) =>\n    rootIndex(a) - rootIndex(b) || (a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 : 1)\n  );\n}";
 /**
  * Page-side element lookup shared by the interaction scripts.
  *
  * Returns the bound node (if still in the page) for the placeholder selector,
- * otherwise all matches of the selector ({@link DEEP_QUERY_JS}).
+ * the matches bound for the selector when the page replaced the search
+ * built-ins ({@link bindMatches}), otherwise all matches of the selector
+ * ({@link DEEP_QUERY_JS}).
  */
-export declare const FIND_ELEMENTS_JS = "function (selector, parts) {\n  if (selector === '__bdg_bound_target__') {\n    const el = window.__bdgTarget;\n    return el && el.isConnected ? [el] : [];\n  }\n  return (function (selector, parts) {\n  const css = parts ? parts.map((part) => part.css).join(', ') : selector;\n  const found = [];\n  const roots = [];\n  const visit = (root) => {\n    roots.push(root);\n    for (const match of root.querySelectorAll(css)) found.push(match);\n    for (const el of root.querySelectorAll('*')) {\n      if (el.shadowRoot) visit(el.shadowRoot);\n      if (el.tagName === 'IFRAME' || el.tagName === 'FRAME') {\n        let frameDocument = null;\n        try { frameDocument = el.contentDocument; } catch (e) { frameDocument = null; }\n        if (frameDocument) visit(frameDocument);\n      }\n    }\n  };\n  visit(document);\n  if (!parts) return found;\n  const shadowRoots = roots.filter((root) => root.host);\n  const { passesAll, descend } = ((shadowRoots) => {\n  const skipped = /^(script|style|noscript|template)$/;\n  const hiddenText = (el) => {\n    const walker = el.ownerDocument.createTreeWalker(el, 5, {\n      acceptNode: (node) => (node.nodeType === 1 && skipped.test(node.localName) ? 2 : 1)\n    });\n    let text = '';\n    for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n      if (node.nodeType === 3) text += node.data;\n    }\n    return text;\n  };\n  const textOf = (el) => {\n    if (el.localName === 'input' && /^(submit|button|reset)$/i.test(el.type)) return el.value;\n    const rendered = typeof el.innerText === 'string' &&\n      (typeof el.checkVisibility !== 'function' || el.checkVisibility({ visibilityProperty: true }));\n    return (rendered ? el.innerText : hiddenText(el)).replace(/\\s+/g, ' ').trim();\n  };\n  const passes = (el, filter) => {\n    if (filter.kind === 'visible') {\n      if (typeof el.checkVisibility === 'function' && !el.checkVisibility()) return false;\n      const rect = el.getBoundingClientRect();\n      return rect.width > 0 && rect.height > 0 && el.ownerDocument.defaultView.getComputedStyle(el).visibility === 'visible';\n    }\n    if (filter.kind === 'has') return filter.selectors.some((chain) => descend(el, chain).length > 0);\n    const text = textOf(el);\n    return filter.kind === 'text-is' ? text === filter.text : text.toLowerCase().includes(filter.text);\n  };\n  const passesAll = (el, filters) =>\n    filters.every((filter) => filter.kind !== 'visible' || passes(el, filter)) &&\n    filters.every((filter) => filter.kind === 'visible' || passes(el, filter));\n  const isUnder = (scope, node) => {\n    for (let current = node; current; current = current.getRootNode().host) {\n      if (scope === current || scope.contains(current)) return true;\n    }\n    return false;\n  };\n  const stepMatches = (scope, step) => {\n    const matches = [...scope.querySelectorAll(':scope ' + step.combinator + ' ' + step.css)];\n    if (step.combinator !== ' ') return matches;\n    for (const root of shadowRoots) {\n      if (isUnder(scope, root.host)) matches.push(...root.querySelectorAll(step.css));\n    }\n    return matches;\n  };\n  const descend = (scope, steps) => {\n    let current = [scope];\n    for (const step of steps) {\n      const next = new Set();\n      for (const el of current) {\n        for (const match of stepMatches(el, step)) {\n          if (passesAll(match, step.filters)) next.add(match);\n        }\n      }\n      current = [...next];\n    }\n    return current;\n  };\n  return { passesAll: passesAll, descend: descend };\n})(shadowRoots);\n  const result = new Set();\n  for (const el of found) {\n    for (const part of parts) {\n      if (!el.matches(part.css) || !passesAll(el, part.filters)) continue;\n      for (const match of descend(el, part.steps || [])) result.add(match);\n    }\n  }\n  const rootOrder = new Map(roots.map((root, i) => [root, i]));\n  const rootIndex = (el) => rootOrder.get(el.getRootNode()) ?? roots.length;\n  return [...result].sort((a, b) =>\n    rootIndex(a) - rootIndex(b) || (a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 : 1)\n  );\n})(selector, parts);\n}";
+export declare const FIND_ELEMENTS_JS = "function (selector, parts) {\n  if (selector === '__bdg_bound_target__') {\n    const el = window.__bdgTarget;\n    return el && el.isConnected ? [el] : [];\n  }\n  const bound = window.__bdgMatches;\n  if (bound && bound.selector === selector) {\n    const connected = [];\n    for (let i = 0; i < bound.nodes.length; i++) {\n      if (bound.nodes[i] && bound.nodes[i].isConnected) connected[connected.length] = bound.nodes[i];\n    }\n    return connected;\n  }\n  return (function (selector, parts) {\n  const css = parts ? parts.map((part) => part.css).join(', ') : selector;\n  const found = [];\n  const roots = [];\n  const visit = (root) => {\n    roots.push(root);\n    for (const match of root.querySelectorAll(css)) found.push(match);\n    for (const el of root.querySelectorAll('*')) {\n      if (el.shadowRoot) visit(el.shadowRoot);\n      if (el.tagName === 'IFRAME' || el.tagName === 'FRAME') {\n        let frameDocument = null;\n        try { frameDocument = el.contentDocument; } catch (e) { frameDocument = null; }\n        if (frameDocument) visit(frameDocument);\n      }\n    }\n  };\n  visit(document);\n  if (!parts) return found;\n  const shadowRoots = roots.filter((root) => root.host);\n  const { passesAll, descend } = ((shadowRoots) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const flatText = (el, limit, fields) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea)$/.test(node.localName)) return;\n    if (!fields && (node.localName === 'select' || node.isContentEditable)) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n};\n  const skipped = /^(script|style|noscript|template)$/;\n  const hiddenText = (el) => {\n    const nodes = el.localName === 'slot' ? el.assignedNodes({ flatten: true }) : (el.shadowRoot || el).childNodes;\n    let text = '';\n    for (const node of nodes) {\n      if (node.nodeType === 3) text += node.data;\n      else if (node.nodeType === 1 && !skipped.test(node.localName)) text += hiddenText(node);\n    }\n    return text;\n  };\n  const textOf = (el) => {\n    if (el.localName === 'input' && /^(submit|button|reset)$/i.test(el.type)) return el.value;\n    const rendered = typeof el.innerText === 'string' &&\n      (typeof el.checkVisibility !== 'function' || el.checkVisibility({ visibilityProperty: true }));\n    const text = !rendered ? hiddenText(el) : composed(el) ? flatText(el, Infinity, true) : el.innerText;\n    return text.replace(/\\s+/g, ' ').trim();\n  };\n  const passes = (el, filter) => {\n    if (filter.kind === 'visible') {\n      if (typeof el.checkVisibility === 'function' && !el.checkVisibility()) return false;\n      const rect = el.getBoundingClientRect();\n      return rect.width > 0 && rect.height > 0 && el.ownerDocument.defaultView.getComputedStyle(el).visibility === 'visible';\n    }\n    if (filter.kind === 'has') return filter.selectors.some((chain) => descend(el, chain).length > 0);\n    const text = textOf(el);\n    return filter.kind === 'text-is' ? text === filter.text : text.toLowerCase().includes(filter.text);\n  };\n  const passesAll = (el, filters) =>\n    filters.every((filter) => filter.kind !== 'visible' || passes(el, filter)) &&\n    filters.every((filter) => filter.kind === 'visible' || passes(el, filter));\n  const isUnder = (scope, node) => {\n    for (let current = node; current; current = current.getRootNode().host) {\n      if (scope === current || scope.contains(current)) return true;\n    }\n    return false;\n  };\n  const stepMatches = (scope, step) => {\n    const matches = [...scope.querySelectorAll(':scope ' + step.combinator + ' ' + step.css)];\n    if (step.combinator !== ' ') return matches;\n    for (const root of shadowRoots) {\n      if (isUnder(scope, root.host)) matches.push(...root.querySelectorAll(step.css));\n    }\n    return matches;\n  };\n  const descend = (scope, steps) => {\n    let current = [scope];\n    for (const step of steps) {\n      const next = new Set();\n      for (const el of current) {\n        for (const match of stepMatches(el, step)) {\n          if (passesAll(match, step.filters)) next.add(match);\n        }\n      }\n      current = [...next];\n    }\n    return current;\n  };\n  return { passesAll: passesAll, descend: descend };\n})(shadowRoots);\n  const result = new Set();\n  for (const el of found) {\n    for (const part of parts) {\n      if (!el.matches(part.css) || !passesAll(el, part.filters)) continue;\n      for (const match of descend(el, part.steps || [])) result.add(match);\n    }\n  }\n  const rootOrder = new Map(roots.map((root, i) => [root, i]));\n  const rootIndex = (el) => rootOrder.get(el.getRootNode()) ?? roots.length;\n  return [...result].sort((a, b) =>\n    rootIndex(a) - rootIndex(b) || (a.compareDocumentPosition(b) & 4 ? -1 : a === b ? 0 : 1)\n  );\n})(selector, parts);\n}";
 /**
  * Page-side check of what selectors cannot search in the top document:
  * iframes whose document cannot be read (cross-origin) and `<object>`/`<embed>`
@@ -94,23 +100,34 @@ export interface ScriptTarget {
     index?: number;
     /** Connection for the page scripts (scoped to the element's frame when the top page cannot reach it) */
     cdp: CDPConnection;
+    /** Built-ins the page replaced that the page scripts use (they run in the page's world) */
+    replacedBuiltins?: string[];
+    /** The page replaced the selector search, so the matches were found in bdg's world */
+    boundInBdgWorld?: boolean;
 }
 /**
  * Run an interaction on the element a request targets. Results and errors
  * never show the internal placeholder: a bound node the page scripts could
  * not find is reported as stale (87), and results carry the user's selector.
+ * On a page that replaced the selector search, a result warns that the
+ * element was found in bdg's world; on a page that replaced built-ins the
+ * scripts use, a failure adds that they may be the cause, and a script that
+ * threw is reported as broken by the page (90), naming them.
  *
  * @param cdp - CDP connection
  * @param params - Request with a selector (and optional index) or a backend node id
  * @param work - The interaction, given the script target
  * @returns The interaction's result
- * @throws CommandError (87) when the bound node left the page during the action
+ * @throws CommandError (87) when the bound node left the page during the
+ *   action, (90) when its script threw on a page that replaced built-ins
  */
 export declare function onScriptTarget<T extends {
     selector?: string;
     error?: string;
     suggestion?: string;
     exitCode?: number;
+    warning?: string;
+    replacedBuiltins?: string[];
 }>(cdp: CDPConnection, params: {
     selector?: string;
     index?: number;