browser-debugger-cli 0.7.2 → 0.9.0

package/dist/{commands → runtime}/dom/formDiscovery.js

@@ -18,13 +18,72 @@ export const FORM_DISCOVERY_SCRIPT = `
 (function() {
   const result = { forms: [] };
 
+  // Rendered and not visibility-hidden, ancestors included (opacity is left
+  // out: styled checkboxes and radios are often transparent)
+  function isShown(element) {
+    if (typeof element.checkVisibility === 'function') {
+      return element.checkVisibility({ visibilityProperty: true });
+    }
+    const style = window.getComputedStyle(element);
+    return style.display !== 'none' && style.visibility !== 'hidden';
+  }
+
+  // Inside an open dialog: <dialog open>, aria-modal or a dialog role, or a
+  // modal without them (DocSearch): an overlay ancestor below <body>
+  // (position fixed or absolute) that is raised (z-index > 0) or has a
+  // backdrop and whose class names a modal or dialog, or a fixed overlay over
+  // half the viewport or more that is raised or lies over other page content
+  // at the viewport centre. Static wrappers (Drupal's
+  // dialog-off-canvas-main-canvas) and fixed app shells holding the whole
+  // page are not dialogs.
+  function inDialog(element) {
+    if (element.closest('dialog[open], [aria-modal="true"], [role="dialog"], [role="alertdialog"]')) return true;
+    const viewportArea = window.innerWidth * window.innerHeight;
+    for (let node = element.parentElement; node && node !== document.body; node = node.parentElement) {
+      const style = window.getComputedStyle(node);
+      if (style.position !== 'fixed' && style.position !== 'absolute') continue;
+      const raised = parseInt(style.zIndex, 10) > 0;
+      const className = typeof node.className === 'string' ? node.className : '';
+      if (/(^|[\\s_-])(modal|dialog)($|[\\s_-])/i.test(className) && (raised || hasBackdrop(node))) return true;
+      if (style.position !== 'fixed') continue;
+      const box = node.getBoundingClientRect();
+      if (box.width * box.height >= viewportArea / 2 && (raised || coversContent(node))) return true;
+    }
+    return false;
+  }
+
+  // A backdrop element next to or inside an overlay
+  function hasBackdrop(node) {
+    const backdrop = /backdrop|overlay/i;
+    const near = [node.previousElementSibling, node.nextElementSibling, ...Array.from(node.children)];
+    return near.some((n) => n && typeof n.className === 'string' && backdrop.test(n.className));
+  }
+
+  // The overlay is on top at the viewport centre with other page content
+  // (not its ancestors) below it
+  function coversContent(node) {
+    const stack = document.elementsFromPoint(window.innerWidth / 2, window.innerHeight / 2);
+    if (!stack.length || !node.contains(stack[0])) return false;
+    return stack.some((n) => !n.contains(node) && !node.contains(n));
+  }
+
+  function isUnique(selector) {
+    try {
+      return document.querySelectorAll(selector).length === 1;
+    } catch (e) {
+      return false;
+    }
+  }
+
   function generateSelector(element) {
-    if (element.id) {
+    if (element.id && isUnique('#' + CSS.escape(element.id))) {
       return '#' + CSS.escape(element.id);
     }
     if (element.name) {
-      const tag = element.tagName.toLowerCase();
-      return tag + '[name="' + CSS.escape(element.name) + '"]';
+      const byName = element.tagName.toLowerCase() + '[name="' + CSS.escape(element.name) + '"]';
+      if (isUnique(byName)) return byName;
+      const byValue = byName + '[value="' + CSS.escape(element.getAttribute('value') || '') + '"]';
+      if (element.hasAttribute('value') && isUnique(byValue)) return byValue;
     }
     const tag = element.tagName.toLowerCase();
     const parent = element.parentElement;
@@ -48,7 +107,6 @@ export const FORM_DISCOVERY_SCRIPT = `
       /\\bchevron\\b/gi,
       /←|→|↑|↓|▲|▼|◀|▶/g,
       /\\u25C0|\\u25B6|\\u25B2|\\u25BC/g,
-      /Previous|Next|Back|Forward/gi,
       /^\\s*[<>]\\s*/,
       /\\s*[<>]\\s*$/,
     ];
