@wdio/mcp 2.2.1 → 2.3.0

package/lib/snapshot.js

@@ -1,214 +1,408 @@
-// src/scripts/get-browser-accessibility-tree.ts
-function flattenAccessibilityTree(node, result = []) {
-  if (!node) return result;
-  if (node.role !== "WebArea" || node.name) {
-    const entry = {
-      role: node.role || "",
-      name: node.name || "",
-      value: node.value ?? "",
-      description: node.description || "",
-      disabled: node.disabled ? "true" : "",
-      focused: node.focused ? "true" : "",
-      selected: node.selected ? "true" : "",
-      checked: node.checked === true ? "true" : node.checked === false ? "false" : node.checked === "mixed" ? "mixed" : "",
-      expanded: node.expanded === true ? "true" : node.expanded === false ? "false" : "",
-      pressed: node.pressed === true ? "true" : node.pressed === false ? "false" : node.pressed === "mixed" ? "mixed" : "",
-      readonly: node.readonly ? "true" : "",
-      required: node.required ? "true" : "",
-      level: node.level ?? "",
-      valuemin: node.valuemin ?? "",
-      valuemax: node.valuemax ?? "",
-      autocomplete: node.autocomplete || "",
-      haspopup: node.haspopup || "",
-      invalid: node.invalid ? "true" : "",
-      modal: node.modal ? "true" : "",
-      multiline: node.multiline ? "true" : "",
-      multiselectable: node.multiselectable ? "true" : "",
-      orientation: node.orientation || "",
-      keyshortcuts: node.keyshortcuts || "",
-      roledescription: node.roledescription || "",
-      valuetext: node.valuetext || ""
-    };
-    result.push(entry);
-  }
-  if (node.children && Array.isArray(node.children)) {
-    for (const child of node.children) {
-      flattenAccessibilityTree(child, result);
-    }
-  }
-  return result;
-}
-async function getBrowserAccessibilityTree(browser) {
-  const puppeteer = await browser.getPuppeteer();
-  const pages = await puppeteer.pages();
-  if (pages.length === 0) {
-    return [];
-  }
-  const page = pages[0];
-  const snapshot = await page.accessibility.snapshot({
-    interestingOnly: true
-  });
-  if (!snapshot) {
-    return [];
-  }
-  return flattenAccessibilityTree(snapshot);
-}
-
 // src/scripts/get-interactable-browser-elements.ts
