@page-agent/page-controller 1.7.0 → 1.8.0-beta.0

package/dist/lib/page-controller.js

@@ -1,40 +1,30 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 function isHTMLElement(el) {
   return !!el && el.nodeType === 1;
 }
-__name(isHTMLElement, "isHTMLElement");
 function isInputElement(el) {
   return el?.nodeType === 1 && el.tagName === "INPUT";
 }
-__name(isInputElement, "isInputElement");
 function isTextAreaElement(el) {
   return el?.nodeType === 1 && el.tagName === "TEXTAREA";
 }
-__name(isTextAreaElement, "isTextAreaElement");
 function isSelectElement(el) {
   return el?.nodeType === 1 && el.tagName === "SELECT";
 }
-__name(isSelectElement, "isSelectElement");
 function isAnchorElement(el) {
   return el?.nodeType === 1 && el.tagName === "A";
 }
-__name(isAnchorElement, "isAnchorElement");
 function getIframeOffset(element) {
   const frame = element.ownerDocument.defaultView?.frameElement;
   if (!frame) return { x: 0, y: 0 };
   const rect = frame.getBoundingClientRect();
   return { x: rect.left, y: rect.top };
 }
-__name(getIframeOffset, "getIframeOffset");
 function getNativeValueSetter(element) {
   return Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), "value").set;
 }
-__name(getNativeValueSetter, "getNativeValueSetter");
 async function waitFor(seconds) {
   await new Promise((resolve) => setTimeout(resolve, seconds * 1e3));
 }