@@ -57,9 +115,50 @@ export const FORM_DISCOVERY_SCRIPT = `
       cleaned = cleaned.replace(pattern, '');
     }
     cleaned = cleaned.replace(/\\s{2,}/g, ' ').trim();
+    cleaned = cleaned.replace(/^\\*\\s+/, '').replace(/\\s+\\*(\\s*:?)$/, '$1');
     return cleaned || text.trim();
   }
 
+  // The element labelling a field: label[for], aria-labelledby, wrapping label
+  function labelElement(element) {
+    const labelFor = element.id ? document.querySelector('label[for="' + CSS.escape(element.id) + '"]') : null;
+    const labelledBy = element.getAttribute('aria-labelledby');
+    return labelFor || (labelledBy && document.getElementById(labelledBy)) || element.closest('label');
+  }
+
+  // A standalone required star in label text: "* Name", "Name *", "Name *:"
+  // (not a footnote mark such as "Terms*")
+  function labelMarksRequired(text) {
+    return /^\\*\\s|\\s\\*\\s*:?$/.test(String(text).trim());
+  }
+
+  // Required by attribute, ARIA, or a label marked with a standalone star,
+  // or with an element of its own holding just "*" (<span aria-hidden>*</span>)
+  function isRequired(element) {
+    if (element.required || element.getAttribute('aria-required') === 'true') return true;
+    const label = labelElement(element);
+    if (!label) return false;
+    const clone = label.cloneNode(true);
+    clone.querySelectorAll('input, select, textarea, button').forEach(i => i.remove());
+    return labelMarksRequired(clone.textContent || '') ||
+      Array.from(clone.querySelectorAll('*')).some(n => n.textContent.trim() === '*');
+  }
+
+  // Name of the radio or checkbox group a field belongs to: its radiogroup's
+  // label, its fieldset's legend, or its name
+  function groupLabel(element) {
+    const type = element.type?.toLowerCase();
+    if ((type !== 'radio' && type !== 'checkbox') || !element.name) return undefined;
+    const group = element.closest('[role="radiogroup"], fieldset');
+    const named = group && (group.getAttribute('aria-label') ||
+      (group.querySelector(':scope > legend') || {}).textContent);
+    if (named && named.trim()) return cleanLabelText(named);
+    return element.name
+      .replace(/[_-]/g, ' ')
+      .replace(/([a-z])([A-Z])/g, '$1 $2')
+      .replace(/^./, s => s.toUpperCase());
+  }
+
   function extractLabel(element) {
     if (element.id) {
       const labelFor = document.querySelector('label[for="' + CSS.escape(element.id) + '"]');
@@ -185,8 +284,22 @@ export const FORM_DISCOVERY_SCRIPT = `
                       next.getAttribute('role') === 'alert';
       if (isError) return next.textContent.trim();
     }
+    // aria-errormessage always names the error; aria-describedby does when the
+    // field is marked invalid or the description looks like an error
+    const invalid = element.getAttribute('aria-invalid') === 'true';
+    const errorIds = (element.getAttribute('aria-errormessage') || '').split(/\\s+/).filter(Boolean);
+    const describedIds = (element.getAttribute('aria-describedby') || '').split(/\\s+/).filter(Boolean);
+    for (const id of [...errorIds, ...describedIds]) {
+      const target = document.getElementById(id);
+      const looksLikeError = errorIds.includes(id) || invalid ||
+        /error|invalid|alert/i.test(target ? target.className + ' ' + (target.getAttribute('role') || '') : '');
+      if (target && looksLikeError && target.textContent.trim()) {
+        return target.textContent.trim();
+      }
+    }
     const parent = element.parentElement;