-var elementsScript = (elementType = "interactable") => (function() {
+var elementsScript = (includeBounds) => (function() {
   const interactableSelectors = [
     "a[href]",
-    // Links with href
     "button",
-    // Buttons
     'input:not([type="hidden"])',
-    // Input fields (except hidden)
     "select",
-    // Select dropdowns
     "textarea",
-    // Text areas
     '[role="button"]',
-    // Elements with button role
     '[role="link"]',
-    // Elements with link role
     '[role="checkbox"]',
-    // Elements with checkbox role
     '[role="radio"]',
-    // Elements with radio role
     '[role="tab"]',
-    // Elements with tab role
     '[role="menuitem"]',
-    // Elements with menuitem role
     '[role="combobox"]',
-    // Elements with combobox role
     '[role="option"]',
-    // Elements with option role
     '[role="switch"]',
-    // Elements with switch role
     '[role="slider"]',
-    // Elements with slider role
     '[role="textbox"]',
-    // Elements with textbox role
     '[role="searchbox"]',
-    // Elements with searchbox role
+    '[role="spinbutton"]',
     '[contenteditable="true"]',
-    // Editable content
     '[tabindex]:not([tabindex="-1"])'
-    // Elements with tabindex
-  ];
-  const visualSelectors = [
-    "img",
-    // Images
-    "picture",
-    // Picture elements
-    "svg",
-    // SVG graphics
-    "video",
-    // Video elements
-    "canvas",
-    // Canvas elements
-    '[style*="background-image"]'
-    // Elements with background images
-  ];
+  ].join(",");
   function isVisible(element) {
     if (typeof element.checkVisibility === "function") {
-      return element.checkVisibility({
-        opacityProperty: true,
-        visibilityProperty: true,
-        contentVisibilityAuto: true
-      });
+      return element.checkVisibility({ opacityProperty: true, visibilityProperty: true, contentVisibilityAuto: true });
     }
     const style = window.getComputedStyle(element);
     return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0" && element.offsetWidth > 0 && element.offsetHeight > 0;
   }
-  function getCssSelector(element) {
-    if (element.id) {
-      return `#${CSS.escape(element.id)}`;
+  function getAccessibleName(el) {
+    const ariaLabel = el.getAttribute("aria-label");
+    if (ariaLabel) return ariaLabel.trim();
+    const labelledBy = el.getAttribute("aria-labelledby");
+    if (labelledBy) {
+      const texts = labelledBy.split(/\s+/).map((id) => document.getElementById(id)?.textContent?.trim() || "").filter(Boolean);
+      if (texts.length > 0) return texts.join(" ").slice(0, 100);
+    }
+    const tag = el.tagName.toLowerCase();
+    if (tag === "img" || tag === "input" && el.getAttribute("type") === "image") {
+      const alt = el.getAttribute("alt");
+      if (alt !== null) return alt.trim();
+    }
+    if (["input", "select", "textarea"].includes(tag)) {
+      const id = el.getAttribute("id");
+      if (id) {
+        const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
+        if (label) return label.textContent?.trim() || "";
+      }
+      const parentLabel = el.closest("label");
+      if (parentLabel) {
+        const clone = parentLabel.cloneNode(true);
+        clone.querySelectorAll("input,select,textarea").forEach((n) => n.remove());
+        const lt = clone.textContent?.trim();
+        if (lt) return lt;
+      }
+    }
+    const ph = el.getAttribute("placeholder");
+    if (ph) return ph.trim();
+    const title = el.getAttribute("title");
+    if (title) return title.trim();
+    return (el.textContent?.trim().replace(/\s+/g, " ") || "").slice(0, 100);
+  }
+  function getSelector(element) {
+    const tag = element.tagName.toLowerCase();
+    const text = element.textContent?.trim().replace(/\s+/g, " ");
+    if (text && text.length > 0 && text.length <= 50) {
+      const sameTagElements = document.querySelectorAll(tag);
+      let matchCount = 0;
+      sameTagElements.forEach((el) => {
+        if (el.textContent?.includes(text)) matchCount++;
+      });
+      if (matchCount === 1) return `${tag}*=${text}`;
+    }
+    const ariaLabel = element.getAttribute("aria-label");
+    if (ariaLabel && ariaLabel.length <= 80) return `aria/${ariaLabel}`;
+    const testId = element.getAttribute("data-testid");
+    if (testId) {
+      const sel = `[data-testid="${CSS.escape(testId)}"]`;
+      if (document.querySelectorAll(sel).length === 1) return sel;
+    }
+    if (element.id) return `#${CSS.escape(element.id)}`;
+    const nameAttr = element.getAttribute("name");
+    if (nameAttr) {
+      const sel = `${tag}[name="${CSS.escape(nameAttr)}"]`;
+      if (document.querySelectorAll(sel).length === 1) return sel;
     }
     if (element.className && typeof element.className === "string") {
       const classes = element.className.trim().split(/\s+/).filter(Boolean);
-      if (classes.length > 0) {
-        const classSelector = classes.slice(0, 2).map((c) => `.${CSS.escape(c)}`).join("");
-        const tagWithClass = `${element.tagName.toLowerCase()}${classSelector}`;
-        if (document.querySelectorAll(tagWithClass).length === 1) {
-          return tagWithClass;
-        }
+      for (const cls of classes) {
+        const sel = `${tag}.${CSS.escape(cls)}`;
+        if (document.querySelectorAll(sel).length === 1) return sel;
+      }
+      if (classes.length >= 2) {
+        const sel = `${tag}${classes.slice(0, 2).map((c) => `.${CSS.escape(c)}`).join("")}`;
+        if (document.querySelectorAll(sel).length === 1) return sel;
       }
     }
     let current = element;
     const path = [];
     while (current && current !== document.documentElement) {
-      let selector = current.tagName.toLowerCase();
+      let seg = current.tagName.toLowerCase();
       if (current.id) {
-        selector = `#${CSS.escape(current.id)}`;
-        path.unshift(selector);
+        path.unshift(`#${CSS.escape(current.id)}`);
         break;
       }
       const parent = current.parentElement;
       if (parent) {
-        const siblings = Array.from(parent.children).filter(
-          (child) => child.tagName === current.tagName
-        );
-        if (siblings.length > 1) {
-          const index = siblings.indexOf(current) + 1;
-          selector += `:nth-child(${index})`;
-        }
+        const siblings = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
+        if (siblings.length > 1) seg += `:nth-of-type(${siblings.indexOf(current) + 1})`;
       }
-      path.unshift(selector);
+      path.unshift(seg);
       current = current.parentElement;
-      if (path.length >= 4) {
+      if (path.length >= 4) break;
+    }
+    return path.join(" > ");
+  }
+  const elements = [];
+  const seen = /* @__PURE__ */ new Set();
+  document.querySelectorAll(interactableSelectors).forEach((el) => {
+    if (seen.has(el)) return;
+    seen.add(el);
+    const htmlEl = el;
+    if (!isVisible(htmlEl)) return;
+    const inputEl = htmlEl;
+    const rect = htmlEl.getBoundingClientRect();
+    const isInViewport = rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
+    const entry = {
+      tagName: htmlEl.tagName.toLowerCase(),
+      name: getAccessibleName(htmlEl),
+      type: htmlEl.getAttribute("type") || "",
+      value: inputEl.value || "",
+      href: htmlEl.getAttribute("href") || "",
+      selector: getSelector(htmlEl),
+      isInViewport
+    };
+    if (includeBounds) {
+      entry.boundingBox = {
+        x: rect.x + window.scrollX,
+        y: rect.y + window.scrollY,
+        width: rect.width,
+        height: rect.height
+      };
+    }
+    elements.push(entry);
+  });
+  return elements;
+})();
+async function getInteractableBrowserElements(browser, options = {}) {
+  const { includeBounds = false } = options;
+  return browser.execute(elementsScript, includeBounds);
+}
+
+// src/scripts/get-browser-accessibility-tree.ts
+var accessibilityTreeScript = () => (function() {
+  const INPUT_TYPE_ROLES = {
+    text: "textbox",
+    search: "searchbox",
+    email: "textbox",
+    url: "textbox",
+    tel: "textbox",
+    password: "textbox",
+    number: "spinbutton",
+    checkbox: "checkbox",
+    radio: "radio",
+    range: "slider",
+    submit: "button",
+    reset: "button",
+    image: "button",
+    file: "button",
+    color: "button"
+  };
+  const LANDMARK_ROLES = /* @__PURE__ */ new Set([
+    "navigation",
+    "main",
+    "banner",
+    "contentinfo",
+    "complementary",
+    "form",
+    "dialog",
+    "region"
+  ]);
+  const CONTAINER_ROLES = /* @__PURE__ */ new Set([
+    "navigation",
+    "banner",
+    "contentinfo",
+    "complementary",
+    "main",
+    "form",
+    "region",
+    "group",
+    "list",
+    "listitem",
+    "table",
+    "row",
+    "rowgroup",
+    "generic"
+  ]);
+  function getRole(el) {
+    const explicit = el.getAttribute("role");
+    if (explicit) return explicit.split(" ")[0];
+    const tag = el.tagName.toLowerCase();
+    switch (tag) {
+      case "button":
+        return "button";
+      case "a":
+        return el.hasAttribute("href") ? "link" : null;
+      case "input": {
+        const type = (el.getAttribute("type") || "text").toLowerCase();
+        if (type === "hidden") return null;
+        return INPUT_TYPE_ROLES[type] || "textbox";
+      }
+      case "select":
+        return "combobox";
+      case "textarea":
+        return "textbox";
+      case "h1":
+      case "h2":
+      case "h3":
+      case "h4":
+      case "h5":
+      case "h6":
+        return "heading";
+      case "img":
+        return "img";
+      case "nav":
+        return "navigation";
+      case "main":
+        return "main";
+      case "header":
+        return !el.closest("article,aside,main,nav,section") ? "banner" : null;
+      case "footer":
+        return !el.closest("article,aside,main,nav,section") ? "contentinfo" : null;
+      case "aside":
+        return "complementary";
+      case "dialog":
+        return "dialog";
+      case "form":
+        return "form";
+      case "section":
+        return el.hasAttribute("aria-label") || el.hasAttribute("aria-labelledby") ? "region" : null;
+      case "summary":
+        return "button";
+      case "details":
+        return "group";
+      case "progress":
+        return "progressbar";
+      case "meter":
+        return "meter";
+      case "ul":
+      case "ol":
+        return "list";
+      case "li":
+        return "listitem";
+      case "table":
+        return "table";
+    }
+    if (el.contentEditable === "true") return "textbox";
+    if (el.hasAttribute("tabindex") && parseInt(el.getAttribute("tabindex") || "-1", 10) >= 0) return "generic";
+    return null;
+  }
+  function getAccessibleName(el, role) {
+    const ariaLabel = el.getAttribute("aria-label");
+    if (ariaLabel) return ariaLabel.trim();
+    const labelledBy = el.getAttribute("aria-labelledby");
+    if (labelledBy) {
+      const texts = labelledBy.split(/\s+/).map((id) => document.getElementById(id)?.textContent?.trim() || "").filter(Boolean);
+      if (texts.length > 0) return texts.join(" ").slice(0, 100);
+    }
+    const tag = el.tagName.toLowerCase();
+    if (tag === "img" || tag === "input" && el.getAttribute("type") === "image") {
+      const alt = el.getAttribute("alt");
+      if (alt !== null) return alt.trim();
+    }
+    if (["input", "select", "textarea"].includes(tag)) {
+      const id = el.getAttribute("id");
+      if (id) {
+        const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
+        if (label) return label.textContent?.trim() || "";
+      }
+      const parentLabel = el.closest("label");
+      if (parentLabel) {
+        const clone = parentLabel.cloneNode(true);
+        clone.querySelectorAll("input,select,textarea").forEach((n) => n.remove());
+        const lt = clone.textContent?.trim();
+        if (lt) return lt;
+      }
+    }
+    const ph = el.getAttribute("placeholder");
+    if (ph) return ph.trim();
+    const title = el.getAttribute("title");
+    if (title) return title.trim();
+    if (role && CONTAINER_ROLES.has(role)) return "";
+    return (el.textContent?.trim().replace(/\s+/g, " ") || "").slice(0, 100);
+  }
+  function getSelector(element) {
+    const tag = element.tagName.toLowerCase();
+    const text = element.textContent?.trim().replace(/\s+/g, " ");
+    if (text && text.length > 0 && text.length <= 50) {
+      const sameTagElements = document.querySelectorAll(tag);
+      let matchCount = 0;
+      sameTagElements.forEach((el) => {
+        if (el.textContent?.includes(text)) matchCount++;
+      });
+      if (matchCount === 1) return `${tag}*=${text}`;
+    }
+    const ariaLabel = element.getAttribute("aria-label");
+    if (ariaLabel && ariaLabel.length <= 80) return `aria/${ariaLabel}`;
+    const testId = element.getAttribute("data-testid");
+    if (testId) {
+      const sel = `[data-testid="${CSS.escape(testId)}"]`;
+      if (document.querySelectorAll(sel).length === 1) return sel;
+    }
+    if (element.id) return `#${CSS.escape(element.id)}`;
+    const nameAttr = element.getAttribute("name");
+    if (nameAttr) {
+      const sel = `${tag}[name="${CSS.escape(nameAttr)}"]`;
+      if (document.querySelectorAll(sel).length === 1) return sel;
+    }
+    if (element.className && typeof element.className === "string") {
+      const classes = element.className.trim().split(/\s+/).filter(Boolean);
+      for (const cls of classes) {
+        const sel = `${tag}.${CSS.escape(cls)}`;
+        if (document.querySelectorAll(sel).length === 1) return sel;
+      }
+      if (classes.length >= 2) {
+        const sel = `${tag}${classes.slice(0, 2).map((c) => `.${CSS.escape(c)}`).join("")}`;
+        if (document.querySelectorAll(sel).length === 1) return sel;
+      }
+    }
+    let current = element;
+    const path = [];
+    while (current && current !== document.documentElement) {
+      let seg = current.tagName.toLowerCase();
+      if (current.id) {
+        path.unshift(`#${CSS.escape(current.id)}`);
         break;
       }
+      const parent = current.parentElement;
+      if (parent) {
+        const siblings = Array.from(parent.children).filter((c) => c.tagName === current.tagName);
+        if (siblings.length > 1) seg += `:nth-of-type(${siblings.indexOf(current) + 1})`;
+      }
+      path.unshift(seg);
+      current = current.parentElement;
+      if (path.length >= 4) break;
     }
     return path.join(" > ");
   }
-  function getElements() {
-    const selectors = [];
-    if (elementType === "interactable" || elementType === "all") {
-      selectors.push(...interactableSelectors);
+  function isVisible(el) {
+    if (typeof el.checkVisibility === "function") {
+      return el.checkVisibility({ opacityProperty: true, visibilityProperty: true, contentVisibilityAuto: true });
     }
-    if (elementType === "visual" || elementType === "all") {
-      selectors.push(...visualSelectors);
+    const style = window.getComputedStyle(el);
+    return style.display !== "none" && style.visibility !== "hidden" && style.opacity !== "0" && el.offsetWidth > 0 && el.offsetHeight > 0;
+  }
+  function getLevel(el) {
+    const m = el.tagName.toLowerCase().match(/^h([1-6])$/);
+    if (m) return parseInt(m[1], 10);
+    const ariaLevel = el.getAttribute("aria-level");
+    if (ariaLevel) return parseInt(ariaLevel, 10);
+    return void 0;
+  }
+  function getState(el) {
+    const inputEl = el;
+    const isCheckable = ["input", "menuitemcheckbox", "menuitemradio"].includes(el.tagName.toLowerCase()) || ["checkbox", "radio", "switch"].includes(el.getAttribute("role") || "");
+    return {
+      disabled: el.getAttribute("aria-disabled") === "true" || inputEl.disabled ? "true" : "",
+      checked: isCheckable && inputEl.checked ? "true" : el.getAttribute("aria-checked") || "",
+      expanded: el.getAttribute("aria-expanded") || "",
+      selected: el.getAttribute("aria-selected") || "",
+      pressed: el.getAttribute("aria-pressed") || "",
+      required: inputEl.required || el.getAttribute("aria-required") === "true" ? "true" : "",
+      readonly: inputEl.readOnly || el.getAttribute("aria-readonly") === "true" ? "true" : ""
+    };
+  }
+  const result = [];
+  function walk(el, depth = 0) {
+    if (depth > 200) return;
+    if (!isVisible(el)) return;
+    const role = getRole(el);
+    if (!role) {
+      for (const child of Array.from(el.children)) {
+        walk(child, depth + 1);
+      }
+      return;
     }
-    const allElements = [];
-    selectors.forEach((selector) => {
-      const elements = document.querySelectorAll(selector);
-      elements.forEach((element) => {
-        if (!allElements.includes(element)) {
-          allElements.push(element);
-        }
-      });
-    });
-    const elementInfos = allElements.filter((element) => isVisible(element) && !element.disabled).map((element) => {
-      const el = element;
-      const inputEl = element;
-      const rect = el.getBoundingClientRect();
-      const isInViewport = rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth);
-      const info = {
-        tagName: el.tagName.toLowerCase(),
-        type: el.getAttribute("type") || "",
-        id: el.id || "",
-        className: (typeof el.className === "string" ? el.className : "") || "",
-        textContent: el.textContent?.trim() || "",
-        value: inputEl.value || "",
-        placeholder: inputEl.placeholder || "",
-        href: el.getAttribute("href") || "",
-        ariaLabel: el.getAttribute("aria-label") || "",
-        role: el.getAttribute("role") || "",
-        src: el.getAttribute("src") || "",
-        alt: el.getAttribute("alt") || "",
-        cssSelector: getCssSelector(el),
-        isInViewport
-      };
-      return info;
-    });
-    return elementInfos;
+    const name = getAccessibleName(el, role);
+    const isLandmark = LANDMARK_ROLES.has(role);
+    const hasIdentity = !!(name || isLandmark);
+    const selector = hasIdentity ? getSelector(el) : "";
+    const node = { role, name, selector, level: getLevel(el) ?? "", ...getState(el) };
+    result.push(node);
+    for (const child of Array.from(el.children)) {
+      walk(child, depth + 1);
+    }
+  }
+  for (const child of Array.from(document.body.children)) {
+    walk(child, 0);
   }
-  return getElements();
+  return result;
 })();
-async function getBrowserInteractableElements(browser, options = {}) {
-  const { elementType = "interactable" } = options;
-  return browser.execute(elementsScript, elementType);
+async function getBrowserAccessibilityTree(browser) {
+  return browser.execute(accessibilityTreeScript);
 }
 
 // src/locators/constants.ts
@@ -1172,7 +1366,7 @@ async function getMobileVisibleElements(browser, platform, options = {}) {
 }
 export {
   getBrowserAccessibilityTree,
-  getBrowserInteractableElements,
+  getInteractableBrowserElements,
   getMobileVisibleElements
 };
 //# sourceMappingURL=snapshot.js.map