-__name(waitFor, "waitFor");
 async function movePointerToElement(element, x, y) {
   const offset = getIframeOffset(element);
   window.dispatchEvent(
@@ -44,19 +34,15 @@ async function movePointerToElement(element, x, y) {
   );
   await waitFor(0.3);
 }
-__name(movePointerToElement, "movePointerToElement");
 async function clickPointer() {
   window.dispatchEvent(new CustomEvent("PageAgent::ClickPointer"));
 }
-__name(clickPointer, "clickPointer");
 async function enablePassThrough() {
   window.dispatchEvent(new CustomEvent("PageAgent::EnablePassThrough"));
 }
-__name(enablePassThrough, "enablePassThrough");
 async function disablePassThrough() {
   window.dispatchEvent(new CustomEvent("PageAgent::DisablePassThrough"));
 }
-__name(disablePassThrough, "disablePassThrough");
 function getElementByIndex(selectorMap, index) {
   const interactiveNode = selectorMap.get(index);
   if (!interactiveNode) {
@@ -71,7 +57,6 @@ function getElementByIndex(selectorMap, index) {
   }
   return element;
 }
-__name(getElementByIndex, "getElementByIndex");
 let lastClickedElement = null;
 function blurLastClickedElement() {
   if (lastClickedElement) {
@@ -83,7 +68,6 @@ function blurLastClickedElement() {
     lastClickedElement = null;
   }
 }
-__name(blurLastClickedElement, "blurLastClickedElement");
 async function clickElement(element) {
   blurLastClickedElement();
   lastClickedElement = element;
@@ -121,7 +105,6 @@ async function clickElement(element) {
   target.click();
   await waitFor(0.2);
 }
-__name(clickElement, "clickElement");
 async function inputTextElement(element, text) {
   const isContentEditable = element.isContentEditable;
   if (!isInputElement(element) && !isTextAreaElement(element) && !isContentEditable) {
@@ -184,7 +167,6 @@ async function inputTextElement(element, text) {
   await waitFor(0.1);
   blurLastClickedElement();
 }
-__name(inputTextElement, "inputTextElement");
 async function selectOptionElement(selectElement, optionText) {
   if (!isSelectElement(selectElement)) {
     throw new Error("Element is not a select element");
@@ -198,7 +180,6 @@ async function selectOptionElement(selectElement, optionText) {
   selectElement.dispatchEvent(new Event("change", { bubbles: true }));
   await waitFor(0.1);
 }
-__name(selectOptionElement, "selectOptionElement");
 async function scrollIntoViewIfNeeded(element) {
   const el = element;
   if (typeof el.scrollIntoViewIfNeeded === "function") {
@@ -207,8 +188,7 @@ async function scrollIntoViewIfNeeded(element) {
     element.scrollIntoView({ behavior: "auto", block: "center", inline: "nearest" });
   }
 }
-__name(scrollIntoViewIfNeeded, "scrollIntoViewIfNeeded");
-async function scrollVertically(down, scroll_amount, element) {
+async function scrollVertically(scroll_amount, element) {
   if (element) {
     const targetElement = element;
     let currentElement = targetElement;
@@ -219,7 +199,7 @@ async function scrollVertically(down, scroll_amount, element) {
     const dy2 = scroll_amount;
     while (currentElement && attempts < 10) {
       const computedStyle = window.getComputedStyle(currentElement);
-      const hasScrollableY = /(auto|scroll|overlay)/.test(computedStyle.overflowY);
+      const hasScrollableY = /(auto|scroll|overlay)/.test(computedStyle.overflowY) || computedStyle.scrollbarWidth && computedStyle.scrollbarWidth !== "auto" || computedStyle.scrollbarGutter && computedStyle.scrollbarGutter !== "auto";
       const canScrollVertically = currentElement.scrollHeight > currentElement.clientHeight;
       if (hasScrollableY && canScrollVertically) {
         const beforeScroll = currentElement.scrollTop;
@@ -253,8 +233,8 @@ async function scrollVertically(down, scroll_amount, element) {
     }
   }
   const dy = scroll_amount;
-  const bigEnough = /* @__PURE__ */ __name((el2) => el2.clientHeight >= window.innerHeight * 0.5, "bigEnough");
-  const canScroll = /* @__PURE__ */ __name((el2) => el2 && /(auto|scroll|overlay)/.test(getComputedStyle(el2).overflowY) && el2.scrollHeight > el2.clientHeight && bigEnough(el2), "canScroll");
+  const bigEnough = (el2) => el2.clientHeight >= window.innerHeight * 0.5;
+  const canScroll = (el2) => el2 && /(auto|scroll|overlay)/.test(getComputedStyle(el2).overflowY) && el2.scrollHeight > el2.clientHeight && bigEnough(el2);
   let el = document.activeElement;
   while (el && !canScroll(el) && el !== document.body) el = el.parentElement;
   el = canScroll(el) ? el : Array.from(document.querySelectorAll("*")).find(canScroll) || document.scrollingElement || document.documentElement;
@@ -273,6 +253,8 @@ async function scrollVertically(down, scroll_amount, element) {
     if (reachedTop) return `✅ Scrolled page by ${scrolled}px. Reached the top of the page.`;
     return `✅ Scrolled page by ${scrolled}px.`;
   } else {
+    const warningMsg = `The document is not scrollable. Falling back to container scroll.`;
+    console.log(`[PageController] ${warningMsg}`);
     const scrollBefore = el.scrollTop;
     const scrollMax = el.scrollHeight - el.clientHeight;
     el.scrollBy({ top: dy, behavior: "smooth" });
@@ -280,19 +262,18 @@ async function scrollVertically(down, scroll_amount, element) {
     const scrollAfter = el.scrollTop;
     const scrolled = scrollAfter - scrollBefore;
     if (Math.abs(scrolled) < 1) {
-      return dy > 0 ? `⚠️ Already at the bottom of container (${el.tagName}), cannot scroll down further.` : `⚠️ Already at the top of container (${el.tagName}), cannot scroll up further.`;
+      return dy > 0 ? `⚠️ ${warningMsg} Already at the bottom of container (${el.tagName}), cannot scroll down further.` : `⚠️ ${warningMsg} Already at the top of container (${el.tagName}), cannot scroll up further.`;
     }
     const reachedBottom = dy > 0 && scrollAfter >= scrollMax - 1;
     const reachedTop = dy < 0 && scrollAfter <= 1;
     if (reachedBottom)
-      return `✅ Scrolled container (${el.tagName}) by ${scrolled}px. Reached the bottom.`;
+      return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px. Reached the bottom.`;
     if (reachedTop)
-      return `✅ Scrolled container (${el.tagName}) by ${scrolled}px. Reached the top.`;
-    return `✅ Scrolled container (${el.tagName}) by ${scrolled}px.`;
+      return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px. Reached the top.`;
+    return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px.`;
   }
 }
-__name(scrollVertically, "scrollVertically");
-async function scrollHorizontally(right, scroll_amount, element) {
+async function scrollHorizontally(scroll_amount, element) {
   if (element) {
     const targetElement = element;
     let currentElement = targetElement;
@@ -300,10 +281,10 @@ async function scrollHorizontally(right, scroll_amount, element) {
     let scrolledElement = null;
     let scrollDelta = 0;
     let attempts = 0;
-    const dx2 = right ? scroll_amount : -scroll_amount;
+    const dx2 = scroll_amount;
     while (currentElement && attempts < 10) {
       const computedStyle = window.getComputedStyle(currentElement);
-      const hasScrollableX = /(auto|scroll|overlay)/.test(computedStyle.overflowX);
+      const hasScrollableX = /(auto|scroll|overlay)/.test(computedStyle.overflowX) || computedStyle.scrollbarWidth && computedStyle.scrollbarWidth !== "auto" || computedStyle.scrollbarGutter && computedStyle.scrollbarGutter !== "auto";
       const canScrollHorizontally = currentElement.scrollWidth > currentElement.clientWidth;
       if (hasScrollableX && canScrollHorizontally) {
         const beforeScroll = currentElement.scrollLeft;
@@ -336,9 +317,9 @@ async function scrollHorizontally(right, scroll_amount, element) {
       return `No horizontally scrollable container found for element (${targetElement.tagName})`;
     }
   }
-  const dx = right ? scroll_amount : -scroll_amount;
-  const bigEnough = /* @__PURE__ */ __name((el2) => el2.clientWidth >= window.innerWidth * 0.5, "bigEnough");
-  const canScroll = /* @__PURE__ */ __name((el2) => el2 && /(auto|scroll|overlay)/.test(getComputedStyle(el2).overflowX) && el2.scrollWidth > el2.clientWidth && bigEnough(el2), "canScroll");
+  const dx = scroll_amount;
+  const bigEnough = (el2) => el2.clientWidth >= window.innerWidth * 0.5;
+  const canScroll = (el2) => el2 && /(auto|scroll|overlay)/.test(getComputedStyle(el2).overflowX) && el2.scrollWidth > el2.clientWidth && bigEnough(el2);
   let el = document.activeElement;
   while (el && !canScroll(el) && el !== document.body) el = el.parentElement;
   el = canScroll(el) ? el : Array.from(document.querySelectorAll("*")).find(canScroll) || document.scrollingElement || document.documentElement;
@@ -358,6 +339,8 @@ async function scrollHorizontally(right, scroll_amount, element) {
     if (reachedLeft) return `✅ Scrolled page by ${scrolled}px. Reached the left edge of the page.`;
     return `✅ Scrolled page horizontally by ${scrolled}px.`;
   } else {
+    const warningMsg = `The document is not scrollable. Falling back to container scroll.`;
+    console.log(`[PageController] ${warningMsg}`);
     const scrollBefore = el.scrollLeft;
     const scrollMax = el.scrollWidth - el.clientWidth;
     el.scrollBy({ left: dx, behavior: "smooth" });
@@ -365,19 +348,18 @@ async function scrollHorizontally(right, scroll_amount, element) {
     const scrollAfter = el.scrollLeft;
     const scrolled = scrollAfter - scrollBefore;
     if (Math.abs(scrolled) < 1) {
-      return dx > 0 ? `⚠️ Already at the right edge of container (${el.tagName}), cannot scroll right further.` : `⚠️ Already at the left edge of container (${el.tagName}), cannot scroll left further.`;
+      return dx > 0 ? `⚠️ ${warningMsg} Already at the right edge of container (${el.tagName}), cannot scroll right further.` : `⚠️ ${warningMsg} Already at the left edge of container (${el.tagName}), cannot scroll left further.`;
     }
     const reachedRight = dx > 0 && scrollAfter >= scrollMax - 1;
     const reachedLeft = dx < 0 && scrollAfter <= 1;
     if (reachedRight)
-      return `✅ Scrolled container (${el.tagName}) by ${scrolled}px. Reached the right edge.`;
+      return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px. Reached the right edge.`;
     if (reachedLeft)
-      return `✅ Scrolled container (${el.tagName}) by ${scrolled}px. Reached the left edge.`;
-    return `✅ Scrolled container (${el.tagName}) horizontally by ${scrolled}px.`;
+      return `✅ ${warningMsg} Scrolled container (${el.tagName}) by ${scrolled}px. Reached the left edge.`;
+    return `✅ ${warningMsg} Scrolled container (${el.tagName}) horizontally by ${scrolled}px.`;
   }
 }
-__name(scrollHorizontally, "scrollHorizontally");
-const domTree = /* @__PURE__ */ __name((args = {
+const domTree = (args = {
   doHighlightElements: true,
   focusHighlightIndex: -1,
   viewportExpansion: 0,
@@ -400,16 +382,15 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) return;
     extraData.set(element, { ...extraData.get(element), ...data });
   }
-  __name(addExtraData, "addExtraData");
   const DOM_CACHE = {
     boundingRects: /* @__PURE__ */ new WeakMap(),
     clientRects: /* @__PURE__ */ new WeakMap(),
     computedStyles: /* @__PURE__ */ new WeakMap(),
-    clearCache: /* @__PURE__ */ __name(() => {
+    clearCache: () => {
       DOM_CACHE.boundingRects = /* @__PURE__ */ new WeakMap();
       DOM_CACHE.clientRects = /* @__PURE__ */ new WeakMap();
       DOM_CACHE.computedStyles = /* @__PURE__ */ new WeakMap();
-    }, "clearCache")
+    }
   };
   function getCachedBoundingRect(element) {
     if (!element) return null;
@@ -422,7 +403,6 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return rect;
   }
-  __name(getCachedBoundingRect, "getCachedBoundingRect");
   function getCachedComputedStyle(element) {
     if (!element) return null;
     if (DOM_CACHE.computedStyles.has(element)) {
@@ -434,7 +414,6 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return style;
   }
-  __name(getCachedComputedStyle, "getCachedComputedStyle");
   function getCachedClientRects(element) {
     if (!element) return null;
     if (DOM_CACHE.clientRects.has(element)) {
@@ -446,7 +425,6 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return rects;
   }
-  __name(getCachedClientRects, "getCachedClientRects");
   const DOM_HASH_MAP = {};
   const ID = { current: 0 };
   const HIGHLIGHT_CONTAINER_ID = "playwright-highlight-container";
@@ -542,7 +520,7 @@ const domTree = /* @__PURE__ */ __name((args = {
       label.style.top = `${labelTop}px`;
       label.style.left = `${labelLeft}px`;
       fragment.appendChild(label);
-      const updatePositions = /* @__PURE__ */ __name(() => {
+      const updatePositions = () => {
         const newRects = element.getClientRects();
         let newIframeOffset = { x: 0, y: 0 };
         if (parentIframe) {
@@ -588,8 +566,8 @@ const domTree = /* @__PURE__ */ __name((args = {
         } else if (label) {
           label.style.display = "none";
         }
-      }, "updatePositions");
-      const throttleFunction = /* @__PURE__ */ __name((func, delay) => {
+      };
+      const throttleFunction = (func, delay) => {
         let lastCall = 0;
         return (...args2) => {
           const now = performance.now();
@@ -597,16 +575,16 @@ const domTree = /* @__PURE__ */ __name((args = {
           lastCall = now;
           return func(...args2);
         };
-      }, "throttleFunction");
+      };
       const throttledUpdatePositions = throttleFunction(updatePositions, 16);
       window.addEventListener("scroll", throttledUpdatePositions, true);
       window.addEventListener("resize", throttledUpdatePositions);
-      cleanupFn = /* @__PURE__ */ __name(() => {
+      cleanupFn = () => {
         window.removeEventListener("scroll", throttledUpdatePositions, true);
         window.removeEventListener("resize", throttledUpdatePositions);
         overlays.forEach((overlay) => overlay.element.remove());
         if (label) label.remove();
-      }, "cleanupFn");
+      };
       container.appendChild(fragment);
       return index + 1;
     } finally {
@@ -617,7 +595,6 @@ const domTree = /* @__PURE__ */ __name((args = {
       }
     }
   }
-  __name(highlightElement, "highlightElement");
   function isScrollableElement(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
       return null;
@@ -630,9 +607,10 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     const overflowX = style.overflowX;
     const overflowY = style.overflowY;
+    const hasScrollbarSignal = style.scrollbarWidth && style.scrollbarWidth !== "auto" || style.scrollbarGutter && style.scrollbarGutter !== "auto";
     const scrollableX = overflowX === "auto" || overflowX === "scroll";
     const scrollableY = overflowY === "auto" || overflowY === "scroll";
-    if (!scrollableX && !scrollableY) {
+    if (!scrollableX && !scrollableY && !hasScrollbarSignal) {
       return null;
     }
     const scrollWidth = element.scrollWidth - element.clientWidth;
@@ -641,10 +619,10 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (scrollWidth < threshold && scrollHeight < threshold) {
       return null;
     }
-    if (!scrollableY && scrollWidth < threshold) {
+    if (!scrollableY && !hasScrollbarSignal && scrollWidth < threshold) {
       return null;
     }
-    if (!scrollableX && scrollHeight < threshold) {
+    if (!scrollableX && !hasScrollbarSignal && scrollHeight < threshold) {
       return null;
     }
     const distanceToTop = element.scrollTop;
@@ -661,9 +639,9 @@ const domTree = /* @__PURE__ */ __name((args = {
       scrollable: true,
       scrollData
     });
+    console.log("scrollData!!!", scrollData);
     return scrollData;
   }
-  __name(isScrollableElement, "isScrollableElement");
   function isTextNodeVisible(textNode) {
     try {
       if (viewportExpansion === -1) {
@@ -715,7 +693,6 @@ const domTree = /* @__PURE__ */ __name((args = {
       return false;
     }
   }
-  __name(isTextNodeVisible, "isTextNodeVisible");
   function isElementAccepted(element) {
     if (!element || !element.tagName) return false;
     const alwaysAccept = /* @__PURE__ */ new Set([
@@ -741,12 +718,10 @@ const domTree = /* @__PURE__ */ __name((args = {
     ]);
     return !leafElementDenyList.has(tagName);
   }
-  __name(isElementAccepted, "isElementAccepted");
   function isElementVisible(element) {
     const style = getCachedComputedStyle(element);
     return element.offsetWidth > 0 && element.offsetHeight > 0 && style?.visibility !== "hidden" && style?.display !== "none";
   }
-  __name(isElementVisible, "isElementVisible");
   function isInteractiveElement(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
       return false;
@@ -842,7 +817,6 @@ const domTree = /* @__PURE__ */ __name((args = {
       if (style?.cursor && interactiveCursors.has(style.cursor)) return true;
       return false;
     }
-    __name(doesElementHaveInteractivePointer, "doesElementHaveInteractivePointer");
     let isInteractiveCursor = doesElementHaveInteractivePointer(element);
     if (isInteractiveCursor) {
       return true;
@@ -1002,7 +976,6 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return false;
   }
-  __name(isInteractiveElement, "isInteractiveElement");
   function isTopElement(element) {
     if (viewportExpansion === -1) {
       return true;
@@ -1073,7 +1046,6 @@ const domTree = /* @__PURE__ */ __name((args = {
       }
     });
   }
-  __name(isTopElement, "isTopElement");
   function isInExpandedViewport(element, viewportExpansion2) {
     if (viewportExpansion2 === -1) {
       return true;
@@ -1094,7 +1066,27 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return false;
   }
-  __name(isInExpandedViewport, "isInExpandedViewport");
+  const INTERACTIVE_ARIA_ATTRS = [
+    "aria-expanded",
+    "aria-checked",
+    "aria-selected",
+    "aria-pressed",
+    "aria-haspopup",
+    "aria-controls",
+    "aria-owns",
+    "aria-activedescendant",
+    "aria-valuenow",
+    "aria-valuetext",
+    "aria-valuemax",
+    "aria-valuemin",
+    "aria-autocomplete"
+  ];
+  function hasInteractiveAria(el) {
+    for (let i = 0; i < INTERACTIVE_ARIA_ATTRS.length; i++) {
+      if (el.hasAttribute(INTERACTIVE_ARIA_ATTRS[i])) return true;
+    }
+    return false;
+  }
   function isInteractiveCandidate(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) return false;
     const tagName = element.tagName.toLowerCase();
@@ -1109,10 +1101,9 @@ const domTree = /* @__PURE__ */ __name((args = {
       "label"
     ]);
     if (interactiveElements.has(tagName)) return true;
-    const hasQuickInteractiveAttr = element.hasAttribute("onclick") || element.hasAttribute("role") || element.hasAttribute("tabindex") || element.hasAttribute("aria-") || element.hasAttribute("data-action") || element.getAttribute("contenteditable") === "true";
+    const hasQuickInteractiveAttr = element.hasAttribute("onclick") || element.hasAttribute("role") || element.hasAttribute("tabindex") || hasInteractiveAria(element) || element.hasAttribute("data-action") || element.getAttribute("contenteditable") === "true";
     return hasQuickInteractiveAttr;
   }
-  __name(isInteractiveCandidate, "isInteractiveCandidate");
   const DISTINCT_INTERACTIVE_TAGS = /* @__PURE__ */ new Set([
     "a",
     "button",
@@ -1122,9 +1113,10 @@ const domTree = /* @__PURE__ */ __name((args = {
     "summary",
     "details",
     "label",
-    "option"
+    "option",
+    "li"
   ]);
-  const INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
+  const DISTINCT_INTERACTIVE_ROLES = /* @__PURE__ */ new Set([
     "button",
     "link",
     "menuitem",
@@ -1140,6 +1132,9 @@ const domTree = /* @__PURE__ */ __name((args = {
     "searchbox",
     "textbox",
     "listbox",
+    "listitem",
+    "treeitem",
+    "row",
     "option",
     "scrollbar"
   ]);
@@ -1157,7 +1152,6 @@ const domTree = /* @__PURE__ */ __name((args = {
     const isParentBody = element.parentElement && element.parentElement.isSameNode(document.body);
     return (isInteractiveElement(element) || hasInteractiveAttributes || hasInteractiveClass) && hasVisibleChildren && isInKnownContainer && !isParentBody;
   }
-  __name(isHeuristicallyInteractive, "isHeuristicallyInteractive");
   function isElementDistinctInteraction(element) {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
       return false;
@@ -1170,7 +1164,7 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (DISTINCT_INTERACTIVE_TAGS.has(tagName)) {
       return true;
     }
-    if (role && INTERACTIVE_ROLES.has(role)) {
+    if (role && DISTINCT_INTERACTIVE_ROLES.has(role)) {
       return true;
     }
     if (element.isContentEditable || element.getAttribute("contenteditable") === "true") {
@@ -1182,6 +1176,9 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (element.hasAttribute("onclick") || typeof element.onclick === "function") {
       return true;
     }
+    if (hasInteractiveAria(element)) {
+      return true;
+    }
     try {
       const getEventListenersForNode = element?.ownerDocument?.defaultView?.getEventListenersForNode || window.getEventListenersForNode;
       if (typeof getEventListenersForNode === "function") {
@@ -1225,9 +1222,11 @@ const domTree = /* @__PURE__ */ __name((args = {
     if (isHeuristicallyInteractive(element)) {
       return true;
     }
+    if (extraData.get(element)?.scrollable) {
+      return true;
+    }
     return false;
   }
-  __name(isElementDistinctInteraction, "isElementDistinctInteraction");
   function handleHighlighting(nodeData, node, parentIframe, isParentHighlighted) {
     if (!nodeData.isInteractive) return false;
     let shouldHighlight = false;
@@ -1258,7 +1257,6 @@ const domTree = /* @__PURE__ */ __name((args = {
     }
     return false;
   }
-  __name(handleHighlighting, "handleHighlighting");
   function buildDomTree(node, parentIframe = null, isParentHighlighted = false) {
     if (!node || node.id === HIGHLIGHT_CONTAINER_ID || node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.TEXT_NODE) {
       return null;
@@ -1405,16 +1403,25 @@ const domTree = /* @__PURE__ */ __name((args = {
     DOM_HASH_MAP[id] = nodeData;
     return id;
   }
-  __name(buildDomTree, "buildDomTree");
   const rootId = buildDomTree(document.body);
   DOM_CACHE.clearCache();
   return { rootId, map: DOM_HASH_MAP };
-}, "domTree");
+};
 const DEFAULT_VIEWPORT_EXPANSION = -1;
 function resolveViewportExpansion(viewportExpansion) {
   return viewportExpansion ?? DEFAULT_VIEWPORT_EXPANSION;
 }
-__name(resolveViewportExpansion, "resolveViewportExpansion");
+const SEMANTIC_TAGS = /* @__PURE__ */ new Set([
+  "nav",
+  "menu",
+  // 'main',
+  "header",
+  "footer",
+  "aside",
+  // 'article',
+  // 'form',
+  "dialog"
+]);
 const newElementsCache = /* @__PURE__ */ new WeakMap();
 function getFlatTree(config) {
   const viewportExpansion = resolveViewportExpansion(config.viewportExpansion);
@@ -1457,7 +1464,6 @@ function getFlatTree(config) {
   }
   return elements;
 }
-__name(getFlatTree, "getFlatTree");
 const globRegexCache = /* @__PURE__ */ new Map();
 function globToRegex(pattern) {
   let regex = globRegexCache.get(pattern);
@@ -1468,7 +1474,6 @@ function globToRegex(pattern) {
   }
   return regex;
 }
-__name(globToRegex, "globToRegex");
 function matchAttributes(attrs, patterns) {
   const result2 = {};
   for (const pattern of patterns) {
@@ -1488,8 +1493,7 @@ function matchAttributes(attrs, patterns) {
   }
   return result2;
 }
-__name(matchAttributes, "matchAttributes");
-function flatTreeToString(flatTree, includeAttributes) {
+function flatTreeToString(flatTree, includeAttributes = [], keepSemanticTags = false) {
   const DEFAULT_INCLUDE_ATTRIBUTES = [
     "title",
     "type",
@@ -1516,14 +1520,14 @@ function flatTreeToString(flatTree, includeAttributes) {
     // content editable
     "contenteditable"
   ];
-  const includeAttrs = [...includeAttributes || [], ...DEFAULT_INCLUDE_ATTRIBUTES];
-  const capTextLength = /* @__PURE__ */ __name((text, maxLength) => {
+  const includeAttrs = [...includeAttributes, ...DEFAULT_INCLUDE_ATTRIBUTES];
+  const capTextLength = (text, maxLength) => {
     if (text.length > maxLength) {
       return text.substring(0, maxLength) + "...";
     }
     return text;
-  }, "capTextLength");
-  const buildTreeNode = /* @__PURE__ */ __name((nodeId) => {
+  };
+  const buildTreeNode = (nodeId) => {
     const node = flatTree.map[nodeId];
     if (!node) return null;
     if (node.type === "TEXT_NODE") {
@@ -1561,17 +1565,17 @@ function flatTreeToString(flatTree, includeAttributes) {
         extra: elementNode.extra ?? {}
       };
     }
-  }, "buildTreeNode");
-  const setParentReferences = /* @__PURE__ */ __name((node, parent = null) => {
+  };
+  const setParentReferences = (node, parent = null) => {
     node.parent = parent;
     for (const child of node.children) {
       setParentReferences(child, node);
     }
-  }, "setParentReferences");
+  };
   const rootNode = buildTreeNode(flatTree.rootId);
   if (!rootNode) return "";
   setParentReferences(rootNode);
-  const hasParentWithHighlightIndex = /* @__PURE__ */ __name((node) => {
+  const hasParentWithHighlightIndex = (node) => {
     let current = node.parent;
     while (current) {
       if (current.type === "element" && current.highlightIndex !== void 0) {
@@ -1580,11 +1584,12 @@ function flatTreeToString(flatTree, includeAttributes) {
       current = current.parent;
     }
     return false;
-  }, "hasParentWithHighlightIndex");
-  const processNode = /* @__PURE__ */ __name((node, depth, result22) => {
+  };
+  const processNode = (node, depth, result22) => {
     let nextDepth = depth;
     const depthStr = "	".repeat(depth);
     if (node.type === "element") {
+      const isSemantic = keepSemanticTags && node.tagName && SEMANTIC_TAGS.has(node.tagName);
       if (node.highlightIndex !== void 0) {
         nextDepth += 1;
         const text = getAllTextTillNextClickableElement(node);
@@ -1652,9 +1657,22 @@ function flatTreeToString(flatTree, includeAttributes) {
         line += " />";
         result22.push(line);
       }
+      const emitSemantic = isSemantic && node.highlightIndex === void 0;
+      const mark = emitSemantic ? result22.length : -1;
+      if (emitSemantic) {
+        result22.push(`${depthStr}<${node.tagName}>`);
+        nextDepth += 1;
+      }
       for (const child of node.children) {
         processNode(child, nextDepth, result22);
       }
+      if (emitSemantic) {
+        if (result22.length === mark + 1) {
+          result22.pop();
+        } else {
+          result22.push(`${depthStr}</${node.tagName}>`);
+        }
+      }
     } else if (node.type === "text") {
       if (hasParentWithHighlightIndex(node)) {
         return;
@@ -1663,15 +1681,14 @@ function flatTreeToString(flatTree, includeAttributes) {
         result22.push(`${depthStr}${node.text ?? ""}`);
       }
     }
-  }, "processNode");
+  };
   const result2 = [];
   processNode(rootNode, 0, result2);
   return result2.join("\n");
 }
-__name(flatTreeToString, "flatTreeToString");
-const getAllTextTillNextClickableElement = /* @__PURE__ */ __name((node, maxDepth = -1) => {
+const getAllTextTillNextClickableElement = (node, maxDepth = -1) => {
   const textParts = [];
-  const collectText = /* @__PURE__ */ __name((currentNode, currentDepth) => {
+  const collectText = (currentNode, currentDepth) => {
     if (maxDepth !== -1 && currentDepth > maxDepth) {
       return;
     }
@@ -1685,10 +1702,10 @@ const getAllTextTillNextClickableElement = /* @__PURE__ */ __name((node, maxDept
         collectText(child, currentDepth + 1);
       }
     }
-  }, "collectText");
+  };
   collectText(node, 0);
   return textParts.join("\n").trim();
-}, "getAllTextTillNextClickableElement");
+};
 function getSelectorMap(flatTree) {
   const selectorMap = /* @__PURE__ */ new Map();
   const keys = Object.keys(flatTree.map);
@@ -1700,7 +1717,6 @@ function getSelectorMap(flatTree) {
   }
   return selectorMap;
 }
-__name(getSelectorMap, "getSelectorMap");
 function getElementTextMap(simplifiedHTML) {
   const lines = simplifiedHTML.split("\n").map((line) => line.trim()).filter((line) => line.length > 0);
   const elementTextMap = /* @__PURE__ */ new Map();
@@ -1714,7 +1730,6 @@ function getElementTextMap(simplifiedHTML) {
   }
   return elementTextMap;
 }
-__name(getElementTextMap, "getElementTextMap");
 function cleanUpHighlights() {
   const cleanupFunctions = window._highlightCleanupFunctions || [];
   for (const cleanup of cleanupFunctions) {
@@ -1724,7 +1739,6 @@ function cleanUpHighlights() {
   }
   window._highlightCleanupFunctions = [];
 }
-__name(cleanUpHighlights, "cleanUpHighlights");
 window.addEventListener("popstate", () => {
   cleanUpHighlights();
 });
@@ -1780,7 +1794,6 @@ function getPageInfo() {
     pixels_right
   };
 }
-__name(getPageInfo, "getPageInfo");
 function patchReact(pageController) {
   const reactRootElements = document.querySelectorAll(
     '[data-reactroot], [data-reactid], [data-react-checksum], #root, #app, [id^="root-"], [id^="app-"], #adex-wrapper, #adex-root'
@@ -1789,8 +1802,7 @@ function patchReact(pageController) {
     element.setAttribute("data-page-agent-not-interactive", "true");
   }
 }
-__name(patchReact, "patchReact");
-const _PageController = class _PageController extends EventTarget {
+class PageController extends EventTarget {
   config;
   /** Corresponds to eval_page in browser-use */
   flatTree = null;
@@ -1825,7 +1837,7 @@ const _PageController = class _PageController extends EventTarget {
   initMask() {
     if (this.maskReady !== null) return;
     this.maskReady = (async () => {
-      const { SimulatorMask } = await import("./SimulatorMask-CU7szDjy.js");
+      const { SimulatorMask } = await import("./SimulatorMask-BfJiQVCo.js");
       this.mask = new SimulatorMask();
     })();
   }
@@ -1883,13 +1895,17 @@ ${scrollHintAbove}`;
     cleanUpHighlights();
     const blacklist = [
       ...this.config.interactiveBlacklist || [],
-      ...document.querySelectorAll("[data-page-agent-not-interactive]").values()
+      ...Array.from(document.querySelectorAll("[data-page-agent-not-interactive]"))
     ];
     this.flatTree = getFlatTree({
       ...this.config,
       interactiveBlacklist: blacklist
     });
-    this.simplifiedHTML = flatTreeToString(this.flatTree, this.config.includeAttributes);
+    this.simplifiedHTML = flatTreeToString(
+      this.flatTree,
+      this.config.includeAttributes,
+      this.config.keepSemanticTags
+    );
     this.selectorMap.clear();
     this.selectorMap = getSelectorMap(this.flatTree);
     this.elementTextMap.clear();
@@ -1991,9 +2007,9 @@ ${scrollHintAbove}`;
     try {
       const { down, numPages, pixels, index } = options;
       this.assertIndexed();
-      const scrollAmount = pixels ?? numPages * (down ? 1 : -1) * window.innerHeight;
+      const scrollAmount = (pixels ?? numPages * window.innerHeight) * (down ? 1 : -1);
       const element = index !== void 0 ? getElementByIndex(this.selectorMap, index) : null;
-      const message = await scrollVertically(down, scrollAmount, element);
+      const message = await scrollVertically(scrollAmount, element);
       return {
         success: true,
         message
@@ -2014,7 +2030,7 @@ ${scrollHintAbove}`;
       this.assertIndexed();
       const scrollAmount = pixels * (right ? 1 : -1);
       const element = index !== void 0 ? getElementByIndex(this.selectorMap, index) : null;
-      const message = await scrollHorizontally(right, scrollAmount, element);
+      const message = await scrollHorizontally(scrollAmount, element);
       return {
         success: true,
         message
@@ -2074,9 +2090,7 @@ ${scrollHintAbove}`;
     this.mask?.dispose();
     this.mask = null;
   }
-};
-__name(_PageController, "PageController");
-let PageController = _PageController;
+}
 export {
   PageController,
   clickElement,