-    if (parent) {
+    const controls = parent ? parent.querySelectorAll('input, select, textarea, [contenteditable="true"]') : [];
+    if (parent && controls.length === 1) {
       const errorEl = parent.querySelector('.error-message, .field-error, [role="alert"]');
       if (errorEl && errorEl !== element) return errorEl.textContent.trim();
     }
@@ -208,8 +321,13 @@ export const FORM_DISCOVERY_SCRIPT = `
     if (isInHeader) score -= 10;
     const isInAside = formEl.closest('aside, [role="complementary"], footer, [role="contentinfo"]');
     if (isInAside) score -= 5;
-    score += Math.min(fields.length * 3, 30);
-    const hasSubmit = buttons.some(b => b.type === 'submit' || b.isPrimary);
+    const distinctFields = new Set(
+      fields.map((f) => (f.type === 'radio' || f.type === 'checkbox') && f.name ? f.type + ':' + f.name : f.index)
+    ).size;
+    score += Math.min(distinctFields * 3, 30);
+    const textTypes = ['text', 'search', 'email', 'password', 'textarea', 'tel', 'url', 'number', 'textbox'];
+    if (fields.some((f) => textTypes.includes(f.type))) score += 10;
+    const hasSubmit = buttons.some(b => b.type === 'submit' || b.primaryClass);
     if (hasSubmit) score += 10;
     const style = window.getComputedStyle(formEl);
     if (style.display === 'none' || style.visibility === 'hidden') score -= 100;
@@ -314,8 +432,6 @@ export const FORM_DISCOVERY_SCRIPT = `
         return h.textContent.trim();
       }
     }
-    const legend = formEl.querySelector('legend');
-    if (legend) return legend.textContent.trim();
     const title = formEl.getAttribute('title');
     if (title) return title;
     const name = formEl.getAttribute('name');
@@ -351,8 +467,7 @@ export const FORM_DISCOVERY_SCRIPT = `
     const allInputs = new Set([...nativeInputs, ...customInputs]);
     let idx = startIndex;
     for (const el of allInputs) {
-      const style = window.getComputedStyle(el);
-      const isHidden = style.display === 'none' || style.visibility === 'hidden' || el.type === 'hidden';
+      const isHidden = el.type === 'hidden' || !isShown(el);
       const value = getFieldValue(el);
       fields.push({
         index: idx,
@@ -363,7 +478,8 @@ export const FORM_DISCOVERY_SCRIPT = `
         label: extractLabel(el),
         name: el.name || null,
         placeholder: el.placeholder || undefined,
-        required: el.required || el.getAttribute('aria-required') === 'true',
+        required: isRequired(el),
+        groupLabel: groupLabel(el),
         disabled: el.disabled || el.getAttribute('aria-disabled') === 'true',
         readOnly: el.readOnly || false,
         hidden: isHidden,
@@ -371,7 +487,8 @@ export const FORM_DISCOVERY_SCRIPT = `
         value: value,
         checked: el.checked,
         validationMessage: el.validationMessage || undefined,
-        isValid: el.checkValidity ? el.checkValidity() : true,
+        isValid: el.validity ? el.validity.valid : true,
+        valueMissing: el.validity ? el.validity.valueMissing : false,
         ariaInvalid: el.getAttribute('aria-invalid') === 'true',
         hasErrorClass: el.classList.contains('error') || el.classList.contains('invalid'),
         siblingErrorText: findSiblingError(el),
@@ -393,21 +510,22 @@ export const FORM_DISCOVERY_SCRIPT = `
     );
     let idx = startIndex;
     for (const el of buttonEls) {
-      const style = window.getComputedStyle(el);
-      if (style.display === 'none' || style.visibility === 'hidden') continue;
+      if (!isShown(el)) continue;
       const type = el.type?.toLowerCase() || 'button';
       const btnType = type === 'submit' ? 'submit' : type === 'reset' ? 'reset' : 'button';
-      const isPrimary = btnType === 'submit' ||
-                        el.classList.contains('primary') ||
-                        el.classList.contains('btn-primary') ||
-                        el.classList.contains('submit');
+      const explicitSubmit = btnType === 'submit' &&
+        (el.tagName === 'INPUT' || (el.getAttribute('type') || '').toLowerCase() === 'submit');
+      const formDefault = btnType === 'submit' && !explicitSubmit && Boolean(el.form);
+      const primaryClass = Array.from(el.classList).some(c => /^(btn[-_])?(primary|submit)$/i.test(c));
       buttons.push({
         index: idx,
         selector: generateSelector(el),
         label: extractButtonLabel(el),
         type: btnType,
         disabled: el.disabled || el.getAttribute('aria-disabled') === 'true',
-        isPrimary: isPrimary
+        explicitSubmit: explicitSubmit,
+        formDefault: formDefault,
+        primaryClass: primaryClass
       });
       idx++;
     }
@@ -417,9 +535,11 @@ export const FORM_DISCOVERY_SCRIPT = `
   const forms = document.querySelectorAll('form');
   let globalIndex = 0;
 
-  if (forms.length === 0) {
-    const bodyFields = discoverFields(document.body, 0, 0);
-    const bodyButtons = discoverButtons(document.body, bodyFields.length);
+  // A page still loading may not have a body yet
+  const pageRoot = document.body || document.documentElement;
+  if (forms.length === 0 && pageRoot) {
+    const bodyFields = discoverFields(pageRoot, 0, 0);
+    const bodyButtons = discoverButtons(pageRoot, bodyFields.length);
     if (bodyFields.length > 0) {
       result.forms.push({
         index: 0,
@@ -428,6 +548,8 @@ export const FORM_DISCOVERY_SCRIPT = `
         method: 'GET',
         step: null,
         relevanceScore: bodyFields.length * 3,
+        hidden: false,
+        inDialog: false,
         inIframe: false,
         fields: bodyFields,
         buttons: bodyButtons
@@ -441,6 +563,10 @@ export const FORM_DISCOVERY_SCRIPT = `
       const buttons = discoverButtons(formEl, globalIndex);
       globalIndex += buttons.length;
       const inIframe = formEl.ownerDocument !== document;
+      // Shown when a field or a button is (buttons list shown ones only), or
+      // it has neither (a form with only type=hidden inputs and no button)
+      const shown = isShown(formEl) &&
+        (fields.some((f) => !f.hidden) || buttons.length > 0 || fields.length === 0);
       result.forms.push({
         index: i,
         name: extractFormName(formEl),
@@ -448,6 +574,8 @@ export const FORM_DISCOVERY_SCRIPT = `
         method: (formEl.method || 'GET').toUpperCase(),
         step: detectFormStep(formEl),
         relevanceScore: calculateRelevance(formEl, fields, buttons),
+        hidden: !shown,
+        inDialog: shown && inDialog(formEl),
         inIframe: inIframe,
         fields: fields,
         buttons: buttons
@@ -455,8 +583,19 @@ export const FORM_DISCOVERY_SCRIPT = `
     }
   }
 
-  result.forms.sort((a, b) => b.relevanceScore - a.relevanceScore);
+  // Forms the main document does not contain may be in its same-origin iframes
+  if (result.forms.length === 0) {
+    result.frameForms = [];
+    for (const frame of document.querySelectorAll('iframe, frame')) {
+      let frameDocument = null;
+      try { frameDocument = frame.contentDocument; } catch (e) { frameDocument = null; }
+      if (frameDocument && frameDocument.querySelector('form, input:not([type=hidden]), select, textarea')) {
+        result.frameForms.push({ url: frame.src || 'about:blank' });
+      }
+    }
+  }
 
+  result.readyState = document.readyState;
   return result;
 })()
 `;

package/dist/runtime/dom/formFillHelpers/fill.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Fill and click operations — inject React-compatible page-context scripts
+ * and unpack structured results.
+ */
+import type { CDPConnection } from '../../../connection/cdp.js';
+import { type FillOptions, type FillResult, type ClickResult } from '../reactEventHelpers.js';
+/**
+ * Fill a form element with a value in a React-compatible way.
+ */
+export declare function fillElement(cdp: CDPConnection, selector: string, value: string, options?: FillOptions): Promise<FillResult>;
+/** How a located element is pointed at */
+export type PointerAction = 'click' | 'double' | 'right' | 'hover';
+/**
+ * Real mouse events for an action at a point.
+ *
+ * @param action - What to do
+ * @param x - Page x
+ * @param y - Page y
+ * @returns `Input.dispatchMouseEvent` parameters, in order
+ */
+export declare function mouseEvents(action: PointerAction, x: number, y: number): Array<Record<string, unknown>>;
+/**
+ * Whether the mouse press just dispatched reached the target element.
+ *
+ * Any doubt (no probe, evaluation failure) counts as reached, so only a
+ * press that the page provably never saw is reported.
+ *
+ * @param cdp - CDP connection
+ * @returns False only when the target received no pointerdown/mousedown
+ */
+export declare function pressReachedTarget(cdp: CDPConnection): Promise<boolean>;
+/**
+ * Click an element.
+ */
+export declare function clickElement(cdp: CDPConnection, selector: string, options?: {
+    index?: number;
+    action?: PointerAction;
+}): Promise<ClickResult>;
+//# sourceMappingURL=fill.d.ts.map