@probolabs/playwright 0.4.18 → 0.4.20

package/dist/index.js

@@ -1,4 +1,4 @@
-const highlighterCode = "(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n  typeof define === 'function' && define.amd ? define(['exports'], factory) :\n  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ProboLabs = {}));\n})(this, (function (exports) { 'use strict';\n\n  const ElementTag = {\r\n    CLICKABLE: \"CLICKABLE\", // button, link, toggle switch, checkbox, radio, dropdowns, clickable divs\r\n    FILLABLE: \"FILLABLE\", // input, textarea content_editable, date picker??\r\n    SELECTABLE: \"SELECTABLE\", // select\r\n    NON_INTERACTIVE_ELEMENT: 'NON_INTERACTIVE_ELEMENT',\r\n  };\r\n\r\n  class ElementInfo {\r\n    constructor(element, index, {tag, type, text, html, xpath, css_selector, bounding_box, iframe_selector, short_css_selector, short_iframe_selector}) {\r\n      this.index = index.toString();\r\n      this.tag = tag;\r\n      this.type = type;\r\n      this.text = text;\r\n      this.html = html;\r\n      this.xpath = xpath;\r\n      this.css_selector = css_selector;\r\n      this.bounding_box = bounding_box;\r\n      this.iframe_selector = iframe_selector;\r\n      this.element = element;\r\n      this.depth = -1;\r\n      this.short_css_selector = short_css_selector;\r\n      this.short_iframe_selector = short_iframe_selector;\r\n    }\r\n\r\n    getSelector() {\r\n      return this.xpath ? this.xpath : this.css_selector;\r\n    }\r\n\r\n    getDepth() {\r\n      if (this.depth >= 0) {\r\n        return this.depth;\r\n      }\r\n      \r\n      this.depth = 0;\r\n      let currentElement = this.element;\r\n      \r\n      while (currentElement.nodeType === Node.ELEMENT_NODE) {          \r\n        this.depth++;\r\n        if (currentElement.assignedSlot) {\r\n          currentElement = currentElement.assignedSlot;\r\n        }\r\n        else {\r\n          currentElement = currentElement.parentNode;\r\n          // Check if we're at a shadow root\r\n          if (currentElement && currentElement.nodeType !== Node.ELEMENT_NODE && currentElement.getRootNode() instanceof ShadowRoot) {\r\n            // Get the shadow root's host element\r\n            currentElement = currentElement.getRootNode().host;     \r\n          }\r\n        }\r\n      }\r\n          \r\n      return this.depth;\r\n    }\r\n  }\n\n  // License: MIT\n  // Author: Anton Medvedev <anton@medv.io>\n  // Source: https://github.com/antonmedv/finder\n  const acceptedAttrNames = new Set(['role', 'name', 'aria-label', 'rel', 'href']);\n  /** Check if attribute name and value are word-like. */\n  function attr(name, value) {\n      let nameIsOk = acceptedAttrNames.has(name);\n      nameIsOk ||= name.startsWith('data-') && wordLike(name);\n      let valueIsOk = wordLike(value) && value.length < 100;\n      valueIsOk ||= value.startsWith('#') && wordLike(value.slice(1));\n      return nameIsOk && valueIsOk;\n  }\n  /** Check if id name is word-like. */\n  function idName(name) {\n      return wordLike(name);\n  }\n  /** Check if class name is word-like. */\n  function className(name) {\n      return wordLike(name);\n  }\n  /** Check if tag name is word-like. */\n  function tagName(name) {\n      return true;\n  }\n  /** Finds unique CSS selectors for the given element. */\n  function finder(input, options) {\n      if (input.nodeType !== Node.ELEMENT_NODE) {\n          throw new Error(`Can't generate CSS selector for non-element node type.`);\n      }\n      if (input.tagName.toLowerCase() === 'html') {\n          return 'html';\n      }\n      const defaults = {\n          root: document.body,\n          idName: idName,\n          className: className,\n          tagName: tagName,\n          attr: attr,\n          timeoutMs: 1000,\n          seedMinLength: 3,\n          optimizedMinLength: 2,\n          maxNumberOfPathChecks: Infinity,\n      };\n      const startTime = new Date();\n      const config = { ...defaults, ...options };\n      const rootDocument = findRootDocument(config.root, defaults);\n      let foundPath;\n      let count = 0;\n      for (const candidate of search(input, config, rootDocument)) {\n          const elapsedTimeMs = new Date().getTime() - startTime.getTime();\n          if (elapsedTimeMs > config.timeoutMs ||\n              count >= config.maxNumberOfPathChecks) {\n              const fPath = fallback(input, rootDocument);\n              if (!fPath) {\n                  throw new Error(`Timeout: Can't find a unique selector after ${config.timeoutMs}ms`);\n              }\n              return selector(fPath);\n          }\n          count++;\n          if (unique(candidate, rootDocument)) {\n              foundPath = candidate;\n              break;\n          }\n      }\n      if (!foundPath) {\n          throw new Error(`Selector was not found.`);\n      }\n      const optimized = [\n          ...optimize(foundPath, input, config, rootDocument, startTime),\n      ];\n      optimized.sort(byPenalty);\n      if (optimized.length > 0) {\n          return selector(optimized[0]);\n      }\n      return selector(foundPath);\n  }\n  function* search(input, config, rootDocument) {\n      const stack = [];\n      let paths = [];\n      let current = input;\n      let i = 0;\n      while (current && current !== rootDocument) {\n          const level = tie(current, config);\n          for (const node of level) {\n              node.level = i;\n          }\n          stack.push(level);\n          current = current.parentElement;\n          i++;\n          paths.push(...combinations(stack));\n          if (i >= config.seedMinLength) {\n              paths.sort(byPenalty);\n              for (const candidate of paths) {\n                  yield candidate;\n              }\n              paths = [];\n          }\n      }\n      paths.sort(byPenalty);\n      for (const candidate of paths) {\n          yield candidate;\n      }\n  }\n  function wordLike(name) {\n      if (/^[a-z\\-]{3,}$/i.test(name)) {\n          const words = name.split(/-|[A-Z]/);\n          for (const word of words) {\n              if (word.length <= 2) {\n                  return false;\n              }\n              if (/[^aeiou]{4,}/i.test(word)) {\n                  return false;\n              }\n          }\n          return true;\n      }\n      return false;\n  }\n  function tie(element, config) {\n      const level = [];\n      const elementId = element.getAttribute('id');\n      if (elementId && config.idName(elementId)) {\n          level.push({\n              name: '#' + CSS.escape(elementId),\n              penalty: 0,\n          });\n      }\n      for (let i = 0; i < element.classList.length; i++) {\n          const name = element.classList[i];\n          if (config.className(name)) {\n              level.push({\n                  name: '.' + CSS.escape(name),\n                  penalty: 1,\n              });\n          }\n      }\n      for (let i = 0; i < element.attributes.length; i++) {\n          const attr = element.attributes[i];\n          if (config.attr(attr.name, attr.value)) {\n              level.push({\n                  name: `[${CSS.escape(attr.name)}=\"${CSS.escape(attr.value)}\"]`,\n                  penalty: 2,\n              });\n          }\n      }\n      const tagName = element.tagName.toLowerCase();\n      if (config.tagName(tagName)) {\n          level.push({\n              name: tagName,\n              penalty: 5,\n          });\n          const index = indexOf(element, tagName);\n          if (index !== undefined) {\n              level.push({\n                  name: nthOfType(tagName, index),\n                  penalty: 10,\n              });\n          }\n      }\n      const nth = indexOf(element);\n      if (nth !== undefined) {\n          level.push({\n              name: nthChild(tagName, nth),\n              penalty: 50,\n          });\n      }\n      return level;\n  }\n  function selector(path) {\n      let node = path[0];\n      let query = node.name;\n      for (let i = 1; i < path.length; i++) {\n          const level = path[i].level || 0;\n          if (node.level === level - 1) {\n              query = `${path[i].name} > ${query}`;\n          }\n          else {\n              query = `${path[i].name} ${query}`;\n          }\n          node = path[i];\n      }\n      return query;\n  }\n  function penalty(path) {\n      return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);\n  }\n  function byPenalty(a, b) {\n      return penalty(a) - penalty(b);\n  }\n  function indexOf(input, tagName) {\n      const parent = input.parentNode;\n      if (!parent) {\n          return undefined;\n      }\n      let child = parent.firstChild;\n      if (!child) {\n          return undefined;\n      }\n      let i = 0;\n      while (child) {\n          if (child.nodeType === Node.ELEMENT_NODE &&\n              (tagName === undefined ||\n                  child.tagName.toLowerCase() === tagName)) {\n              i++;\n          }\n          if (child === input) {\n              break;\n          }\n          child = child.nextSibling;\n      }\n      return i;\n  }\n  function fallback(input, rootDocument) {\n      let i = 0;\n      let current = input;\n      const path = [];\n      while (current && current !== rootDocument) {\n          const tagName = current.tagName.toLowerCase();\n          const index = indexOf(current, tagName);\n          if (index === undefined) {\n              return;\n          }\n          path.push({\n              name: nthOfType(tagName, index),\n              penalty: NaN,\n              level: i,\n          });\n          current = current.parentElement;\n          i++;\n      }\n      if (unique(path, rootDocument)) {\n          return path;\n      }\n  }\n  function nthChild(tagName, index) {\n      if (tagName === 'html') {\n          return 'html';\n      }\n      return `${tagName}:nth-child(${index})`;\n  }\n  function nthOfType(tagName, index) {\n      if (tagName === 'html') {\n          return 'html';\n      }\n      return `${tagName}:nth-of-type(${index})`;\n  }\n  function* combinations(stack, path = []) {\n      if (stack.length > 0) {\n          for (let node of stack[0]) {\n              yield* combinations(stack.slice(1, stack.length), path.concat(node));\n          }\n      }\n      else {\n          yield path;\n      }\n  }\n  function findRootDocument(rootNode, defaults) {\n      if (rootNode.nodeType === Node.DOCUMENT_NODE) {\n          return rootNode;\n      }\n      if (rootNode === defaults.root) {\n          return rootNode.ownerDocument;\n      }\n      return rootNode;\n  }\n  function unique(path, rootDocument) {\n      const css = selector(path);\n      switch (rootDocument.querySelectorAll(css).length) {\n          case 0:\n              throw new Error(`Can't select any node with this selector: ${css}`);\n          case 1:\n              return true;\n          default:\n              return false;\n      }\n  }\n  function* optimize(path, input, config, rootDocument, startTime) {\n      if (path.length > 2 && path.length > config.optimizedMinLength) {\n          for (let i = 1; i < path.length - 1; i++) {\n              const elapsedTimeMs = new Date().getTime() - startTime.getTime();\n              if (elapsedTimeMs > config.timeoutMs) {\n                  return;\n              }\n              const newPath = [...path];\n              newPath.splice(i, 1);\n              if (unique(newPath, rootDocument) &&\n                  rootDocument.querySelector(selector(newPath)) === input) {\n                  yield newPath;\n                  yield* optimize(newPath, input, config, rootDocument, startTime);\n              }\n          }\n      }\n  }\n\n  // import { realpath } from \"fs\";\r\n\r\n  function getAllDocumentElementsIncludingShadow(selectors, root = document) {\r\n    const elements = Array.from(root.querySelectorAll(selectors));\r\n\r\n    root.querySelectorAll('*').forEach(el => {\r\n        if (el.shadowRoot) {\r\n            elements.push(...getAllDocumentElementsIncludingShadow(selectors, el.shadowRoot));\r\n        }\r\n    });\r\n    return elements;\r\n  }\r\n\r\n  function getAllFrames(root = document) {\r\n    const result = [root];\r\n    const frames = getAllDocumentElementsIncludingShadow('frame, iframe', root);  \r\n    frames.forEach(frame => {\r\n        try {\r\n            const frameDocument = frame.contentDocument || frame.contentWindow.document;\r\n            if (frameDocument) {\r\n                result.push(frameDocument);\r\n            }\r\n        } catch (e) {\r\n            // Skip cross-origin frames\r\n            console.warn('Could not access frame content:', e.message);\r\n        }\r\n    });\r\n\r\n    return result;\r\n  }\r\n\r\n  function getAllElementsIncludingShadow(selectors, root = document) {\r\n    const elements = [];\r\n\r\n    getAllFrames(root).forEach(doc => {\r\n      elements.push(...getAllDocumentElementsIncludingShadow(selectors, doc));\r\n    });\r\n\r\n    return elements;\r\n  }\r\n\r\n  /**\r\n   * Deeply searches through DOM trees including Shadow DOM and frames/iframes\r\n   * @param {string} selector - CSS selector to search for\r\n   * @param {Document|Element} [root=document] - Starting point for the search\r\n   * @param {Object} [options] - Search options\r\n   * @param {boolean} [options.searchShadow=true] - Whether to search Shadow DOM\r\n   * @param {boolean} [options.searchFrames=true] - Whether to search frames/iframes\r\n   * @returns {Element[]} Array of found elements\r\n   \r\n  function getAllElementsIncludingShadow(selector, root = document, options = {}) {\r\n    const {\r\n        searchShadow = true,\r\n        searchFrames = true\r\n    } = options;\r\n\r\n    const results = new Set();\r\n    \r\n    // Helper to check if an element is valid and not yet found\r\n    const addIfValid = (element) => {\r\n        if (element && !results.has(element)) {\r\n            results.add(element);\r\n        }\r\n    };\r\n\r\n    // Helper to process a single document or element\r\n    function processNode(node) {\r\n        // Search regular DOM\r\n        node.querySelectorAll(selector).forEach(addIfValid);\r\n\r\n        if (searchShadow) {\r\n            // Search all shadow roots\r\n            const treeWalker = document.createTreeWalker(\r\n                node,\r\n                NodeFilter.SHOW_ELEMENT,\r\n                {\r\n                    acceptNode: (element) => {\r\n                        return element.shadowRoot ? \r\n                            NodeFilter.FILTER_ACCEPT : \r\n                            NodeFilter.FILTER_SKIP;\r\n                    }\r\n                }\r\n            );\r\n\r\n            while (treeWalker.nextNode()) {\r\n                const element = treeWalker.currentNode;\r\n                if (element.shadowRoot) {\r\n                    // Search within shadow root\r\n                    element.shadowRoot.querySelectorAll(selector).forEach(addIfValid);\r\n                    // Recursively process the shadow root for nested shadow DOMs\r\n                    processNode(element.shadowRoot);\r\n                }\r\n            }\r\n        }\r\n\r\n        if (searchFrames) {\r\n            // Search frames and iframes\r\n            const frames = node.querySelectorAll('frame, iframe');\r\n            frames.forEach(frame => {\r\n                try {\r\n                    const frameDocument = frame.contentDocument;\r\n                    if (frameDocument) {\r\n                        processNode(frameDocument);\r\n                    }\r\n                } catch (e) {\r\n                    // Skip cross-origin frames\r\n                    console.warn('Could not access frame content:', e.message);\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    // Start processing from the root\r\n    processNode(root);\r\n\r\n    return Array.from(results);\r\n  }\r\n  */\r\n  // <div x=1 y=2 role='combobox'> </div>\r\n  function findDropdowns() {\r\n    const dropdowns = [];\r\n    \r\n    // Native select elements\r\n    dropdowns.push(...getAllElementsIncludingShadow('select'));\r\n    \r\n    // Elements with dropdown roles that don't have <input>..</input>\r\n    const roleElements = getAllElementsIncludingShadow('[role=\"combobox\"], [role=\"listbox\"], [role=\"dropdown\"], [role=\"option\"], [role=\"menu\"], [role=\"menuitem\"]').filter(el => {\r\n      return el.tagName.toLowerCase() !== 'input' || ![\"button\", \"checkbox\", \"radio\"].includes(el.getAttribute(\"type\"));\r\n    });\r\n    dropdowns.push(...roleElements);\r\n    \r\n    // Common dropdown class patterns\r\n    const dropdownPattern = /.*(dropdown|select|combobox|menu).*/i;\r\n    const elements = getAllElementsIncludingShadow('*');\r\n    const dropdownClasses = Array.from(elements).filter(el => {\r\n      const hasDropdownClass = dropdownPattern.test(el.className);\r\n      const validTag = ['li', 'ul', 'span', 'div', 'p', 'a', 'button'].includes(el.tagName.toLowerCase());\r\n      const style = window.getComputedStyle(el); \r\n      const result = hasDropdownClass && validTag && (style.cursor === 'pointer' || el.tagName.toLowerCase() === 'a' || el.tagName.toLowerCase() === 'button');\r\n      return result;\r\n    });\r\n    \r\n    dropdowns.push(...dropdownClasses);\r\n    \r\n    // Elements with aria-haspopup attribute\r\n    dropdowns.push(...getAllElementsIncludingShadow('[aria-haspopup=\"true\"], [aria-haspopup=\"listbox\"], [aria-haspopup=\"menu\"]'));\r\n\r\n    // Improve navigation element detection\r\n    // Semantic nav elements with list items\r\n    dropdowns.push(...getAllElementsIncludingShadow('nav ul li, nav ol li'));\r\n    \r\n    // Navigation elements in common design patterns\r\n    dropdowns.push(...getAllElementsIncludingShadow('header a, .header a, .nav a, .navigation a, .menu a, .sidebar a, aside a'));\r\n    \r\n    // Elements in primary navigation areas with common attributes\r\n    dropdowns.push(...getAllElementsIncludingShadow('[role=\"navigation\"] a, [aria-label*=\"navigation\"] a, [aria-label*=\"menu\"] a'));\r\n\r\n    return dropdowns;\r\n  }\r\n\r\n  function findClickables() {\r\n    const clickables = [];\r\n    \r\n    const checkboxPattern = /checkbox/i;\r\n    // Collect all clickable elements first\r\n    const nativeLinks = [...getAllElementsIncludingShadow('a')];\r\n    const nativeButtons = [...getAllElementsIncludingShadow('button')];\r\n    const inputButtons = [...getAllElementsIncludingShadow('input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"]')];\r\n    const roleButtons = [...getAllElementsIncludingShadow('[role=\"button\"]')];\r\n    // const tabbable = [...getAllElementsIncludingShadow('[tabindex=\"0\"]')];\r\n    const clickHandlers = [...getAllElementsIncludingShadow('[onclick]')];\r\n    const dropdowns = findDropdowns();\r\n    const nativeCheckboxes = [...getAllElementsIncludingShadow('input[type=\"checkbox\"]')];  \r\n    const fauxCheckboxes = getAllElementsIncludingShadow('*').filter(el => {\r\n      if (checkboxPattern.test(el.className)) {\r\n        const realCheckboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]', el);\r\n        if (realCheckboxes.length === 1) {\r\n          const boundingRect = realCheckboxes[0].getBoundingClientRect();\r\n          return boundingRect.width <= 1 && boundingRect.height <= 1      \r\n        }\r\n      }\r\n      return false;\r\n    });\r\n    const nativeRadios = [...getAllElementsIncludingShadow('input[type=\"radio\"]')];\r\n    const toggles = findToggles();\r\n    const pointerElements = findElementsWithPointer();\r\n    // Add all elements at once\r\n    clickables.push(\r\n      ...nativeLinks,\r\n      ...nativeButtons,\r\n      ...inputButtons,\r\n      ...roleButtons,\r\n      // ...tabbable,\r\n      ...clickHandlers,\r\n      ...dropdowns,\r\n      ...nativeCheckboxes,\r\n      ...fauxCheckboxes,\r\n      ...nativeRadios,\r\n      ...toggles,\r\n      ...pointerElements\r\n    );\r\n\r\n    // Only uniquify once at the end\r\n    return clickables;  // Let findElements handle the uniquification\r\n  }\r\n\r\n  function findToggles() {\r\n    const toggles = [];\r\n    const checkboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]');\r\n    const togglePattern = /switch|toggle|slider/i;\r\n\r\n    checkboxes.forEach(checkbox => {\r\n      let isToggle = false;\r\n\r\n      // Check the checkbox itself\r\n      if (togglePattern.test(checkbox.className) || togglePattern.test(checkbox.getAttribute('role') || '')) {\r\n        isToggle = true;\r\n      }\r\n\r\n      // Check parent elements (up to 3 levels)\r\n      if (!isToggle) {\r\n        let element = checkbox;\r\n        for (let i = 0; i < 3; i++) {\r\n          const parent = element.parentElement;\r\n          if (!parent) break;\r\n\r\n          const className = parent.className || '';\r\n          const role = parent.getAttribute('role') || '';\r\n\r\n          if (togglePattern.test(className) || togglePattern.test(role)) {\r\n            isToggle = true;\r\n            break;\r\n          }\r\n          element = parent;\r\n        }\r\n      }\r\n\r\n      // Check next sibling\r\n      if (!isToggle) {\r\n        const nextSibling = checkbox.nextElementSibling;\r\n        if (nextSibling) {\r\n          const className = nextSibling.className || '';\r\n          const role = nextSibling.getAttribute('role') || '';\r\n          if (togglePattern.test(className) || togglePattern.test(role)) {\r\n            isToggle = true;\r\n          }\r\n        }\r\n      }\r\n\r\n      if (isToggle) {\r\n        toggles.push(checkbox);\r\n      }\r\n    });\r\n\r\n    return toggles;\r\n  }\r\n\r\n  function findNonInteractiveElements() {\r\n    // Get all elements in the document\r\n    const all = Array.from(getAllElementsIncludingShadow('*'));\r\n    \r\n    // Filter elements based on Python implementation rules\r\n    return all.filter(element => {\r\n      if (!element.firstElementChild) {\r\n        const tag = element.tagName.toLowerCase();      \r\n        if (!['select', 'button', 'a'].includes(tag)) {\r\n          const validTags = ['p', 'span', 'div', 'input', 'textarea'].includes(tag) || /^h\\d$/.test(tag) || /text/.test(tag);\r\n          const boundingRect = element.getBoundingClientRect();\r\n          return validTags && boundingRect.height > 1 && boundingRect.width > 1;\r\n        }\r\n      }\r\n      return false;\r\n    });\r\n  }\r\n\r\n\r\n\r\n  // export function findNonInteractiveElements() {\r\n  //   const all = [];\r\n  //   try {\r\n  //     const elements = getAllElementsIncludingShadow('*');\r\n  //     all.push(...elements);\r\n  //   } catch (e) {\r\n  //     console.warn('Error getting elements:', e);\r\n  //   }\r\n    \r\n  //   console.debug('Total elements found:', all.length);\r\n    \r\n  //   return all.filter(element => {\r\n  //     try {\r\n  //       const tag = element.tagName.toLowerCase();      \r\n\r\n  //       // Special handling for input elements\r\n  //       if (tag === 'input' || tag === 'textarea') {\r\n  //         const boundingRect = element.getBoundingClientRect();\r\n  //         const value = element.value || '';\r\n  //         const placeholder = element.placeholder || '';\r\n  //         return boundingRect.height > 1 && \r\n  //                boundingRect.width > 1 && \r\n  //                (value.trim() !== '' || placeholder.trim() !== '');\r\n  //       }\r\n\r\n       \r\n  //       // Check if it's a valid tag for text content\r\n  //       const validTags = ['p', 'span', 'div', 'label', 'th', 'td', 'li', 'button', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'select'].includes(tag) || \r\n  //                        /^h\\d$/.test(tag) || \r\n  //                        /text/.test(tag);\r\n\r\n  //       const boundingRect = element.getBoundingClientRect();\r\n\r\n  //       // Get direct text content, excluding child element text\r\n  //       let directText = '';\r\n  //       for (const node of element.childNodes) {\r\n  //         // Only include text nodes (nodeType 3)\r\n  //         if (node.nodeType === 3) {\r\n  //           directText += node.textContent || '';\r\n  //         }\r\n  //       }\r\n        \r\n  //       // If no direct text and it's a table cell or heading, check label content\r\n  //       if (!directText.trim() && (tag === 'th' || tag === 'td' || tag === 'h1')) {\r\n  //         const labels = element.getElementsByTagName('label');\r\n  //         for (const label of labels) {\r\n  //           directText += label.textContent || '';\r\n  //         }\r\n  //       }\r\n\r\n  //       // If still no text and it's a heading, get all text content\r\n  //       if (!directText.trim() && tag === 'h1') {\r\n  //         directText = element.textContent || '';\r\n  //       }\r\n\r\n  //       directText = directText.trim();\r\n\r\n  //       // Debug logging\r\n  //       if (directText) {\r\n  //         console.debugg('Text element found:', {\r\n  //           tag,\r\n  //           text: directText,\r\n  //           dimensions: boundingRect,\r\n  //           element\r\n  //         });\r\n  //       }\r\n\r\n  //       return validTags && \r\n  //              boundingRect.height > 1 && \r\n  //              boundingRect.width > 1 && \r\n  //              directText !== '';\r\n               \r\n  //     } catch (e) {\r\n  //       console.warn('Error processing element:', e);\r\n  //       return false;\r\n  //     }\r\n  //   });\r\n  // }\r\n\r\n\r\n\r\n\r\n\r\n  function findElementsWithPointer() {\r\n    const elements = [];\r\n    const allElements = getAllElementsIncludingShadow('*');\r\n    \r\n    console.log('Checking elements with pointer style...');\r\n    \r\n    allElements.forEach(element => {\r\n      // Skip SVG elements for now\r\n      if (element instanceof SVGElement || element.tagName.toLowerCase() === 'svg') {\r\n        return;\r\n      }\r\n      \r\n      const style = window.getComputedStyle(element);\r\n      if (style.cursor === 'pointer') {\r\n        elements.push(element);\r\n      }\r\n    });\r\n    \r\n    console.log(`Found ${elements.length} elements with pointer cursor`);\r\n    return elements;\r\n  }\r\n\r\n  function findCheckables() {\r\n    const elements = [];\r\n\r\n    elements.push(...getAllElementsIncludingShadow('input[type=\"checkbox\"]'));\r\n    elements.push(...getAllElementsIncludingShadow('input[type=\"radio\"]'));\r\n    const all_elements = getAllElementsIncludingShadow('label');\r\n    const radioClasses = Array.from(all_elements).filter(el => {\r\n      return /.*radio.*/i.test(el.className);    \r\n    });\r\n    elements.push(...radioClasses);\r\n    return elements;\r\n  }\r\n\r\n  function findFillables() {\r\n    const elements = [];\r\n\r\n    const inputs = [...getAllElementsIncludingShadow('input:not([type=\"radio\"]):not([type=\"checkbox\"])')];\r\n    console.log('Found inputs:', inputs.length, inputs);\r\n    elements.push(...inputs);\r\n    \r\n    const textareas = [...getAllElementsIncludingShadow('textarea')];\r\n    console.log('Found textareas:', textareas.length);\r\n    elements.push(...textareas);\r\n    \r\n    const editables = [...getAllElementsIncludingShadow('[contenteditable=\"true\"]')];\r\n    console.log('Found editables:', editables.length);\r\n    elements.push(...editables);\r\n\r\n    return elements;\r\n  }\n\n  // Helper function to check if element is a form control\r\n  function isFormControl(elementInfo) {\r\n    return /^(input|select|textarea|button|label)$/i.test(elementInfo.tag);\r\n  }\r\n\r\n  const isDropdownItem = (elementInfo) => {\r\n    const dropdownPatterns = [\r\n      /dropdown[-_]?item/i,    // matches: dropdown-item, dropdownitem, dropdown_item\r\n      /menu[-_]?item/i,        // matches: menu-item, menuitem, menu_item\r\n      /dropdown[-_]?link/i,    // matches: dropdown-link, dropdownlink, dropdown_link\r\n      /list[-_]?item/i,       // matches: list-item, listitem, list_item\r\n      /select[-_]?item/i,     // matches: select-item, selectitem, select_item  \r\n    ];\r\n\r\n    const rolePatterns = [\r\n      /menu[-_]?item/i,       // matches: menuitem, menu-item\r\n      /option/i,              // matches: option\r\n      /list[-_]?item/i,      // matches: listitem, list-item\r\n      /tree[-_]?item/i       // matches: treeitem, tree-item\r\n    ];\r\n\r\n    const hasMatchingClass = elementInfo.element.className && \r\n                            dropdownPatterns.some(pattern => \r\n                              pattern.test(elementInfo.element.className)\r\n                            );\r\n\r\n    const hasMatchingRole = elementInfo.element.getAttribute('role') && \r\n                           rolePatterns.some(pattern => \r\n                             pattern.test(elementInfo.element.getAttribute('role'))\r\n                           );\r\n\r\n    return hasMatchingClass || hasMatchingRole;\r\n  };\r\n\r\n  /**\r\n   * Finds the first element matching a CSS selector, traversing Shadow DOM if necessary\r\n   * @param {string} selector - CSS selector to search for\r\n   * @param {Element} [root=document] - Root element to start searching from\r\n   * @returns {Element|null} - The first matching element or null if not found\r\n   */\r\n  function querySelectorShadow(selector, root = document) {\r\n    // First try to find in light DOM\r\n    let element = root.querySelector(selector);\r\n    if (element) return element;\r\n    \r\n    // Get all elements with shadow root\r\n    const shadowElements = Array.from(root.querySelectorAll('*'))\r\n        .filter(el => el.shadowRoot);\r\n    \r\n    // Search through each shadow root until we find a match\r\n    for (const el of shadowElements) {\r\n        element = querySelectorShadow(selector, el.shadowRoot);\r\n        if (element) return element;\r\n    }\r\n    \r\n    return null;\r\n  }\r\n\r\n  const getElementByXPathOrCssSelector = (element_info) => {\r\n    console.log('getElementByXPathOrCssSelector:', element_info);\r\n\r\n    findElement(document, element_info.iframe_selector, element_info.css_selector);\r\n  };\r\n\r\n  const findElement = (root, iframeSelector, cssSelector) => {\r\n    let element;\r\n    \r\n    if (iframeSelector) {      \r\n      const frames = getAllDocumentElementsIncludingShadow('iframe', root);\r\n      \r\n      // Iterate over all frames and compare their CSS selectors\r\n      for (const frame of frames) {\r\n        const selector = generateCssPath(frame);\r\n        if (selector === iframeSelector) {\r\n          const frameDocument = frame.contentDocument || frame.contentWindow.document;\r\n          element = querySelectorShadow(cssSelector, frameDocument);\r\n          console.log('found element ', element);\r\n          break;\r\n        }        \r\n      }  }\r\n    else\r\n      element = querySelectorShadow(cssSelector, root);\r\n      \r\n    if (!element) {\r\n      console.warn('Failed to find element with CSS selector:', cssSelector);\r\n    }\r\n\r\n    return element;\r\n  };\r\n\r\n  function generateXPath(element) {\r\n    if (!element || element.getRootNode() instanceof ShadowRoot) return '';\r\n    \r\n    // If element has an id, use that (it's unique and shorter)\r\n    if (element.id) {\r\n      return `//*[@id=\"${element.id}\"]`;\r\n    }\r\n    \r\n    const parts = [];\r\n    let current = element;\r\n    \r\n    while (current && current.nodeType === Node.ELEMENT_NODE) {\r\n      let index = 1;\r\n      let sibling = current.previousSibling;\r\n      \r\n      while (sibling) {\r\n        if (sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === current.tagName) {\r\n          index++;\r\n        }\r\n        sibling = sibling.previousSibling;\r\n      }\r\n      \r\n      const tagName = current.tagName.toLowerCase();\r\n      parts.unshift(`${tagName}[${index}]`);\r\n      current = current.parentNode;\r\n    }\r\n    \r\n    return '/' + parts.join('/');\r\n  }\r\n\r\n  function isDecendent(parent, child) {\r\n    let element = child;\r\n    while (element.nodeType === Node.ELEMENT_NODE) {    \r\n      \r\n      if (element.assignedSlot) {\r\n        element = element.assignedSlot;\r\n      }\r\n      else {\r\n        element = element.parentNode;\r\n        // Check if we're at a shadow root\r\n        if (element && element.nodeType !== Node.ELEMENT_NODE && element.getRootNode() instanceof ShadowRoot) {\r\n          // Get the shadow root's host element\r\n          element = element.getRootNode().host;     \r\n        }\r\n      }\r\n      if (element === parent)\r\n        return true;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  function generateCssPath(element) {\r\n    if (!element) {\r\n      console.error('ERROR: No element provided to generateCssPath returning empty string');\r\n      return '';\r\n    }\r\n    const path = [];\r\n    // console.group('Generating CSS path for:', element);\r\n    while (element && element.nodeType === Node.ELEMENT_NODE) {    \r\n      let selector = element.nodeName.toLowerCase();\r\n      // console.log('Element:', selector, element);\r\n      \r\n      // if (element.id) {\r\n      //   //escape special characters\r\n      //   const normalized_id = element.id.replace(/[:;.#()[\\]!@$%^&*]/g, '\\\\$&');\r\n      //   selector = `#${normalized_id}`;\r\n      //   path.unshift(selector);\r\n      //   break;\r\n      // } \r\n      \r\n      let sibling = element;\r\n      let nth = 1;\r\n      while (sibling = sibling.previousElementSibling) {\r\n        if (sibling.nodeName.toLowerCase() === selector) nth++;\r\n      }\r\n      sibling = element;\r\n      while (sibling = sibling.nextElementSibling) {\r\n        if (sibling.nodeName.toLowerCase() === selector) {\r\n          break;\r\n        }\r\n      }\r\n      selector += `:nth-of-type(${nth})`;\r\n   \r\n    \r\n      path.unshift(selector);\r\n      //console.log(`  Current path: ${path.join(' > ')}`);\r\n\r\n      if (element.assignedSlot) {\r\n        element = element.assignedSlot;\r\n        // console.log('  Moving to assigned slot');\r\n      }\r\n      else {\r\n        element = element.parentNode;\r\n        // console.log('  Moving to parent:', element);\r\n\r\n        // Check if we're at a shadow root\r\n        if (element && element.nodeType !== Node.ELEMENT_NODE && element.getRootNode() instanceof ShadowRoot) {\r\n          console.log('  Found shadow root, moving to host');\r\n          // Get the shadow root's host element\r\n          element = element.getRootNode().host;     \r\n        }\r\n      }\r\n    }\r\n    \r\n    // console.log('Final selector:', path.join(' > '));\r\n    // console.groupEnd();\r\n    return path.join(' > ');\r\n  }\r\n\r\n\r\n  function cleanHTML(rawHTML) {\r\n    const parser = new DOMParser();\r\n    const doc = parser.parseFromString(rawHTML, \"text/html\");\r\n\r\n    function cleanElement(element) {\r\n      const allowedAttributes = new Set([\r\n        \"role\",\r\n        \"type\",\r\n        \"class\",\r\n        \"href\",\r\n        \"alt\",\r\n        \"title\",\r\n        \"readonly\",\r\n        \"checked\",\r\n        \"enabled\",\r\n        \"disabled\",\r\n      ]);\r\n\r\n      [...element.attributes].forEach(attr => {\r\n        const name = attr.name.toLowerCase();\r\n        const value = attr.value;\r\n\r\n        const isTestAttribute = /^(testid|test-id|data-test-id)$/.test(name);\r\n        const isDataAttribute = name.startsWith(\"data-\") && value;\r\n        const isBooleanAttribute = [\"readonly\", \"checked\", \"enabled\", \"disabled\"].includes(name);\r\n\r\n        if (!allowedAttributes.has(name) && !isDataAttribute && !isTestAttribute && !isBooleanAttribute) {\r\n          element.removeAttribute(name);\r\n        }\r\n      });\r\n\r\n      // Handle SVG content - more aggressive replacement\r\n      if (element.tagName.toLowerCase() === \"svg\") {\r\n        // Remove all attributes except class and role\r\n        [...element.attributes].forEach(attr => {\r\n          const name = attr.name.toLowerCase();\r\n          if (name !== \"class\" && name !== \"role\") {\r\n            element.removeAttribute(name);\r\n          }\r\n        });\r\n        element.innerHTML = \"CONTENT REMOVED\";\r\n      } else {\r\n        // Recursively clean child elements\r\n        Array.from(element.children).forEach(cleanElement);\r\n      }\r\n\r\n      // Only remove empty elements that aren't semantic or icon elements\r\n      const keepEmptyElements = ['i', 'span', 'svg', 'button', 'input'];\r\n      if (!keepEmptyElements.includes(element.tagName.toLowerCase()) && \r\n          !element.children.length && \r\n          !element.textContent.trim()) {\r\n        element.remove();\r\n      }\r\n    }\r\n\r\n    // Process all elements in the document body\r\n    Array.from(doc.body.children).forEach(cleanElement);\r\n    return doc.body.innerHTML;\r\n  }\r\n\r\n  function getContainingIframe(element) {\r\n    // If not in an iframe, return null\r\n    if (element.ownerDocument.defaultView === window.top) {\r\n      return null;\r\n    }\r\n    \r\n    // Try to find the iframe in the parent document that contains our element\r\n    try {\r\n      const parentDocument = element.ownerDocument.defaultView.parent.document;\r\n      const iframes = parentDocument.querySelectorAll('iframe');\r\n      \r\n      for (const iframe of iframes) {\r\n        if (iframe.contentWindow === element.ownerDocument.defaultView) {\r\n          return iframe;\r\n        }\r\n      }\r\n    } catch (e) {\r\n      // Cross-origin restriction\r\n      return \"Cross-origin iframe - cannot access details\";\r\n    }\r\n    \r\n    return null;\r\n  }\r\n\r\n  function getElementInfo(element, index) {\r\n\r\n    const xpath = generateXPath(element);\r\n    const css_selector = generateCssPath(element);\r\n    //disabled since it's blocking event handling in recorder\r\n    const short_css_selector = ''; //getRobustSelector(element);\r\n\r\n    const iframe = getContainingIframe(element);  \r\n    const iframe_selector = iframe ? generateCssPath(iframe) : \"\";\r\n    //disabled since it's blocking event handling in recorder\r\n    const short_iframe_selector = ''; //iframe ? getRobustSelector(iframe) : \"\";\r\n\r\n    // Return element info with pre-calculated values\r\n    return new ElementInfo(element, index, {\r\n      tag: element.tagName.toLowerCase(),\r\n      type: element.type || '',\r\n      text: element.innerText || element.placeholder || '', //getTextContent(element),\r\n      html: cleanHTML(element.outerHTML),\r\n      xpath: xpath,\r\n      css_selector: css_selector,\r\n      bounding_box: element.getBoundingClientRect(),\r\n      iframe_selector: iframe_selector,\r\n      short_css_selector: short_css_selector,\r\n      short_iframe_selector: short_iframe_selector\r\n    });\r\n  }\r\n\r\n  function getAriaLabelledByText(elementInfo, includeHidden=true) {\r\n    if (!elementInfo.element.hasAttribute('aria-labelledby')) return '';\r\n\r\n    const ids = elementInfo.element.getAttribute('aria-labelledby').split(/\\s+/);\r\n    let labelText = '';\r\n\r\n    //locate root (document or iFrame document if element is contained in an iframe)\r\n    let root = document;\r\n    if (elementInfo.iframe_selector) {      \r\n      const frames = getAllDocumentElementsIncludingShadow('iframe', document);\r\n      \r\n      // Iterate over all frames and compare their CSS selectors\r\n      for (const frame of frames) {\r\n        const selector = generateCssPath(frame);\r\n        if (selector === iframeSelector) {\r\n          root = frame.contentDocument || frame.contentWindow.document;        \r\n          break;\r\n        }        \r\n      }  }\r\n\r\n    ids.forEach(id => {\r\n      const el = querySelectorShadow(`#${id}`, root);\r\n      if (el) {\r\n        if (includeHidden || el.offsetParent !== null || getComputedStyle(el).display !== 'none') {\r\n          labelText += el.textContent.trim() + ' ';\r\n        }\r\n      }\r\n    });\r\n\r\n    return labelText.trim();\r\n  }\r\n\r\n\r\n\r\n  const filterZeroDimensions = (elementInfo) => {\r\n    const rect = elementInfo.bounding_box;\r\n    //single pixel elements are typically faux controls and should be filtered too\r\n    const hasSize = rect.width > 1 && rect.height > 1;\r\n    const style = window.getComputedStyle(elementInfo.element);\r\n    const isVisible = style.display !== 'none' && style.visibility !== 'hidden';\r\n    \r\n    if (!hasSize || !isVisible) {\r\n      // if (elementInfo.element.isConnected) {\r\n      //   console.log('Filtered out invisible/zero-size element:', {\r\n      //     tag: elementInfo.tag,\r\n      //     xpath: elementInfo.xpath,\r\n      //     element: elementInfo.element,\r\n      //     hasSize,\r\n      //     isVisible,\r\n      //     dimensions: rect\r\n      //   });\r\n      // }\r\n      return false;\r\n    }\r\n    return true;\r\n  };\r\n\r\n\r\n\r\n  function uniquifyElements(elements) {\r\n    const seen = new Set();\r\n\r\n    console.log(`Starting uniquification with ${elements.length} elements`);\r\n\r\n    // Filter out testing infrastructure elements first\r\n    const filteredInfrastructure = elements.filter(element_info => {\r\n      // Skip the highlight-overlay element completely - it's part of the testing infrastructure\r\n      if (element_info.element.id === 'highlight-overlay' || \r\n          (element_info.css_selector && element_info.css_selector.includes('#highlight-overlay'))) {\r\n        console.log('Filtered out testing infrastructure element:', element_info.css_selector);\r\n        return false;\r\n      }\r\n      \r\n      // Filter out UI framework container/manager elements\r\n      const el = element_info.element;\r\n      // UI framework container checks - generic detection for any framework\r\n      if ((el.getAttribute('data-rendered-by') || \r\n           el.getAttribute('data-reactroot') || \r\n           el.getAttribute('ng-version') || \r\n           el.getAttribute('data-component-id') ||\r\n           el.getAttribute('data-root') ||\r\n           el.getAttribute('data-framework')) && \r\n          (el.className && \r\n           typeof el.className === 'string' && \r\n           (el.className.includes('Container') || \r\n            el.className.includes('container') || \r\n            el.className.includes('Manager') || \r\n            el.className.includes('manager')))) {\r\n        console.log('Filtered out UI framework container element:', element_info.css_selector);\r\n        return false;\r\n      }\r\n      \r\n      // Direct filter for framework container elements that shouldn't be interactive\r\n      // Consolidating multiple container detection patterns into one efficient check\r\n      const isFullViewport = element_info.bounding_box && \r\n                           element_info.bounding_box.x <= 5 && \r\n                           element_info.bounding_box.y <= 5 && \r\n                           element_info.bounding_box.width >= (window.innerWidth * 0.95) && \r\n                           element_info.bounding_box.height >= (window.innerHeight * 0.95);\r\n                           \r\n      // Empty content check\r\n      const isEmpty = !el.innerText || el.innerText.trim() === '';\r\n      \r\n      // Check if it's a framework container element\r\n      if (element_info.element.tagName === 'DIV' && \r\n          isFullViewport && \r\n          isEmpty && \r\n          (\r\n            // Pattern matching for root containers\r\n            (element_info.xpath && \r\n              (element_info.xpath.match(/^\\/html\\[\\d+\\]\\/body\\[\\d+\\]\\/div\\[\\d+\\]\\/div\\[\\d+\\]$/) || \r\n               element_info.xpath.match(/^\\/\\/\\*\\[@id='[^']+'\\]\\/div\\[\\d+\\]$/))) ||\r\n            \r\n            // Simple DOM structure\r\n            (element_info.css_selector.split(' > ').length <= 4 && element_info.depth <= 5) ||\r\n            \r\n            // Empty or container-like classes\r\n            (!el.className || el.className === '' || \r\n             (typeof el.className === 'string' && \r\n              (el.className.includes('overlay') || \r\n               el.className.includes('container') || \r\n               el.className.includes('wrapper'))))\r\n          )) {\r\n        console.log('Filtered out framework container element:', element_info.css_selector);\r\n        return false;\r\n      }\r\n      \r\n      return true;\r\n    });\r\n\r\n    // First filter out elements with zero dimensions\r\n    const nonZeroElements = filteredInfrastructure.filter(filterZeroDimensions);\r\n    // sort by CSS selector depth so parents are processed first\r\n    nonZeroElements.sort((a, b) => a.getDepth() - b.getDepth());\r\n    console.log(`After dimension filtering: ${nonZeroElements.length} elements remain (${elements.length - nonZeroElements.length} removed)`);\r\n    \r\n    const filteredByParent = nonZeroElements.filter(element_info => {\r\n\r\n      const parent = findClosestParent(seen, element_info);\r\n      const keep = parent == null || shouldKeepNestedElement(element_info, parent);\r\n      // console.log(\"node \", element_info.index, \": keep=\", keep, \" parent=\", parent);\r\n      // if (!keep && !element_info.xpath) {\r\n      //   console.log(\"Filtered out element \", element_info,\" because it's a nested element of \", parent);\r\n      // }\r\n      if (keep)\r\n        seen.add(element_info.css_selector);\r\n\r\n      return keep;\r\n    });\r\n\r\n    console.log(`After parent/child filtering: ${filteredByParent.length} elements remain (${nonZeroElements.length - filteredByParent.length} removed)`);\r\n\r\n    // Final overlap filtering\r\n    const filteredResults = filteredByParent.filter(element => {\r\n\r\n       // Look for any element that came BEFORE this one in the array\r\n      const hasEarlierOverlap = filteredByParent.some(other => {\r\n        // Only check elements that came before (lower index)\r\n        if (filteredByParent.indexOf(other) >= filteredByParent.indexOf(element)) {\r\n          return false;\r\n        }\r\n        \r\n        const isOverlapping = areElementsOverlapping(element, other); \r\n        return isOverlapping;\r\n      });  \r\n\r\n      // Keep element if it has no earlier overlapping elements\r\n      return !hasEarlierOverlap;\r\n    });\r\n    \r\n    \r\n    \r\n    // Check for overlay removal\r\n    console.log(`After filtering: ${filteredResults.length} (${filteredByParent.length - filteredResults.length} removed by overlap)`);\r\n    \r\n    const nonOverlaidElements = filteredResults.filter(element => {\r\n      return !isOverlaid(element);\r\n    });\r\n\r\n    console.log(`Final elements after overlay removal: ${nonOverlaidElements.length} (${filteredResults.length - nonOverlaidElements.length} removed)`);\r\n    \r\n    return nonOverlaidElements;\r\n\r\n  }\r\n\r\n\r\n\r\n  const areElementsOverlapping = (element1, element2) => {\r\n    if (element1.css_selector === element2.css_selector) {\r\n      return true;\r\n    }\r\n    \r\n    const box1 = element1.bounding_box;\r\n    const box2 = element2.bounding_box;\r\n    \r\n    return box1.x === box2.x &&\r\n           box1.y === box2.y &&\r\n           box1.width === box2.width &&\r\n           box1.height === box2.height;\r\n          //  element1.text === element2.text &&\r\n          //  element2.tag === 'a';\r\n  };\r\n\r\n  function findClosestParent(seen, element_info) {  \r\n    // //Use element child/parent queries\r\n    // let parent = element_info.element.parentNode;\r\n    // if (parent.getRootNode() instanceof ShadowRoot) {\r\n    //   // Get the shadow root's host element\r\n    //   parent = parent.getRootNode().host;    \r\n    // }\r\n\r\n    // while (parent.nodeType === Node.ELEMENT_NODE) {    \r\n    //   const css_selector = generateCssPath(parent);\r\n    //   if (seen.has(css_selector)) {\r\n    //       console.log(\"element \", element_info, \" closest parent is \", parent)\r\n    //       return parent;      \r\n    //   }\r\n    //   parent = parent.parentNode;\r\n    //   if (parent.getRootNode() instanceof ShadowRoot) {\r\n    //     // Get the shadow root's host element\r\n    //     parent = parent.getRootNode().host;      \r\n    //   }\r\n    // }\r\n\r\n    // Split the xpath into segments\r\n    const segments = element_info.css_selector.split(' > ');\r\n    \r\n    // Try increasingly shorter paths until we find one in the seen set\r\n    for (let i = segments.length - 1; i > 0; i--) {\r\n      const parentPath = segments.slice(0, i).join(' > ');\r\n      if (seen.has(parentPath)) {\r\n        return parentPath;\r\n      }\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  function shouldKeepNestedElement(elementInfo, parentPath) {\r\n    let result = false;\r\n    const parentSegments = parentPath.split(' > ');\r\n\r\n    const isParentLink = /^a(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\r\n    if (isParentLink) {\r\n      return false;    \r\n    }\r\n    // If this is a checkbox/radio input\r\n    if (elementInfo.tag === 'input' && \r\n        (elementInfo.type === 'checkbox' || elementInfo.type === 'radio')) {\r\n      \r\n      // Check if parent is a label by looking at the parent xpath's last segment\r\n      \r\n      const isParentLabel = /^label(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\r\n      \r\n      // If parent is a label, don't keep the input (we'll keep the label instead)\r\n      if (isParentLabel) {\r\n        return false;\r\n      }\r\n    }\r\n    \r\n    // Keep all other form controls and dropdown items\r\n    if (isFormControl(elementInfo) || isDropdownItem(elementInfo)) {\r\n      result = true;\r\n    }\r\n\r\n    if(isTableCell(elementInfo)) {\r\n      result = true;\r\n    }\r\n    \r\n    \r\n    // console.log(`shouldKeepNestedElement: ${elementInfo.tag} ${elementInfo.text} ${elementInfo.xpath} -> ${parentXPath} -> ${result}`);\r\n    return result;\r\n  }\r\n\r\n\r\n  function isTableCell(elementInfo) {\r\n    const element = elementInfo.element;\r\n    if(!element || !(element instanceof HTMLElement)) {\r\n      return false;\r\n    }\r\n    const validTags = new Set(['td', 'th']);\r\n    const validRoles = new Set(['cell', 'gridcell', 'columnheader', 'rowheader']);\r\n    \r\n    const tag = element.tagName.toLowerCase();\r\n    const role = element.getAttribute('role')?.toLowerCase();\r\n\r\n    if (validTags.has(tag) || (role && validRoles.has(role))) {\r\n      return true;\r\n    }\r\n    return false;\r\n    \r\n  }\r\n\r\n  function isOverlaid(elementInfo) {\r\n    const element = elementInfo.element;\r\n    const boundingRect = elementInfo.bounding_box;\r\n    \r\n\r\n    \r\n    \r\n    // Create a diagnostic logging function that only logs when needed\r\n    const diagnosticLog = (...args) => {\r\n      { // set to true for debugging\r\n        console.log('[OVERLAY-DEBUG]', ...args);\r\n      }\r\n    };\r\n\r\n    // Special handling for tooltips\r\n    if (elementInfo.element.className && typeof elementInfo.element.className === 'string' && \r\n        elementInfo.element.className.includes('tooltip')) {\r\n      diagnosticLog('Element is a tooltip, not considering it overlaid');\r\n      return false;\r\n    }\r\n    \r\n    \r\n      \r\n        // Get element at the center point to check if it's covered by a popup/modal\r\n        const middleX = boundingRect.x + boundingRect.width/2;\r\n        const middleY = boundingRect.y + boundingRect.height/2;\r\n        const elementAtMiddle = element.ownerDocument.elementFromPoint(middleX, middleY);\r\n        \r\n        if (elementAtMiddle && \r\n            elementAtMiddle !== element && \r\n            !isDecendent(element, elementAtMiddle) && \r\n            !isDecendent(elementAtMiddle, element)) {\r\n\r\n        // Add detailed logging for overlaid elements with formatted output\r\n        // console.log('[OVERLAY-DEBUG]', JSON.stringify({\r\n        //   originalElement: {\r\n        //     selector: elementInfo.css_selector,\r\n        //     rect: {\r\n        //       x: boundingRect.x,\r\n        //       y: boundingRect.y,\r\n        //       width: boundingRect.width,\r\n        //       height: boundingRect.height,\r\n        //       top: boundingRect.top,\r\n        //       right: boundingRect.right,\r\n        //       bottom: boundingRect.bottom,\r\n        //       left: boundingRect.left\r\n        //     }\r\n        //   },\r\n        //   overlayingElement: {\r\n        //     selector: generateCssPath(elementAtMiddle),\r\n        //     rect: {\r\n        //       x: elementAtMiddle.getBoundingClientRect().x,\r\n        //       y: elementAtMiddle.getBoundingClientRect().y,\r\n        //       width: elementAtMiddle.getBoundingClientRect().width,\r\n        //       height: elementAtMiddle.getBoundingClientRect().height,\r\n        //       top: elementAtMiddle.getBoundingClientRect().top,\r\n        //       right: elementAtMiddle.getBoundingClientRect().right,\r\n        //       bottom: elementAtMiddle.getBoundingClientRect().bottom,\r\n        //       left: elementAtMiddle.getBoundingClientRect().left\r\n        //     }\r\n        //   },\r\n        //   middlePoint: { x: middleX, y: middleY }\r\n        // }, null, 2));\r\n\r\n        // console.log('[OVERLAY-REMOVED]', elementInfo.css_selector, elementInfo.bounding_box, 'elementAtMiddle:', elementAtMiddle, 'elementAtMiddle selector:', generateCssPath(elementAtMiddle));\r\n        return true;\r\n      }\r\n        \r\n        // Check specifically if the element at middle is a popup/modal\r\n        // if (elementAtMiddle && isElementOrAncestorPopup(elementAtMiddle)) {\r\n        //   diagnosticLog('Element at middle is a popup/modal, element IS overlaid');\r\n        //   return true; // It's under a popup, so it is overlaid\r\n        // }\r\n        return false;\r\n    //   }\r\n    //   return false;\r\n    }\r\n\r\n\r\n\r\n  /**\r\n   * Get the “best” short, unique, and robust CSS selector for an element.\r\n   * \r\n   * @param {Element} element\r\n   * @returns {string} A selector guaranteed to find exactly that element in its context\r\n   */\r\n  function getRobustSelector(element) {\r\n    // 1. Figure out the real “root” (iframe doc, shadow root, or main doc)\r\n    const root = (() => {\r\n      const rootNode = element.getRootNode();\r\n      if (rootNode instanceof ShadowRoot) {\r\n        return rootNode;\r\n      }\r\n      return element.ownerDocument;\r\n    })();\r\n\r\n    // 2. Options to bias toward stable attrs and away from auto-generated classes\r\n    const options = {\r\n      root,\r\n      // only use data-*, id or aria-label by default\r\n      attr(name, value) {\r\n        if (name === 'id' || name.startsWith('data-') || name === 'aria-label') {\r\n          return true;\r\n        }\r\n        return false;\r\n      },\r\n      // skip framework junk\r\n      filter(name, value) {\r\n        if (name.startsWith('ng-') || name.startsWith('_ngcontent') || /^p-/.test(name)) {\r\n          return false;\r\n        }\r\n        return true;\r\n      },\r\n      // let finder try really short seeds\r\n      seedMinLength: 1,\r\n      optimizedMinLength: 1,\r\n    };\r\n\r\n    let selector;\r\n    try {\r\n      selector = finder(element, options);\r\n      // 3. Verify it really works in the context\r\n      const found = root.querySelectorAll(selector);\r\n      if (found.length !== 1 || found[0] !== element) {\r\n        throw new Error('not unique or not found');\r\n      }\r\n      return selector;\r\n    } catch (err) {\r\n      // 4. Fallback: full path (you already have this utility)\r\n      console.warn('[getRobustSelector] finder failed, falling back to full path:', err);\r\n      return generateCssPath(element); // you’d import or define this elsewhere\r\n    }\r\n  }\r\n\r\n  /*\r\n  export function serializeNode(node, includeStyles = false) {\r\n    if (!node) return null;\r\n\r\n    const obj = {\r\n      nodeType: node.nodeType,\r\n      nodeName: node.nodeName,\r\n      tagName: node.tagName || null,\r\n      textContent: node.nodeType === Node.TEXT_NODE ? node.textContent : null,\r\n      attributes: {},\r\n      styles: {},\r\n      children: [],\r\n      shadowRoot: null,\r\n      iframeContent: null\r\n    };\r\n\r\n    if (node.nodeType === Node.ELEMENT_NODE) {\r\n      for (const attr of node.attributes) {\r\n        obj.attributes[attr.name] = attr.value;\r\n      }\r\n\r\n      if (includeStyles) {\r\n        const computedStyle = getComputedStyle(node);\r\n        for (const prop of computedStyle) {\r\n          obj.styles[prop] = computedStyle.getPropertyValue(prop);\r\n        }\r\n      }\r\n\r\n      // Shadow DOM\r\n      if (node.shadowRoot) {\r\n        obj.shadowRoot = serializeNode(node.shadowRoot, includeStyles);\r\n      }\r\n\r\n      // iframe\r\n      if (node.tagName === 'IFRAME') {\r\n        try {\r\n          const iframeDoc = node.contentDocument;\r\n          if (iframeDoc) {\r\n            obj.iframeContent = serializeNode(iframeDoc.documentElement, includeStyles);\r\n          }\r\n        } catch (err) {\r\n          obj.iframeContent = { error: 'Cross-origin iframe' };\r\n        }\r\n      }\r\n    }\r\n\r\n    for (const child of node.childNodes) {\r\n      obj.children.push(serializeNode(child, includeStyles));\r\n    }\r\n\r\n    return obj;\r\n  }\r\n\r\n  export function deserializeNode(obj) {\r\n    if (!obj) return null;\r\n\r\n    // 🛑 Skip the Document root and use its first child instead\r\n    if (obj.nodeName === '#document') {\r\n      return deserializeNode(obj.children?.[0]);\r\n    }\r\n\r\n    let node;\r\n\r\n    if (obj.nodeType === Node.TEXT_NODE) {\r\n      node = document.createTextNode(obj.textContent);\r\n      return node;\r\n    }\r\n\r\n    // Use nodeName for fragments and documents\r\n    if (obj.nodeName === '#document-fragment') {\r\n      node = document.createDocumentFragment();\r\n    } else {\r\n      node = document.createElement(obj.tagName || obj.nodeName);\r\n    }\r\n\r\n    // Set attributes\r\n    for (const [key, value] of Object.entries(obj.attributes || {})) {\r\n      node.setAttribute(key, value);\r\n    }\r\n\r\n    // Set styles\r\n    if (obj.styles) {\r\n      for (const [key, value] of Object.entries(obj.styles)) {\r\n        node.style.setProperty(key, value);\r\n      }\r\n    }\r\n\r\n    // Recurse into children\r\n    for (const child of obj.children || []) {\r\n      const childNode = deserializeNode(child);\r\n      if (childNode) node.appendChild(childNode);\r\n    }\r\n\r\n    // Shadow DOM (create open shadow root)\r\n    if (obj.shadowRoot) {\r\n      const shadow = node.attachShadow({ mode: 'open' });\r\n      const shadowRootEl = deserializeNode(obj.shadowRoot);\r\n      if (shadowRootEl) shadow.appendChild(shadowRootEl);\r\n    }\r\n\r\n    // iFrame contents (non-functional, shown as placeholder)\r\n    if (obj.iframeContent && !obj.iframeContent.error) {\r\n      const placeholder = document.createElement('div');\r\n      placeholder.style.border = '1px dashed red';\r\n      placeholder.textContent = '[Deserialized iframe content]';\r\n      const iframeContent = deserializeNode(obj.iframeContent);\r\n      if (iframeContent) placeholder.appendChild(iframeContent);\r\n      node.appendChild(placeholder);\r\n    }\r\n\r\n    return node;\r\n  }\r\n  */\n\n  class DOMSerializer {\r\n      constructor(options = {}) {\r\n        this.options = {\r\n          includeStyles: true,\r\n          includeScripts: false, // Security consideration\r\n          includeFrames: true,\r\n          includeShadowDOM: true,\r\n          maxDepth: 50,\r\n          ...options\r\n        };\r\n        this.serializedFrames = new Map();\r\n        this.shadowRoots = new Map();\r\n      }\r\n    \r\n      /**\r\n       * Serialize a complete document or element\r\n       */\r\n      serialize(rootElement = document) {\r\n        try {\r\n          const serialized = {\r\n            type: 'document',\r\n            doctype: this.serializeDoctype(rootElement),\r\n            documentElement: this.serializeElement(rootElement.documentElement || rootElement),\r\n            frames: [],\r\n            timestamp: Date.now(),\r\n            url: rootElement.URL || window.location?.href,\r\n            metadata: {\r\n              title: rootElement.title,\r\n              charset: rootElement.characterSet,\r\n              contentType: rootElement.contentType\r\n            }\r\n          };\r\n    \r\n          // Serialize frames and iframes if enabled\r\n          if (this.options.includeFrames) {\r\n            serialized.frames = this.serializeFrames(rootElement);\r\n          }\r\n    \r\n          return serialized;\r\n        } catch (error) {\r\n          console.error('Serialization error:', error);\r\n          throw new Error(`DOM serialization failed: ${error.message}`);\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Serialize document type declaration\r\n       */\r\n      serializeDoctype(doc) {\r\n        if (!doc.doctype) return null;\r\n        \r\n        return {\r\n          name: doc.doctype.name,\r\n          publicId: doc.doctype.publicId,\r\n          systemId: doc.doctype.systemId\r\n        };\r\n      }\r\n    \r\n      /**\r\n       * Serialize an individual element and its children\r\n       */\r\n      serializeElement(element, depth = 0) {\r\n        if (depth > this.options.maxDepth) {\r\n          return { type: 'text', content: '<!-- Max depth exceeded -->' };\r\n        }\r\n    \r\n        const nodeType = element.nodeType;\r\n        \r\n        switch (nodeType) {\r\n          case Node.ELEMENT_NODE:\r\n            return this.serializeElementNode(element, depth);\r\n          case Node.TEXT_NODE:\r\n            return this.serializeTextNode(element);\r\n          case Node.COMMENT_NODE:\r\n            return this.serializeCommentNode(element);\r\n          case Node.DOCUMENT_FRAGMENT_NODE:\r\n            return this.serializeDocumentFragment(element, depth);\r\n          default:\r\n            return null;\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Serialize element node with attributes and children\r\n       */\r\n      serializeElementNode(element, depth) {\r\n        const tagName = element.tagName.toLowerCase();\r\n        \r\n        // Skip script tags for security unless explicitly enabled\r\n        if (tagName === 'script' && !this.options.includeScripts) {\r\n          return { type: 'comment', content: '<!-- Script tag removed for security -->' };\r\n        }\r\n    \r\n        const serialized = {\r\n          type: 'element',\r\n          tagName: tagName,\r\n          attributes: this.serializeAttributes(element),\r\n          children: [],\r\n          shadowRoot: null\r\n        };\r\n    \r\n        // Handle Shadow DOM\r\n        if (this.options.includeShadowDOM && element.shadowRoot) {\r\n          serialized.shadowRoot = this.serializeShadowRoot(element.shadowRoot, depth + 1);\r\n        }\r\n    \r\n        // Handle special elements\r\n        if (tagName === 'iframe' || tagName === 'frame') {\r\n          serialized.frameData = this.serializeFrameElement(element);\r\n        }\r\n    \r\n        // Serialize children\r\n        for (const child of element.childNodes) {\r\n          const serializedChild = this.serializeElement(child, depth + 1);\r\n          if (serializedChild) {\r\n            serialized.children.push(serializedChild);\r\n          }\r\n        }\r\n    \r\n        // Include computed styles if enabled\r\n        if (this.options.includeStyles && element.nodeType === Node.ELEMENT_NODE) {\r\n          serialized.computedStyle = this.serializeComputedStyle(element);\r\n        }\r\n    \r\n        return serialized;\r\n      }\r\n    \r\n      /**\r\n       * Serialize element attributes\r\n       */\r\n      serializeAttributes(element) {\r\n        const attributes = {};\r\n        \r\n        if (element.attributes) {\r\n          for (const attr of element.attributes) {\r\n            attributes[attr.name] = attr.value;\r\n          }\r\n        }\r\n    \r\n        return attributes;\r\n      }\r\n    \r\n      /**\r\n       * Serialize computed styles\r\n       */\r\n      serializeComputedStyle(element) {\r\n        try {\r\n          const computedStyle = window.getComputedStyle(element);\r\n          const styles = {};\r\n          \r\n          // Only serialize non-default values to reduce size\r\n          const importantStyles = [\r\n            'display', 'position', 'width', 'height', 'margin', 'padding',\r\n            'border', 'background', 'color', 'font-family', 'font-size',\r\n            'text-align', 'visibility', 'z-index', 'transform'\r\n          ];\r\n    \r\n          for (const prop of importantStyles) {\r\n            const value = computedStyle.getPropertyValue(prop);\r\n            if (value && value !== 'initial' && value !== 'normal') {\r\n              styles[prop] = value;\r\n            }\r\n          }\r\n    \r\n          return styles;\r\n        } catch (error) {\r\n          return {};\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Serialize text node\r\n       */\r\n      serializeTextNode(node) {\r\n        return {\r\n          type: 'text',\r\n          content: node.textContent\r\n        };\r\n      }\r\n    \r\n      /**\r\n       * Serialize comment node\r\n       */\r\n      serializeCommentNode(node) {\r\n        return {\r\n          type: 'comment',\r\n          content: node.textContent\r\n        };\r\n      }\r\n    \r\n      /**\r\n       * Serialize document fragment\r\n       */\r\n      serializeDocumentFragment(fragment, depth) {\r\n        const serialized = {\r\n          type: 'fragment',\r\n          children: []\r\n        };\r\n    \r\n        for (const child of fragment.childNodes) {\r\n          const serializedChild = this.serializeElement(child, depth + 1);\r\n          if (serializedChild) {\r\n            serialized.children.push(serializedChild);\r\n          }\r\n        }\r\n    \r\n        return serialized;\r\n      }\r\n    \r\n      /**\r\n       * Serialize Shadow DOM\r\n       */\r\n      serializeShadowRoot(shadowRoot, depth) {\r\n        const serialized = {\r\n          type: 'shadowRoot',\r\n          mode: shadowRoot.mode,\r\n          children: []\r\n        };\r\n    \r\n        for (const child of shadowRoot.childNodes) {\r\n          const serializedChild = this.serializeElement(child, depth + 1);\r\n          if (serializedChild) {\r\n            serialized.children.push(serializedChild);\r\n          }\r\n        }\r\n    \r\n        return serialized;\r\n      }\r\n    \r\n      /**\r\n       * Serialize frame/iframe elements\r\n       */\r\n      serializeFrameElement(frameElement) {\r\n        const frameData = {\r\n          src: frameElement.src,\r\n          name: frameElement.name,\r\n          id: frameElement.id,\r\n          sandbox: frameElement.sandbox?.toString() || '',\r\n          allowfullscreen: frameElement.allowFullscreen\r\n        };\r\n    \r\n        // Try to access frame content (may fail due to CORS)\r\n        try {\r\n          const frameDoc = frameElement.contentDocument;\r\n          if (frameDoc && this.options.includeFrames) {\r\n            frameData.content = this.serialize(frameDoc);\r\n          }\r\n        } catch (error) {\r\n          frameData.accessError = 'Cross-origin frame content not accessible';\r\n        }\r\n    \r\n        return frameData;\r\n      }\r\n    \r\n      /**\r\n       * Serialize all frames in document\r\n       */\r\n      serializeFrames(doc) {\r\n        const frames = [];\r\n        const frameElements = doc.querySelectorAll('iframe, frame');\r\n    \r\n        for (const frameElement of frameElements) {\r\n          try {\r\n            const frameDoc = frameElement.contentDocument;\r\n            if (frameDoc) {\r\n              frames.push({\r\n                element: this.serializeElement(frameElement),\r\n                content: this.serialize(frameDoc)\r\n              });\r\n            }\r\n          } catch (error) {\r\n            frames.push({\r\n              element: this.serializeElement(frameElement),\r\n              error: 'Frame content not accessible'\r\n            });\r\n          }\r\n        }\r\n    \r\n        return frames;\r\n      }\r\n    \r\n      /**\r\n       * Deserialize serialized DOM data back to DOM nodes\r\n       */\r\n      deserialize(serializedData, targetDocument = document) {\r\n        try {\r\n          if (serializedData.type === 'document') {\r\n            return this.deserializeDocument(serializedData, targetDocument);\r\n          } else {\r\n            return this.deserializeElement(serializedData, targetDocument);\r\n          }\r\n        } catch (error) {\r\n          console.error('Deserialization error:', error);\r\n          throw new Error(`DOM deserialization failed: ${error.message}`);\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Deserialize complete document\r\n       */\r\n      deserializeDocument(serializedDoc, targetDoc) {\r\n        // Create new document if needed\r\n        const doc = targetDoc || document.implementation.createHTMLDocument();\r\n    \r\n        // Set doctype if present\r\n        if (serializedDoc.doctype) {\r\n          const doctype = document.implementation.createDocumentType(\r\n            serializedDoc.doctype.name,\r\n            serializedDoc.doctype.publicId,\r\n            serializedDoc.doctype.systemId\r\n          );\r\n          doc.replaceChild(doctype, doc.doctype);\r\n        }\r\n    \r\n        // Deserialize document element\r\n        if (serializedDoc.documentElement) {\r\n          const newDocElement = this.deserializeElement(serializedDoc.documentElement, doc);\r\n          doc.replaceChild(newDocElement, doc.documentElement);\r\n        }\r\n    \r\n        // Handle metadata\r\n        if (serializedDoc.metadata) {\r\n          doc.title = serializedDoc.metadata.title || '';\r\n        }\r\n    \r\n        return doc;\r\n      }\r\n    \r\n      /**\r\n       * Deserialize individual element\r\n       */\r\n      deserializeElement(serializedNode, doc) {\r\n        switch (serializedNode.type) {\r\n          case 'element':\r\n            return this.deserializeElementNode(serializedNode, doc);\r\n          case 'text':\r\n            return doc.createTextNode(serializedNode.content);\r\n          case 'comment':\r\n            return doc.createComment(serializedNode.content);\r\n          case 'fragment':\r\n            return this.deserializeDocumentFragment(serializedNode, doc);\r\n          case 'shadowRoot':\r\n            // Shadow roots are handled during element creation\r\n            return null;\r\n          default:\r\n            return null;\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Deserialize element node\r\n       */\r\n      deserializeElementNode(serializedElement, doc) {\r\n        const element = doc.createElement(serializedElement.tagName);\r\n    \r\n        // Set attributes\r\n        if (serializedElement.attributes) {\r\n          for (const [name, value] of Object.entries(serializedElement.attributes)) {\r\n            try {\r\n              element.setAttribute(name, value);\r\n            } catch (error) {\r\n              console.warn(`Failed to set attribute ${name}:`, error);\r\n            }\r\n          }\r\n        }\r\n    \r\n        // Apply computed styles if available\r\n        if (serializedElement.computedStyle && this.options.includeStyles) {\r\n          for (const [prop, value] of Object.entries(serializedElement.computedStyle)) {\r\n            try {\r\n              element.style.setProperty(prop, value);\r\n            } catch (error) {\r\n              console.warn(`Failed to set style ${prop}:`, error);\r\n            }\r\n          }\r\n        }\r\n    \r\n        // Create shadow root if present\r\n        if (serializedElement.shadowRoot && element.attachShadow) {\r\n          try {\r\n            const shadowRoot = element.attachShadow({ \r\n              mode: serializedElement.shadowRoot.mode || 'open' \r\n            });\r\n            \r\n            // Deserialize shadow root children\r\n            for (const child of serializedElement.shadowRoot.children) {\r\n              const childElement = this.deserializeElement(child, doc);\r\n              if (childElement) {\r\n                shadowRoot.appendChild(childElement);\r\n              }\r\n            }\r\n          } catch (error) {\r\n            console.warn('Failed to create shadow root:', error);\r\n          }\r\n        }\r\n    \r\n        // Deserialize children\r\n        if (serializedElement.children) {\r\n          for (const child of serializedElement.children) {\r\n            const childElement = this.deserializeElement(child, doc);\r\n            if (childElement) {\r\n              element.appendChild(childElement);\r\n            }\r\n          }\r\n        }\r\n    \r\n        // Handle frame content\r\n        if (serializedElement.frameData && serializedElement.frameData.content) {\r\n          // Frame content deserialization would happen after the frame loads\r\n          element.addEventListener('load', () => {\r\n            try {\r\n              const frameDoc = element.contentDocument;\r\n              if (frameDoc) {\r\n                this.deserializeDocument(serializedElement.frameData.content, frameDoc);\r\n              }\r\n            } catch (error) {\r\n              console.warn('Failed to deserialize frame content:', error);\r\n            }\r\n          });\r\n        }\r\n    \r\n        return element;\r\n      }\r\n    \r\n      /**\r\n       * Deserialize document fragment\r\n       */\r\n      deserializeDocumentFragment(serializedFragment, doc) {\r\n        const fragment = doc.createDocumentFragment();\r\n    \r\n        if (serializedFragment.children) {\r\n          for (const child of serializedFragment.children) {\r\n            const childElement = this.deserializeElement(child, doc);\r\n            if (childElement) {\r\n              fragment.appendChild(childElement);\r\n            }\r\n          }\r\n        }\r\n    \r\n        return fragment;\r\n      }\r\n    }\r\n    \r\n    // Usage example and utility functions\r\n    class DOMUtils {\r\n      /**\r\n       * Create serializer with common presets\r\n       */\r\n      static createSerializer(preset = 'default') {\r\n        const presets = {\r\n          default: {\r\n            includeStyles: true,\r\n            includeScripts: false,\r\n            includeFrames: true,\r\n            includeShadowDOM: true\r\n          },\r\n          minimal: {\r\n            includeStyles: false,\r\n            includeScripts: false,\r\n            includeFrames: false,\r\n            includeShadowDOM: false\r\n          },\r\n          complete: {\r\n            includeStyles: true,\r\n            includeScripts: true,\r\n            includeFrames: true,\r\n            includeShadowDOM: true\r\n          },\r\n          secure: {\r\n            includeStyles: true,\r\n            includeScripts: false,\r\n            includeFrames: false,\r\n            includeShadowDOM: true\r\n          }\r\n        };\r\n    \r\n        return new DOMSerializer(presets[preset] || presets.default);\r\n      }\r\n    \r\n      /**\r\n       * Serialize DOM to JSON string\r\n       */\r\n      static serializeToJSON(element, options) {\r\n        const serializer = new DOMSerializer(options);\r\n        const serialized = serializer.serialize(element);\r\n        return JSON.stringify(serialized, null, 2);\r\n      }\r\n    \r\n      /**\r\n       * Deserialize from JSON string\r\n       */\r\n      static deserializeFromJSON(jsonString, targetDocument) {\r\n        const serialized = JSON.parse(jsonString);\r\n        const serializer = new DOMSerializer();\r\n        return serializer.deserialize(serialized, targetDocument);\r\n      }\r\n    \r\n      /**\r\n       * Clone DOM with full fidelity including Shadow DOM\r\n       */\r\n      static deepClone(element, options) {\r\n        const serializer = new DOMSerializer(options);\r\n        const serialized = serializer.serialize(element);\r\n        return serializer.deserialize(serialized, element.ownerDocument);\r\n      }\r\n    \r\n      /**\r\n       * Compare two DOM structures\r\n       */\r\n      static compare(element1, element2, options) {\r\n        const serializer = new DOMSerializer(options);\r\n        const serialized1 = serializer.serialize(element1);\r\n        const serialized2 = serializer.serialize(element2);\r\n        \r\n        return JSON.stringify(serialized1) === JSON.stringify(serialized2);\r\n      }\r\n    }\r\n    \r\n    /*\r\n    // Export for use\r\n    if (typeof module !== 'undefined' && module.exports) {\r\n      module.exports = { DOMSerializer, DOMUtils };\r\n    } else if (typeof window !== 'undefined') {\r\n      window.DOMSerializer = DOMSerializer;\r\n      window.DOMUtils = DOMUtils;\r\n    }\r\n    */\r\n\r\n    /* Usage Examples:\r\n    \r\n    // Basic serialization\r\n    const serializer = new DOMSerializer();\r\n    const serialized = serializer.serialize(document);\r\n    console.log(JSON.stringify(serialized, null, 2));\r\n    \r\n    // Deserialize back to DOM\r\n    const clonedDoc = serializer.deserialize(serialized);\r\n    \r\n    // Using presets\r\n    const minimalSerializer = DOMUtils.createSerializer('minimal');\r\n    const secureSerializer = DOMUtils.createSerializer('secure');\r\n    \r\n    // Serialize specific element with Shadow DOM\r\n    const customElement = document.querySelector('my-custom-element');\r\n    const serializedElement = serializer.serialize(customElement);\r\n    \r\n    // JSON utilities\r\n    const jsonString = DOMUtils.serializeToJSON(document.body);\r\n    const restored = DOMUtils.deserializeFromJSON(jsonString);\r\n    \r\n    // Deep clone with Shadow DOM support\r\n    const clone = DOMUtils.deepClone(document.body, { includeShadowDOM: true });\r\n    \r\n    */\r\n\r\n    function serializeNodeToJSON(nodeElement) {\r\n      return DOMUtils.serializeToJSON(nodeElement, {includeStyles: false});\r\n    }\r\n\r\n    function deserializeNodeFromJSON(jsonString) {\r\n      return DOMUtils.deserializeFromJSON(jsonString);\r\n    }\n\n  /**\r\n   * Checks if a point is inside a bounding box\r\n   * \r\n   * @param point The point to check\r\n   * @param box The bounding box\r\n   * @returns boolean indicating if the point is inside the box\r\n   */\r\n  function isPointInsideBox(point, box) {\r\n    return point.x >= box.x &&\r\n          point.x <= box.x + box.width &&\r\n          point.y >= box.y &&\r\n          point.y <= box.y + box.height;\r\n  }\r\n\r\n  /**\r\n   * Calculates the overlap area between two bounding boxes\r\n   * \r\n   * @param box1 First bounding box\r\n   * @param box2 Second bounding box\r\n   * @returns The overlap area\r\n   */\r\n  function calculateOverlap(box1, box2) {\r\n    const xOverlap = Math.max(0,\r\n      Math.min(box1.x + box1.width, box2.x + box2.width) -\r\n      Math.max(box1.x, box2.x)\r\n    );\r\n    const yOverlap = Math.max(0,\r\n      Math.min(box1.y + box1.height, box2.y + box2.height) -\r\n      Math.max(box1.y, box2.y)\r\n    );\r\n    return xOverlap * yOverlap;\r\n  }\r\n\r\n  /**\r\n   * Finds an exact match between candidate elements and the actual interaction element\r\n   * \r\n   * @param candidate_elements Array of candidate element infos\r\n   * @param actualInteractionElementInfo The actual interaction element info\r\n   * @returns The matching candidate element info, or null if no match is found\r\n   */\r\n  function findExactMatch(candidate_elements, actualInteractionElementInfo) {\r\n    if (!actualInteractionElementInfo.element) {\r\n      return null;\r\n    }\r\n\r\n    const exactMatch = candidate_elements.find(elementInfo => \r\n      elementInfo.element && elementInfo.element === actualInteractionElementInfo.element\r\n    );\r\n    \r\n    if (exactMatch) {\r\n      console.log('✅ Found exact element match:', {\r\n        matchedElement: exactMatch.element?.tagName,\r\n        matchedElementClass: exactMatch.element?.className,\r\n        index: exactMatch.index\r\n      });\r\n      return exactMatch;\r\n    }\r\n    \r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Finds a match by traversing up the parent elements\r\n   * \r\n   * @param candidate_elements Array of candidate element infos\r\n   * @param actualInteractionElementInfo The actual interaction element info\r\n   * @returns The matching candidate element info, or null if no match is found\r\n   */\r\n  function findParentMatch(candidate_elements, actualInteractionElementInfo) {\r\n    if (!actualInteractionElementInfo.element) {\r\n      return null;\r\n    }\r\n\r\n    let element = actualInteractionElementInfo.element;\r\n    while (element.parentElement) {\r\n      element = element.parentElement;\r\n      const parentMatch = candidate_elements.find(candidate => \r\n        candidate.element && candidate.element === element\r\n      );\r\n      \r\n      if (parentMatch) {\r\n        console.log('✅ Found parent element match:', {\r\n          matchedElement: parentMatch.element?.tagName,\r\n          matchedElementClass: parentMatch.element?.className,\r\n          index: parentMatch.index,\r\n          depth: element.tagName\r\n        });\r\n        return parentMatch;\r\n      }\r\n      \r\n      // Stop if we hit another candidate element\r\n      if (candidate_elements.some(candidate => \r\n        candidate.element && candidate.element === element\r\n      )) {\r\n        console.log('⚠️ Stopped parent search - hit another candidate element:', element.tagName);\r\n        break;\r\n      }\r\n    }\r\n    \r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Finds a match based on spatial relationships between elements\r\n   * \r\n   * @param candidate_elements Array of candidate element infos\r\n   * @param actualInteractionElementInfo The actual interaction element info\r\n   * @returns The matching candidate element info, or null if no match is found\r\n   */\r\n  function findSpatialMatch(candidate_elements, actualInteractionElementInfo) {\r\n    if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\r\n      return null;\r\n    }\r\n\r\n    const actualBox = actualInteractionElementInfo.bounding_box;\r\n    let bestMatch = null;\r\n    let bestScore = 0;\r\n\r\n    for (const candidateInfo of candidate_elements) {\r\n      if (!candidateInfo.bounding_box) continue;\r\n      \r\n      const candidateBox = candidateInfo.bounding_box;\r\n      let score = 0;\r\n\r\n      // Check if actual element is contained within candidate\r\n      if (isPointInsideBox({ x: actualBox.x, y: actualBox.y }, candidateBox) &&\r\n          isPointInsideBox({ x: actualBox.x + actualBox.width, y: actualBox.y + actualBox.height }, candidateBox)) {\r\n        score += 100; // High score for containment\r\n      }\r\n\r\n      // Calculate overlap area as a factor\r\n      const overlap = calculateOverlap(actualBox, candidateBox);\r\n      score += overlap;\r\n\r\n      // Consider proximity if no containment\r\n      if (score === 0) {\r\n        const distance = Math.sqrt(\r\n          Math.pow((actualBox.x + actualBox.width/2) - (candidateBox.x + candidateBox.width/2), 2) +\r\n          Math.pow((actualBox.y + actualBox.height/2) - (candidateBox.y + candidateBox.height/2), 2)\r\n        );\r\n        // Convert distance to a score (closer = higher score)\r\n        score = 1000 / (distance + 1);\r\n      }\r\n\r\n      if (score > bestScore) {\r\n        bestScore = score;\r\n        bestMatch = candidateInfo;\r\n        console.log('📏 New best spatial match:', {\r\n          element: candidateInfo.element?.tagName,\r\n          class: candidateInfo.element?.className,\r\n          index: candidateInfo.index,\r\n          score: score\r\n        });\r\n      }\r\n    }\r\n\r\n    if (bestMatch) {\r\n      console.log('✅ Final spatial match selected:', {\r\n      element: bestMatch.element?.tagName,\r\n      class: bestMatch.element?.className,\r\n      index: bestMatch.index,\r\n      finalScore: bestScore\r\n    });\r\n    return bestMatch;\r\n  }\r\n\r\n  return null;\r\n  }\r\n\r\n  /**\r\n   * Finds a matching candidate element for an actual interaction element\r\n   * \r\n   * @param candidate_elements Array of candidate element infos\r\n   * @param actualInteractionElementInfo The actual interaction element info\r\n   * @returns The matching candidate element info, or null if no match is found\r\n   */\r\n  function findMatchingCandidateElementInfo(candidate_elements, actualInteractionElementInfo) {\r\n    if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\r\n      console.error('❌ Missing required properties in actualInteractionElementInfo');\r\n      return null;\r\n    }\r\n\r\n    console.log('🔍 Starting element matching for:', {\r\n      clickedElement: actualInteractionElementInfo.element.tagName,\r\n      clickedElementClass: actualInteractionElementInfo.element.className,\r\n      totalCandidates: candidate_elements.length\r\n    });\r\n\r\n    // First try exact element match\r\n    const exactMatch = findExactMatch(candidate_elements, actualInteractionElementInfo);\r\n    if (exactMatch) {\r\n      return exactMatch;\r\n    }\r\n    console.log('❌ No exact element match found, trying parent matching...');\r\n\r\n    // Try finding closest clickable parent\r\n    const parentMatch = findParentMatch(candidate_elements, actualInteractionElementInfo);\r\n    if (parentMatch) {\r\n      return parentMatch;\r\n    }\r\n    console.log('❌ No parent match found, falling back to spatial matching...');\r\n\r\n    // If no exact or parent match, look for spatial relationships\r\n    const spatialMatch = findSpatialMatch(candidate_elements, actualInteractionElementInfo);\r\n    if (spatialMatch) {\r\n      return spatialMatch;\r\n    }\r\n\r\n    console.error('❌ No matching element found for actual interaction element:', actualInteractionElementInfo);\r\n    return null;\r\n  }\n\n  const highlight = {\r\n    execute: async function(elementTypes, handleScroll=false) {\r\n      const elements = await findElements(elementTypes);\r\n      highlightElements(elements, handleScroll);\r\n      return elements;\r\n    },\r\n\r\n    unexecute: function(handleScroll=false) {\r\n      unhighlightElements(handleScroll);\r\n    },\r\n\r\n    generateJSON: async function() {\r\n      const json = {};\r\n\r\n     // Capture viewport dimensions\r\n     const viewportData = {\r\n      width: window.innerWidth,\r\n      height: window.innerHeight,\r\n      documentWidth: document.documentElement.clientWidth,\r\n      documentHeight: document.documentElement.clientHeight,\r\n      timestamp: new Date().toISOString()\r\n    };\r\n\r\n      // Add viewport data to the JSON output\r\n      json.viewport = viewportData;\r\n\r\n\r\n      await Promise.all(Object.values(ElementTag).map(async elementType => {\r\n        const elements = await findElements(elementType);\r\n        json[elementType] = elements;\r\n      }));\r\n\r\n      // Serialize the JSON object\r\n      const jsonString = JSON.stringify(json, null, 4); // Pretty print with 4 spaces\r\n\r\n      console.log(`JSON: ${jsonString}`);\r\n      return jsonString;\r\n    },\r\n\r\n    getElementInfo\r\n  };\r\n\r\n\r\n  function unhighlightElements(handleScroll=false) {\r\n    const documents = getAllFrames();\r\n    documents.forEach(doc => {\r\n      const overlay = doc.getElementById('highlight-overlay');\r\n      if (overlay) {\r\n        if (handleScroll) {\r\n          // Remove event listeners\r\n          doc.removeEventListener('scroll', overlay.scrollHandler, true);\r\n          doc.removeEventListener('resize', overlay.resizeHandler);\r\n        }\r\n        overlay.remove();\r\n      }\r\n    });\r\n  }\r\n\r\n\r\n\r\n\r\n  async function findElements(elementTypes, verbose=true) {\r\n    const typesArray = Array.isArray(elementTypes) ? elementTypes : [elementTypes];\r\n    console.log('Starting element search for types:', typesArray);\r\n\r\n    const elements = [];\r\n    typesArray.forEach(elementType => {\r\n      if (elementType === ElementTag.FILLABLE) {\r\n        elements.push(...findFillables());\r\n      }\r\n      if (elementType === ElementTag.SELECTABLE) {\r\n        elements.push(...findDropdowns());\r\n      }\r\n      if (elementType === ElementTag.CLICKABLE) {\r\n        elements.push(...findClickables());\r\n        elements.push(...findToggles());\r\n        elements.push(...findCheckables());\r\n      }\r\n      if (elementType === ElementTag.NON_INTERACTIVE_ELEMENT) {\r\n        elements.push(...findNonInteractiveElements());\r\n      }\r\n    });\r\n\r\n    // console.log('Before uniquify:', elements.length);\r\n    const elementsWithInfo = elements.map((element, index) => \r\n      getElementInfo(element, index)\r\n    );\r\n\r\n    \r\n    \r\n    const uniqueElements = uniquifyElements(elementsWithInfo);\r\n    console.log(`Found ${uniqueElements.length} elements:`);\r\n    \r\n    // More comprehensive visibility check\r\n    const visibleElements = uniqueElements.filter(elementInfo => {\r\n      const el = elementInfo.element;\r\n      const style = getComputedStyle(el);\r\n      \r\n      // Check various style properties that affect visibility\r\n      if (style.display === 'none' || \r\n          style.visibility === 'hidden') {\r\n        return false;\r\n      }\r\n      \r\n      // Check if element has non-zero dimensions\r\n      const rect = el.getBoundingClientRect();\r\n      if (rect.width === 0 || rect.height === 0) {\r\n        return false;\r\n      }\r\n      \r\n      // Check if element is within viewport\r\n      if (rect.bottom < 0 || \r\n          rect.top > window.innerHeight || \r\n          rect.right < 0 || \r\n          rect.left > window.innerWidth) {\r\n        // Element is outside viewport, but still might be valid \r\n        // if user scrolls to it, so we'll include it\r\n        return true;\r\n      }\r\n      \r\n      return true;\r\n    });\r\n    \r\n    console.log(`Out of which ${visibleElements.length} elements are visible:`);\r\n    if (verbose) {\r\n      visibleElements.forEach(info => {\r\n        console.log(`Element ${info.index}:`, info);\r\n      });\r\n    }\r\n    \r\n    return visibleElements;\r\n  }\r\n\r\n  // elements is an array of objects with index, xpath\r\n  function highlightElements(elements, handleScroll=false) {\r\n    // console.log('[highlightElements] called with', elements.length, 'elements');\r\n    // Create overlay if it doesn't exist and store it in a dictionary\r\n    const documents = getAllFrames();  \r\n    let overlays = {};\r\n    documents.forEach(doc => {\r\n      let overlay = doc.getElementById('highlight-overlay');\r\n      if (!overlay) {\r\n        overlay = doc.createElement('div');\r\n        overlay.id = 'highlight-overlay';\r\n        overlay.style.cssText = `\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        pointer-events: none;\r\n        z-index: 2147483647;\r\n      `;\r\n        doc.body.appendChild(overlay);\r\n        // console.log('[highlightElements] Created overlay in document:', doc);\r\n      }\r\n      overlays[doc.documentURI] = overlay;\r\n    });\r\n    \r\n\r\n    const updateHighlights = (doc = null) => {\r\n      if (doc) {\r\n        overlays[doc.documentURI].innerHTML = '';\r\n      } else {\r\n        Object.values(overlays).forEach(overlay => { overlay.innerHTML = ''; });\r\n      }    \r\n      elements.forEach((elementInfo, idx) => {\r\n        //console.log(`[highlightElements] Processing element ${idx}:`, elementInfo.tag, elementInfo.css_selector, elementInfo.bounding_box);\r\n        let element = elementInfo.element; //getElementByXPathOrCssSelector(elementInfo);\r\n        if (!element) {\r\n          element = getElementByXPathOrCssSelector(elementInfo);\r\n          if (!element) {\r\n            console.warn('[highlightElements] Could not find element for:', elementInfo);\r\n            return;\r\n          }\r\n        }\r\n        //if highlights requested for a specific doc, skip unrelated elements\r\n        if (doc && element.ownerDocument !== doc) {\r\n          console.log(\"[highlightElements] Skipped element since it doesn't belong to document\", doc);\r\n          return;\r\n        }\r\n        const rect = element.getBoundingClientRect();\r\n        if (rect.width === 0 || rect.height === 0) {\r\n          console.warn('[highlightElements] Element has zero dimensions:', elementInfo);\r\n          return;\r\n        }\r\n        // Create border highlight (red rectangle)\r\n        // use ownerDocument to support iframes/frames\r\n        const highlight = element.ownerDocument.createElement('div');\r\n        highlight.style.cssText = `\r\n        position: fixed;\r\n        left: ${rect.x}px;\r\n        top: ${rect.y}px;\r\n        width: ${rect.width}px;\r\n        height: ${rect.height}px;\r\n        border: 1px solid rgb(255, 0, 0);\r\n        transition: all 0.2s ease-in-out;\r\n      `;\r\n        // Create index label container - now positioned to the right and slightly up\r\n        const labelContainer = element.ownerDocument.createElement('div');\r\n        labelContainer.style.cssText = `\r\n        position: absolute;\r\n        right: -10px;     /* Offset to the right */\r\n        top: -10px;       /* Offset upwards */\r\n        padding: 4px;\r\n        background-color: rgba(255, 255, 0, 0.6);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n      `;\r\n        const text = element.ownerDocument.createElement('span');\r\n        text.style.cssText = `\r\n        color: rgb(0, 0, 0, 0.8);\r\n        font-family: 'Courier New', Courier, monospace;\r\n        font-size: 12px;\r\n        font-weight: bold;\r\n        line-height: 1;\r\n      `;\r\n        text.textContent = elementInfo.index;\r\n        labelContainer.appendChild(text);\r\n        highlight.appendChild(labelContainer);      \r\n        overlays[element.ownerDocument.documentURI].appendChild(highlight);\r\n        \r\n      });\r\n    };\r\n\r\n    // Initial highlight\r\n    updateHighlights();\r\n\r\n    if (handleScroll) {\r\n      documents.forEach(doc => {\r\n        // Update highlights on scroll and resize\r\n        console.log('registering scroll and resize handlers for document: ', doc);\r\n        const scrollHandler = () => {\r\n          requestAnimationFrame(() => updateHighlights(doc));\r\n        };\r\n        const resizeHandler = () => {\r\n          updateHighlights(doc);\r\n        };\r\n        doc.addEventListener('scroll', scrollHandler, true);\r\n        doc.addEventListener('resize', resizeHandler);\r\n        // Store event handlers for cleanup\r\n        overlays[doc.documentURI].scrollHandler = scrollHandler;\r\n        overlays[doc.documentURI].resizeHandler = resizeHandler;\r\n      });    \r\n    }\r\n  }\r\n\r\n  // function unexecute() {\r\n  //   unhighlightElements();\r\n  // }\r\n\r\n  // Make it available globally for both Extension and Playwright\r\n  if (typeof window !== 'undefined') {\r\n    function stripElementRefs(elementInfo) {\r\n      if (!elementInfo) return null;\r\n      const { element, ...rest } = elementInfo;\r\n      return rest;\r\n    }\r\n\r\n    window.ProboLabs = window.ProboLabs || {};\r\n\r\n    // --- Caching State ---\r\n    window.ProboLabs.candidates = [];\r\n    window.ProboLabs.actual = null;\r\n    window.ProboLabs.matchingCandidate = null;\r\n\r\n    // --- Methods ---\r\n    /**\r\n     * Find and cache candidate elements of a given type (e.g., 'CLICKABLE').\r\n     * NOTE: This function is async and must be awaited from Playwright/Node.\r\n     */\r\n    window.ProboLabs.findAndCacheCandidateElements = async function(elementType) {\r\n      //console.log('[ProboLabs] findAndCacheCandidateElements called with:', elementType);\r\n      const found = await findElements(elementType);\r\n      window.ProboLabs.candidates = found;\r\n      // console.log('[ProboLabs] candidates set to:', found, 'type:', typeof found, 'isArray:', Array.isArray(found));\r\n      return found.length;\r\n    };\r\n\r\n    window.ProboLabs.findAndCacheActualElement = function(cssSelector, iframeSelector, isHover=false) {\r\n      // console.log('[ProboLabs] findAndCacheActualElement called with:', cssSelector, iframeSelector);\r\n      let el = findElement(document, iframeSelector, cssSelector);\r\n      if(isHover) {\r\n        const visibleElement = findClosestVisibleElement(el);\r\n        if (visibleElement) {\r\n          el = visibleElement;\r\n        }\r\n      }\r\n      if (!el) {\r\n        window.ProboLabs.actual = null;\r\n        // console.log('[ProboLabs] actual set to null');\r\n        return false;\r\n      }\r\n      window.ProboLabs.actual = getElementInfo(el, -1);\r\n      // console.log('[ProboLabs] actual set to:', window.ProboLabs.actual);\r\n      return true;\r\n    };\r\n\r\n    window.ProboLabs.findAndCacheMatchingCandidate = function() {\r\n      // console.log('[ProboLabs] findAndCacheMatchingCandidate called');\r\n      if (!window.ProboLabs.candidates.length || !window.ProboLabs.actual) {\r\n        window.ProboLabs.matchingCandidate = null;\r\n        // console.log('[ProboLabs] matchingCandidate set to null');\r\n        return false;\r\n      }\r\n      window.ProboLabs.matchingCandidate = findMatchingCandidateElementInfo(window.ProboLabs.candidates, window.ProboLabs.actual);\r\n      // console.log('[ProboLabs] matchingCandidate set to:', window.ProboLabs.matchingCandidate);\r\n      return !!window.ProboLabs.matchingCandidate;\r\n    };\r\n\r\n    window.ProboLabs.highlightCachedElements = function(which) {\r\n      let elements = [];\r\n      if (which === 'candidates') elements = window.ProboLabs.candidates;\r\n      if (which === 'actual' && window.ProboLabs.actual) elements = [window.ProboLabs.actual];\r\n      if (which === 'matching' && window.ProboLabs.matchingCandidate) elements = [window.ProboLabs.matchingCandidate];\r\n      console.log(`[ProboLabs] highlightCachedElements ${which} with ${elements.length} elements`);\r\n      highlightElements(elements);\r\n    };\r\n\r\n    window.ProboLabs.unhighlight = function() {\r\n      // console.log('[ProboLabs] unhighlight called');\r\n      unhighlightElements();\r\n    };\r\n\r\n    window.ProboLabs.reset = function() {\r\n      console.log('[ProboLabs] reset called');\r\n      window.ProboLabs.candidates = [];\r\n      window.ProboLabs.actual = null;\r\n      window.ProboLabs.matchingCandidate = null;\r\n      unhighlightElements();\r\n    };\r\n\r\n    window.ProboLabs.getCandidates = function() {\r\n      // console.log('[ProboLabs] getCandidates called. candidates:', window.ProboLabs.candidates, 'type:', typeof window.ProboLabs.candidates, 'isArray:', Array.isArray(window.ProboLabs.candidates));\r\n      const arr = Array.isArray(window.ProboLabs.candidates) ? window.ProboLabs.candidates : [];\r\n      return arr.map(stripElementRefs);\r\n    };\r\n    window.ProboLabs.getActual = function() {\r\n      return stripElementRefs(window.ProboLabs.actual);\r\n    };\r\n    window.ProboLabs.getMatchingCandidate = function() {\r\n      return stripElementRefs(window.ProboLabs.matchingCandidate);\r\n    };\r\n\r\n    // Retain existing API for backward compatibility\r\n    window.ProboLabs.ElementTag = ElementTag;\r\n    window.ProboLabs.highlightElements = highlightElements;\r\n    window.ProboLabs.unhighlightElements = unhighlightElements;\r\n    window.ProboLabs.findElements = findElements;\r\n    window.ProboLabs.getElementInfo = getElementInfo;\r\n    window.ProboLabs.highlight = window.ProboLabs.highlight;\r\n    window.ProboLabs.unhighlight = window.ProboLabs.unhighlight;\r\n\r\n    // --- Utility Functions ---\r\n    function findClosestVisibleElement(element) {\r\n      let current = element;\r\n      while (current) {\r\n        const style = window.getComputedStyle(current);\r\n        if (\r\n          style &&\r\n          style.display !== 'none' &&\r\n          style.visibility !== 'hidden' &&\r\n          current.offsetWidth > 0 &&\r\n          current.offsetHeight > 0\r\n        ) {\r\n          return current;\r\n        }\r\n        if (!current.parentElement || current === document.body) break;\r\n        current = current.parentElement;\r\n      }\r\n      return null;\r\n    }\r\n  }\n\n  exports.ElementInfo = ElementInfo;\n  exports.ElementTag = ElementTag;\n  exports.deserializeNodeFromJSON = deserializeNodeFromJSON;\n  exports.findElement = findElement;\n  exports.findElements = findElements;\n  exports.generateCssPath = generateCssPath;\n  exports.getAriaLabelledByText = getAriaLabelledByText;\n  exports.getContainingIframe = getContainingIframe;\n  exports.getElementInfo = getElementInfo;\n  exports.getRobustSelector = getRobustSelector;\n  exports.highlight = highlight;\n  exports.highlightElements = highlightElements;\n  exports.serializeNodeToJSON = serializeNodeToJSON;\n  exports.unhighlightElements = unhighlightElements;\n\n}));\n//# sourceMappingURL=probolabs.umd.js.map\n";
+const highlighterCode = "(function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :\n  typeof define === 'function' && define.amd ? define(['exports'], factory) :\n  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ProboLabs = {}));\n})(this, (function (exports) { 'use strict';\n\n  const ElementTag = {\r\n    CLICKABLE: \"CLICKABLE\", // button, link, toggle switch, checkbox, radio, dropdowns, clickable divs\r\n    FILLABLE: \"FILLABLE\", // input, textarea content_editable, date picker??\r\n    SELECTABLE: \"SELECTABLE\", // select\r\n    NON_INTERACTIVE_ELEMENT: 'NON_INTERACTIVE_ELEMENT',\r\n  };\r\n\r\n  class ElementInfo {\r\n    constructor(element, index, {tag, type, text, html, xpath, css_selector, bounding_box, iframe_selector, short_css_selector, short_iframe_selector}) {\r\n      this.index = index.toString();\r\n      this.tag = tag;\r\n      this.type = type;\r\n      this.text = text;\r\n      this.html = html;\r\n      this.xpath = xpath;\r\n      this.css_selector = css_selector;\r\n      this.bounding_box = bounding_box;\r\n      this.iframe_selector = iframe_selector;\r\n      this.element = element;\r\n      this.depth = -1;\r\n      this.short_css_selector = short_css_selector;\r\n      this.short_iframe_selector = short_iframe_selector;\r\n    }\r\n\r\n    getSelector() {\r\n      return this.xpath ? this.xpath : this.css_selector;\r\n    }\r\n\r\n    getDepth() {\r\n      if (this.depth >= 0) {\r\n        return this.depth;\r\n      }\r\n      \r\n      this.depth = 0;\r\n      let currentElement = this.element;\r\n      \r\n      while (currentElement.nodeType === Node.ELEMENT_NODE) {          \r\n        this.depth++;\r\n        if (currentElement.assignedSlot) {\r\n          currentElement = currentElement.assignedSlot;\r\n        }\r\n        else {\r\n          currentElement = currentElement.parentNode;\r\n          // Check if we're at a shadow root\r\n          if (currentElement && currentElement.nodeType !== Node.ELEMENT_NODE && currentElement.getRootNode() instanceof ShadowRoot) {\r\n            // Get the shadow root's host element\r\n            currentElement = currentElement.getRootNode().host;     \r\n          }\r\n        }\r\n      }\r\n          \r\n      return this.depth;\r\n    }\r\n  }\n\n  // License: MIT\n  // Author: Anton Medvedev <anton@medv.io>\n  // Source: https://github.com/antonmedv/finder\n  const acceptedAttrNames = new Set(['role', 'name', 'aria-label', 'rel', 'href']);\n  /** Check if attribute name and value are word-like. */\n  function attr(name, value) {\n      let nameIsOk = acceptedAttrNames.has(name);\n      nameIsOk ||= name.startsWith('data-') && wordLike(name);\n      let valueIsOk = wordLike(value) && value.length < 100;\n      valueIsOk ||= value.startsWith('#') && wordLike(value.slice(1));\n      return nameIsOk && valueIsOk;\n  }\n  /** Check if id name is word-like. */\n  function idName(name) {\n      return wordLike(name);\n  }\n  /** Check if class name is word-like. */\n  function className(name) {\n      return wordLike(name);\n  }\n  /** Check if tag name is word-like. */\n  function tagName(name) {\n      return true;\n  }\n  /** Finds unique CSS selectors for the given element. */\n  function finder(input, options) {\n      if (input.nodeType !== Node.ELEMENT_NODE) {\n          throw new Error(`Can't generate CSS selector for non-element node type.`);\n      }\n      if (input.tagName.toLowerCase() === 'html') {\n          return 'html';\n      }\n      const defaults = {\n          root: document.body,\n          idName: idName,\n          className: className,\n          tagName: tagName,\n          attr: attr,\n          timeoutMs: 1000,\n          seedMinLength: 3,\n          optimizedMinLength: 2,\n          maxNumberOfPathChecks: Infinity,\n      };\n      const startTime = new Date();\n      const config = { ...defaults, ...options };\n      const rootDocument = findRootDocument(config.root, defaults);\n      let foundPath;\n      let count = 0;\n      for (const candidate of search(input, config, rootDocument)) {\n          const elapsedTimeMs = new Date().getTime() - startTime.getTime();\n          if (elapsedTimeMs > config.timeoutMs ||\n              count >= config.maxNumberOfPathChecks) {\n              const fPath = fallback(input, rootDocument);\n              if (!fPath) {\n                  throw new Error(`Timeout: Can't find a unique selector after ${config.timeoutMs}ms`);\n              }\n              return selector(fPath);\n          }\n          count++;\n          if (unique(candidate, rootDocument)) {\n              foundPath = candidate;\n              break;\n          }\n      }\n      if (!foundPath) {\n          throw new Error(`Selector was not found.`);\n      }\n      const optimized = [\n          ...optimize(foundPath, input, config, rootDocument, startTime),\n      ];\n      optimized.sort(byPenalty);\n      if (optimized.length > 0) {\n          return selector(optimized[0]);\n      }\n      return selector(foundPath);\n  }\n  function* search(input, config, rootDocument) {\n      const stack = [];\n      let paths = [];\n      let current = input;\n      let i = 0;\n      while (current && current !== rootDocument) {\n          const level = tie(current, config);\n          for (const node of level) {\n              node.level = i;\n          }\n          stack.push(level);\n          current = current.parentElement;\n          i++;\n          paths.push(...combinations(stack));\n          if (i >= config.seedMinLength) {\n              paths.sort(byPenalty);\n              for (const candidate of paths) {\n                  yield candidate;\n              }\n              paths = [];\n          }\n      }\n      paths.sort(byPenalty);\n      for (const candidate of paths) {\n          yield candidate;\n      }\n  }\n  function wordLike(name) {\n      if (/^[a-z\\-]{3,}$/i.test(name)) {\n          const words = name.split(/-|[A-Z]/);\n          for (const word of words) {\n              if (word.length <= 2) {\n                  return false;\n              }\n              if (/[^aeiou]{4,}/i.test(word)) {\n                  return false;\n              }\n          }\n          return true;\n      }\n      return false;\n  }\n  function tie(element, config) {\n      const level = [];\n      const elementId = element.getAttribute('id');\n      if (elementId && config.idName(elementId)) {\n          level.push({\n              name: '#' + CSS.escape(elementId),\n              penalty: 0,\n          });\n      }\n      for (let i = 0; i < element.classList.length; i++) {\n          const name = element.classList[i];\n          if (config.className(name)) {\n              level.push({\n                  name: '.' + CSS.escape(name),\n                  penalty: 1,\n              });\n          }\n      }\n      for (let i = 0; i < element.attributes.length; i++) {\n          const attr = element.attributes[i];\n          if (config.attr(attr.name, attr.value)) {\n              level.push({\n                  name: `[${CSS.escape(attr.name)}=\"${CSS.escape(attr.value)}\"]`,\n                  penalty: 2,\n              });\n          }\n      }\n      const tagName = element.tagName.toLowerCase();\n      if (config.tagName(tagName)) {\n          level.push({\n              name: tagName,\n              penalty: 5,\n          });\n          const index = indexOf(element, tagName);\n          if (index !== undefined) {\n              level.push({\n                  name: nthOfType(tagName, index),\n                  penalty: 10,\n              });\n          }\n      }\n      const nth = indexOf(element);\n      if (nth !== undefined) {\n          level.push({\n              name: nthChild(tagName, nth),\n              penalty: 50,\n          });\n      }\n      return level;\n  }\n  function selector(path) {\n      let node = path[0];\n      let query = node.name;\n      for (let i = 1; i < path.length; i++) {\n          const level = path[i].level || 0;\n          if (node.level === level - 1) {\n              query = `${path[i].name} > ${query}`;\n          }\n          else {\n              query = `${path[i].name} ${query}`;\n          }\n          node = path[i];\n      }\n      return query;\n  }\n  function penalty(path) {\n      return path.map((node) => node.penalty).reduce((acc, i) => acc + i, 0);\n  }\n  function byPenalty(a, b) {\n      return penalty(a) - penalty(b);\n  }\n  function indexOf(input, tagName) {\n      const parent = input.parentNode;\n      if (!parent) {\n          return undefined;\n      }\n      let child = parent.firstChild;\n      if (!child) {\n          return undefined;\n      }\n      let i = 0;\n      while (child) {\n          if (child.nodeType === Node.ELEMENT_NODE &&\n              (tagName === undefined ||\n                  child.tagName.toLowerCase() === tagName)) {\n              i++;\n          }\n          if (child === input) {\n              break;\n          }\n          child = child.nextSibling;\n      }\n      return i;\n  }\n  function fallback(input, rootDocument) {\n      let i = 0;\n      let current = input;\n      const path = [];\n      while (current && current !== rootDocument) {\n          const tagName = current.tagName.toLowerCase();\n          const index = indexOf(current, tagName);\n          if (index === undefined) {\n              return;\n          }\n          path.push({\n              name: nthOfType(tagName, index),\n              penalty: NaN,\n              level: i,\n          });\n          current = current.parentElement;\n          i++;\n      }\n      if (unique(path, rootDocument)) {\n          return path;\n      }\n  }\n  function nthChild(tagName, index) {\n      if (tagName === 'html') {\n          return 'html';\n      }\n      return `${tagName}:nth-child(${index})`;\n  }\n  function nthOfType(tagName, index) {\n      if (tagName === 'html') {\n          return 'html';\n      }\n      return `${tagName}:nth-of-type(${index})`;\n  }\n  function* combinations(stack, path = []) {\n      if (stack.length > 0) {\n          for (let node of stack[0]) {\n              yield* combinations(stack.slice(1, stack.length), path.concat(node));\n          }\n      }\n      else {\n          yield path;\n      }\n  }\n  function findRootDocument(rootNode, defaults) {\n      if (rootNode.nodeType === Node.DOCUMENT_NODE) {\n          return rootNode;\n      }\n      if (rootNode === defaults.root) {\n          return rootNode.ownerDocument;\n      }\n      return rootNode;\n  }\n  function unique(path, rootDocument) {\n      const css = selector(path);\n      switch (rootDocument.querySelectorAll(css).length) {\n          case 0:\n              throw new Error(`Can't select any node with this selector: ${css}`);\n          case 1:\n              return true;\n          default:\n              return false;\n      }\n  }\n  function* optimize(path, input, config, rootDocument, startTime) {\n      if (path.length > 2 && path.length > config.optimizedMinLength) {\n          for (let i = 1; i < path.length - 1; i++) {\n              const elapsedTimeMs = new Date().getTime() - startTime.getTime();\n              if (elapsedTimeMs > config.timeoutMs) {\n                  return;\n              }\n              const newPath = [...path];\n              newPath.splice(i, 1);\n              if (unique(newPath, rootDocument) &&\n                  rootDocument.querySelector(selector(newPath)) === input) {\n                  yield newPath;\n                  yield* optimize(newPath, input, config, rootDocument, startTime);\n              }\n          }\n      }\n  }\n\n  // import { realpath } from \"fs\";\r\n\r\n  function getAllDocumentElementsIncludingShadow(selectors, root = document) {\r\n    const elements = Array.from(root.querySelectorAll(selectors));\r\n\r\n    root.querySelectorAll('*').forEach(el => {\r\n        if (el.shadowRoot) {\r\n            elements.push(...getAllDocumentElementsIncludingShadow(selectors, el.shadowRoot));\r\n        }\r\n    });\r\n    return elements;\r\n  }\r\n\r\n  function getAllFrames(root = document) {\r\n    const result = [root];\r\n    const frames = getAllDocumentElementsIncludingShadow('frame, iframe', root);  \r\n    frames.forEach(frame => {\r\n        try {\r\n            const frameDocument = frame.contentDocument || frame.contentWindow.document;\r\n            if (frameDocument) {\r\n                result.push(frameDocument);\r\n            }\r\n        } catch (e) {\r\n            // Skip cross-origin frames\r\n            console.warn('Could not access frame content:', e.message);\r\n        }\r\n    });\r\n\r\n    return result;\r\n  }\r\n\r\n  function getAllElementsIncludingShadow(selectors, root = document) {\r\n    const elements = [];\r\n\r\n    getAllFrames(root).forEach(doc => {\r\n      elements.push(...getAllDocumentElementsIncludingShadow(selectors, doc));\r\n    });\r\n\r\n    return elements;\r\n  }\r\n\r\n  /**\r\n   * Deeply searches through DOM trees including Shadow DOM and frames/iframes\r\n   * @param {string} selector - CSS selector to search for\r\n   * @param {Document|Element} [root=document] - Starting point for the search\r\n   * @param {Object} [options] - Search options\r\n   * @param {boolean} [options.searchShadow=true] - Whether to search Shadow DOM\r\n   * @param {boolean} [options.searchFrames=true] - Whether to search frames/iframes\r\n   * @returns {Element[]} Array of found elements\r\n   \r\n  function getAllElementsIncludingShadow(selector, root = document, options = {}) {\r\n    const {\r\n        searchShadow = true,\r\n        searchFrames = true\r\n    } = options;\r\n\r\n    const results = new Set();\r\n    \r\n    // Helper to check if an element is valid and not yet found\r\n    const addIfValid = (element) => {\r\n        if (element && !results.has(element)) {\r\n            results.add(element);\r\n        }\r\n    };\r\n\r\n    // Helper to process a single document or element\r\n    function processNode(node) {\r\n        // Search regular DOM\r\n        node.querySelectorAll(selector).forEach(addIfValid);\r\n\r\n        if (searchShadow) {\r\n            // Search all shadow roots\r\n            const treeWalker = document.createTreeWalker(\r\n                node,\r\n                NodeFilter.SHOW_ELEMENT,\r\n                {\r\n                    acceptNode: (element) => {\r\n                        return element.shadowRoot ? \r\n                            NodeFilter.FILTER_ACCEPT : \r\n                            NodeFilter.FILTER_SKIP;\r\n                    }\r\n                }\r\n            );\r\n\r\n            while (treeWalker.nextNode()) {\r\n                const element = treeWalker.currentNode;\r\n                if (element.shadowRoot) {\r\n                    // Search within shadow root\r\n                    element.shadowRoot.querySelectorAll(selector).forEach(addIfValid);\r\n                    // Recursively process the shadow root for nested shadow DOMs\r\n                    processNode(element.shadowRoot);\r\n                }\r\n            }\r\n        }\r\n\r\n        if (searchFrames) {\r\n            // Search frames and iframes\r\n            const frames = node.querySelectorAll('frame, iframe');\r\n            frames.forEach(frame => {\r\n                try {\r\n                    const frameDocument = frame.contentDocument;\r\n                    if (frameDocument) {\r\n                        processNode(frameDocument);\r\n                    }\r\n                } catch (e) {\r\n                    // Skip cross-origin frames\r\n                    console.warn('Could not access frame content:', e.message);\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    // Start processing from the root\r\n    processNode(root);\r\n\r\n    return Array.from(results);\r\n  }\r\n  */\r\n  // <div x=1 y=2 role='combobox'> </div>\r\n  function findDropdowns() {\r\n    const dropdowns = [];\r\n    \r\n    // Native select elements\r\n    dropdowns.push(...getAllElementsIncludingShadow('select'));\r\n    \r\n    // Elements with dropdown roles that don't have <input>..</input>\r\n    const roleElements = getAllElementsIncludingShadow('[role=\"combobox\"], [role=\"listbox\"], [role=\"dropdown\"], [role=\"option\"], [role=\"menu\"], [role=\"menuitem\"]').filter(el => {\r\n      return el.tagName.toLowerCase() !== 'input' || ![\"button\", \"checkbox\", \"radio\"].includes(el.getAttribute(\"type\"));\r\n    });\r\n    dropdowns.push(...roleElements);\r\n    \r\n    // Common dropdown class patterns\r\n    const dropdownPattern = /.*(dropdown|select|combobox|menu).*/i;\r\n    const elements = getAllElementsIncludingShadow('*');\r\n    const dropdownClasses = Array.from(elements).filter(el => {\r\n      const hasDropdownClass = dropdownPattern.test(el.className);\r\n      const validTag = ['li', 'ul', 'span', 'div', 'p', 'a', 'button'].includes(el.tagName.toLowerCase());\r\n      const style = window.getComputedStyle(el); \r\n      const result = hasDropdownClass && validTag && (style.cursor === 'pointer' || el.tagName.toLowerCase() === 'a' || el.tagName.toLowerCase() === 'button');\r\n      return result;\r\n    });\r\n    \r\n    dropdowns.push(...dropdownClasses);\r\n    \r\n    // Elements with aria-haspopup attribute\r\n    dropdowns.push(...getAllElementsIncludingShadow('[aria-haspopup=\"true\"], [aria-haspopup=\"listbox\"], [aria-haspopup=\"menu\"]'));\r\n\r\n    // Improve navigation element detection\r\n    // Semantic nav elements with list items\r\n    dropdowns.push(...getAllElementsIncludingShadow('nav ul li, nav ol li'));\r\n    \r\n    // Navigation elements in common design patterns\r\n    dropdowns.push(...getAllElementsIncludingShadow('header a, .header a, .nav a, .navigation a, .menu a, .sidebar a, aside a'));\r\n    \r\n    // Elements in primary navigation areas with common attributes\r\n    dropdowns.push(...getAllElementsIncludingShadow('[role=\"navigation\"] a, [aria-label*=\"navigation\"] a, [aria-label*=\"menu\"] a'));\r\n\r\n    return dropdowns;\r\n  }\r\n\r\n  function findClickables() {\r\n    const clickables = [];\r\n    \r\n    const checkboxPattern = /checkbox/i;\r\n    // Collect all clickable elements first\r\n    const nativeLinks = [...getAllElementsIncludingShadow('a')];\r\n    const nativeButtons = [...getAllElementsIncludingShadow('button')];\r\n    const inputButtons = [...getAllElementsIncludingShadow('input[type=\"button\"], input[type=\"submit\"], input[type=\"reset\"]')];\r\n    const roleButtons = [...getAllElementsIncludingShadow('[role=\"button\"]')];\r\n    // const tabbable = [...getAllElementsIncludingShadow('[tabindex=\"0\"]')];\r\n    const clickHandlers = [...getAllElementsIncludingShadow('[onclick]')];\r\n    const dropdowns = findDropdowns();\r\n    const nativeCheckboxes = [...getAllElementsIncludingShadow('input[type=\"checkbox\"]')];  \r\n    const fauxCheckboxes = getAllElementsIncludingShadow('*').filter(el => {\r\n      if (checkboxPattern.test(el.className)) {\r\n        const realCheckboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]', el);\r\n        if (realCheckboxes.length === 1) {\r\n          const boundingRect = realCheckboxes[0].getBoundingClientRect();\r\n          return boundingRect.width <= 1 && boundingRect.height <= 1      \r\n        }\r\n      }\r\n      return false;\r\n    });\r\n    const nativeRadios = [...getAllElementsIncludingShadow('input[type=\"radio\"]')];\r\n    const toggles = findToggles();\r\n    const pointerElements = findElementsWithPointer();\r\n    // Add all elements at once\r\n    clickables.push(\r\n      ...nativeLinks,\r\n      ...nativeButtons,\r\n      ...inputButtons,\r\n      ...roleButtons,\r\n      // ...tabbable,\r\n      ...clickHandlers,\r\n      ...dropdowns,\r\n      ...nativeCheckboxes,\r\n      ...fauxCheckboxes,\r\n      ...nativeRadios,\r\n      ...toggles,\r\n      ...pointerElements\r\n    );\r\n\r\n    // Only uniquify once at the end\r\n    return clickables;  // Let findElements handle the uniquification\r\n  }\r\n\r\n  function findToggles() {\r\n    const toggles = [];\r\n    const checkboxes = getAllElementsIncludingShadow('input[type=\"checkbox\"]');\r\n    const togglePattern = /switch|toggle|slider/i;\r\n\r\n    checkboxes.forEach(checkbox => {\r\n      let isToggle = false;\r\n\r\n      // Check the checkbox itself\r\n      if (togglePattern.test(checkbox.className) || togglePattern.test(checkbox.getAttribute('role') || '')) {\r\n        isToggle = true;\r\n      }\r\n\r\n      // Check parent elements (up to 3 levels)\r\n      if (!isToggle) {\r\n        let element = checkbox;\r\n        for (let i = 0; i < 3; i++) {\r\n          const parent = element.parentElement;\r\n          if (!parent) break;\r\n\r\n          const className = parent.className || '';\r\n          const role = parent.getAttribute('role') || '';\r\n\r\n          if (togglePattern.test(className) || togglePattern.test(role)) {\r\n            isToggle = true;\r\n            break;\r\n          }\r\n          element = parent;\r\n        }\r\n      }\r\n\r\n      // Check next sibling\r\n      if (!isToggle) {\r\n        const nextSibling = checkbox.nextElementSibling;\r\n        if (nextSibling) {\r\n          const className = nextSibling.className || '';\r\n          const role = nextSibling.getAttribute('role') || '';\r\n          if (togglePattern.test(className) || togglePattern.test(role)) {\r\n            isToggle = true;\r\n          }\r\n        }\r\n      }\r\n\r\n      if (isToggle) {\r\n        toggles.push(checkbox);\r\n      }\r\n    });\r\n\r\n    return toggles;\r\n  }\r\n\r\n  function findNonInteractiveElements() {\r\n    // Get all elements in the document\r\n    const all = Array.from(getAllElementsIncludingShadow('*'));\r\n    \r\n    // Filter elements based on Python implementation rules\r\n    return all.filter(element => {\r\n      if (!element.firstElementChild) {\r\n        const tag = element.tagName.toLowerCase();      \r\n        if (!['select', 'button', 'a'].includes(tag)) {\r\n          const validTags = ['p', 'span', 'div', 'input', 'textarea'].includes(tag) || /^h\\d$/.test(tag) || /text/.test(tag);\r\n          const boundingRect = element.getBoundingClientRect();\r\n          return validTags && boundingRect.height > 1 && boundingRect.width > 1;\r\n        }\r\n      }\r\n      return false;\r\n    });\r\n  }\r\n\r\n\r\n\r\n  // export function findNonInteractiveElements() {\r\n  //   const all = [];\r\n  //   try {\r\n  //     const elements = getAllElementsIncludingShadow('*');\r\n  //     all.push(...elements);\r\n  //   } catch (e) {\r\n  //     console.warn('Error getting elements:', e);\r\n  //   }\r\n    \r\n  //   console.debug('Total elements found:', all.length);\r\n    \r\n  //   return all.filter(element => {\r\n  //     try {\r\n  //       const tag = element.tagName.toLowerCase();      \r\n\r\n  //       // Special handling for input elements\r\n  //       if (tag === 'input' || tag === 'textarea') {\r\n  //         const boundingRect = element.getBoundingClientRect();\r\n  //         const value = element.value || '';\r\n  //         const placeholder = element.placeholder || '';\r\n  //         return boundingRect.height > 1 && \r\n  //                boundingRect.width > 1 && \r\n  //                (value.trim() !== '' || placeholder.trim() !== '');\r\n  //       }\r\n\r\n       \r\n  //       // Check if it's a valid tag for text content\r\n  //       const validTags = ['p', 'span', 'div', 'label', 'th', 'td', 'li', 'button', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'a', 'select'].includes(tag) || \r\n  //                        /^h\\d$/.test(tag) || \r\n  //                        /text/.test(tag);\r\n\r\n  //       const boundingRect = element.getBoundingClientRect();\r\n\r\n  //       // Get direct text content, excluding child element text\r\n  //       let directText = '';\r\n  //       for (const node of element.childNodes) {\r\n  //         // Only include text nodes (nodeType 3)\r\n  //         if (node.nodeType === 3) {\r\n  //           directText += node.textContent || '';\r\n  //         }\r\n  //       }\r\n        \r\n  //       // If no direct text and it's a table cell or heading, check label content\r\n  //       if (!directText.trim() && (tag === 'th' || tag === 'td' || tag === 'h1')) {\r\n  //         const labels = element.getElementsByTagName('label');\r\n  //         for (const label of labels) {\r\n  //           directText += label.textContent || '';\r\n  //         }\r\n  //       }\r\n\r\n  //       // If still no text and it's a heading, get all text content\r\n  //       if (!directText.trim() && tag === 'h1') {\r\n  //         directText = element.textContent || '';\r\n  //       }\r\n\r\n  //       directText = directText.trim();\r\n\r\n  //       // Debug logging\r\n  //       if (directText) {\r\n  //         console.debugg('Text element found:', {\r\n  //           tag,\r\n  //           text: directText,\r\n  //           dimensions: boundingRect,\r\n  //           element\r\n  //         });\r\n  //       }\r\n\r\n  //       return validTags && \r\n  //              boundingRect.height > 1 && \r\n  //              boundingRect.width > 1 && \r\n  //              directText !== '';\r\n               \r\n  //     } catch (e) {\r\n  //       console.warn('Error processing element:', e);\r\n  //       return false;\r\n  //     }\r\n  //   });\r\n  // }\r\n\r\n\r\n\r\n\r\n\r\n  function findElementsWithPointer() {\r\n    const elements = [];\r\n    const allElements = getAllElementsIncludingShadow('*');\r\n    \r\n    console.log('Checking elements with pointer style...');\r\n    \r\n    allElements.forEach(element => {\r\n      // Skip SVG elements for now\r\n      if (element instanceof SVGElement || element.tagName.toLowerCase() === 'svg') {\r\n        return;\r\n      }\r\n      \r\n      const style = window.getComputedStyle(element);\r\n      if (style.cursor === 'pointer') {\r\n        elements.push(element);\r\n      }\r\n    });\r\n    \r\n    console.log(`Found ${elements.length} elements with pointer cursor`);\r\n    return elements;\r\n  }\r\n\r\n  function findCheckables() {\r\n    const elements = [];\r\n\r\n    elements.push(...getAllElementsIncludingShadow('input[type=\"checkbox\"]'));\r\n    elements.push(...getAllElementsIncludingShadow('input[type=\"radio\"]'));\r\n    const all_elements = getAllElementsIncludingShadow('label');\r\n    const radioClasses = Array.from(all_elements).filter(el => {\r\n      return /.*radio.*/i.test(el.className);    \r\n    });\r\n    elements.push(...radioClasses);\r\n    return elements;\r\n  }\r\n\r\n  function findFillables() {\r\n    const elements = [];\r\n\r\n    const inputs = [...getAllElementsIncludingShadow('input:not([type=\"radio\"]):not([type=\"checkbox\"])')];\r\n    console.log('Found inputs:', inputs.length, inputs);\r\n    elements.push(...inputs);\r\n    \r\n    const textareas = [...getAllElementsIncludingShadow('textarea')];\r\n    console.log('Found textareas:', textareas.length);\r\n    elements.push(...textareas);\r\n    \r\n    const editables = [...getAllElementsIncludingShadow('[contenteditable=\"true\"]')];\r\n    console.log('Found editables:', editables.length);\r\n    elements.push(...editables);\r\n\r\n    return elements;\r\n  }\n\n  // Helper function to check if element is a form control\r\n  function isFormControl(elementInfo) {\r\n    return /^(input|select|textarea|button|label)$/i.test(elementInfo.tag);\r\n  }\r\n\r\n  const isDropdownItem = (elementInfo) => {\r\n    const dropdownPatterns = [\r\n      /dropdown[-_]?item/i,    // matches: dropdown-item, dropdownitem, dropdown_item\r\n      /menu[-_]?item/i,        // matches: menu-item, menuitem, menu_item\r\n      /dropdown[-_]?link/i,    // matches: dropdown-link, dropdownlink, dropdown_link\r\n      /list[-_]?item/i,       // matches: list-item, listitem, list_item\r\n      /select[-_]?item/i,     // matches: select-item, selectitem, select_item  \r\n    ];\r\n\r\n    const rolePatterns = [\r\n      /menu[-_]?item/i,       // matches: menuitem, menu-item\r\n      /option/i,              // matches: option\r\n      /list[-_]?item/i,      // matches: listitem, list-item\r\n      /tree[-_]?item/i       // matches: treeitem, tree-item\r\n    ];\r\n\r\n    const hasMatchingClass = elementInfo.element.className && \r\n                            dropdownPatterns.some(pattern => \r\n                              pattern.test(elementInfo.element.className)\r\n                            );\r\n\r\n    const hasMatchingRole = elementInfo.element.getAttribute('role') && \r\n                           rolePatterns.some(pattern => \r\n                             pattern.test(elementInfo.element.getAttribute('role'))\r\n                           );\r\n\r\n    return hasMatchingClass || hasMatchingRole;\r\n  };\r\n\r\n  /**\r\n   * Finds the first element matching a CSS selector, traversing Shadow DOM if necessary\r\n   * @param {string} selector - CSS selector to search for\r\n   * @param {Element} [root=document] - Root element to start searching from\r\n   * @returns {Element|null} - The first matching element or null if not found\r\n   */\r\n  function querySelectorShadow(selector, root = document) {\r\n    // First try to find in light DOM\r\n    let element = root.querySelector(selector);\r\n    if (element) return element;\r\n    \r\n    // Get all elements with shadow root\r\n    const shadowElements = Array.from(root.querySelectorAll('*'))\r\n        .filter(el => el.shadowRoot);\r\n    \r\n    // Search through each shadow root until we find a match\r\n    for (const el of shadowElements) {\r\n        element = querySelectorShadow(selector, el.shadowRoot);\r\n        if (element) return element;\r\n    }\r\n    \r\n    return null;\r\n  }\r\n\r\n  const getElementByXPathOrCssSelector = (element_info) => {\r\n    console.log('getElementByXPathOrCssSelector:', element_info);\r\n\r\n    findElement(document, element_info.iframe_selector, element_info.css_selector);\r\n  };\r\n\r\n  const findElement = (root, iframeSelector, cssSelector) => {\r\n    let element;\r\n    \r\n    if (iframeSelector) {      \r\n      const frames = getAllDocumentElementsIncludingShadow('iframe', root);\r\n      \r\n      // Iterate over all frames and compare their CSS selectors\r\n      for (const frame of frames) {\r\n        const selector = generateCssPath(frame);\r\n        if (selector === iframeSelector) {\r\n          const frameDocument = frame.contentDocument || frame.contentWindow.document;\r\n          element = querySelectorShadow(cssSelector, frameDocument);\r\n          console.log('found element ', element);\r\n          break;\r\n        }        \r\n      }  }\r\n    else\r\n      element = querySelectorShadow(cssSelector, root);\r\n      \r\n    if (!element) {\r\n      console.warn('Failed to find element with CSS selector:', cssSelector);\r\n    }\r\n\r\n    return element;\r\n  };\r\n\r\n  /* export function generateXPath(element) {\r\n    if (!element || element.getRootNode() instanceof ShadowRoot) return '';\r\n    \r\n    // If element has an id, use that (it's unique and shorter)\r\n    if (element.id) {\r\n      return `//*[@id=\"${element.id}\"]`;\r\n    }\r\n    \r\n    const parts = [];\r\n    let current = element;\r\n    \r\n    while (current && current.nodeType === Node.ELEMENT_NODE) {\r\n      let index = 1;\r\n      let sibling = current.previousSibling;\r\n      \r\n      while (sibling) {\r\n        if (sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === current.tagName) {\r\n          index++;\r\n        }\r\n        sibling = sibling.previousSibling;\r\n      }\r\n      \r\n      const tagName = current.tagName.toLowerCase();\r\n      parts.unshift(`${tagName}[${index}]`);\r\n      current = current.parentNode;\r\n    }\r\n    \r\n    return '/' + parts.join('/');\r\n  } */\r\n\r\n  function isDecendent(parent, child) {\r\n    let element = child;\r\n    while (element.nodeType === Node.ELEMENT_NODE) {    \r\n      \r\n      if (element.assignedSlot) {\r\n        element = element.assignedSlot;\r\n      }\r\n      else {\r\n        element = element.parentNode;\r\n        // Check if we're at a shadow root\r\n        if (element && element.nodeType !== Node.ELEMENT_NODE && element.getRootNode() instanceof ShadowRoot) {\r\n          // Get the shadow root's host element\r\n          element = element.getRootNode().host;     \r\n        }\r\n      }\r\n      if (element === parent)\r\n        return true;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  function generateXPath(element) {\r\n    return '/'+extractElementPath(element).map(item => `${item.tagName}${item.onlyChild ? '' : `[${item.index}]`}`).join('/');\r\n  }\r\n\r\n  function generateCssPath(element) {\r\n    return extractElementPath(element).map(item => `${item.tagName}:nth-of-type(${item.index})`).join(' > ');\r\n  }\r\n\r\n  function extractElementPath(element) {\r\n    if (!element) {\r\n      console.error('ERROR: No element provided to generatePath');\r\n      return [];\r\n    }\r\n    const path = [];\r\n    // traversing up the DOM tree\r\n    while (element && element.nodeType === Node.ELEMENT_NODE) {    \r\n      let tagName = element.nodeName.toLowerCase();\r\n          \r\n      let sibling = element;\r\n      let index = 1;\r\n      while (sibling = sibling.previousElementSibling) {\r\n        if (sibling.nodeName.toLowerCase() === tagName) index++;\r\n      }\r\n      sibling = element;\r\n      let onlyChild = (index === 1);\r\n      while (sibling = sibling.nextElementSibling) {\r\n        if (sibling.nodeName.toLowerCase() === tagName) {\r\n          onlyChild = false;\r\n          break;\r\n        }\r\n      }\r\n         \r\n      // add a tuple with tagName, index (nth), and onlyChild    \r\n      path.unshift({\r\n        tagName: tagName,\r\n        index: index,\r\n        onlyChild: onlyChild,\r\n        element: element\r\n      });    \r\n   \r\n      // move up the DOM tree\r\n      element = element.parentNode;\r\n\r\n      // Check if we're at a shadow root\r\n      if (element && element.nodeType !== Node.ELEMENT_NODE && element.getRootNode() instanceof ShadowRoot) {\r\n        // console.log('generatePath:  found shadow root, moving to host');\r\n        // Get the shadow root's host element\r\n        element = element.getRootNode().host;     \r\n      }\r\n    }\r\n    \r\n    return path;\r\n  }\r\n\r\n\r\n  function cleanHTML(rawHTML) {\r\n    const parser = new DOMParser();\r\n    const doc = parser.parseFromString(rawHTML, \"text/html\");\r\n\r\n    function cleanElement(element) {\r\n      const allowedAttributes = new Set([\r\n        \"role\",\r\n        \"type\",\r\n        \"class\",\r\n        \"href\",\r\n        \"alt\",\r\n        \"title\",\r\n        \"readonly\",\r\n        \"checked\",\r\n        \"enabled\",\r\n        \"disabled\",\r\n      ]);\r\n\r\n      [...element.attributes].forEach(attr => {\r\n        const name = attr.name.toLowerCase();\r\n        const value = attr.value;\r\n\r\n        const isTestAttribute = /^(testid|test-id|data-test-id)$/.test(name);\r\n        const isDataAttribute = name.startsWith(\"data-\") && value;\r\n        const isBooleanAttribute = [\"readonly\", \"checked\", \"enabled\", \"disabled\"].includes(name);\r\n\r\n        if (!allowedAttributes.has(name) && !isDataAttribute && !isTestAttribute && !isBooleanAttribute) {\r\n          element.removeAttribute(name);\r\n        }\r\n      });\r\n\r\n      // Handle SVG content - more aggressive replacement\r\n      if (element.tagName.toLowerCase() === \"svg\") {\r\n        // Remove all attributes except class and role\r\n        [...element.attributes].forEach(attr => {\r\n          const name = attr.name.toLowerCase();\r\n          if (name !== \"class\" && name !== \"role\") {\r\n            element.removeAttribute(name);\r\n          }\r\n        });\r\n        element.innerHTML = \"CONTENT REMOVED\";\r\n      } else {\r\n        // Recursively clean child elements\r\n        Array.from(element.children).forEach(cleanElement);\r\n      }\r\n\r\n      // Only remove empty elements that aren't semantic or icon elements\r\n      const keepEmptyElements = ['i', 'span', 'svg', 'button', 'input'];\r\n      if (!keepEmptyElements.includes(element.tagName.toLowerCase()) && \r\n          !element.children.length && \r\n          !element.textContent.trim()) {\r\n        element.remove();\r\n      }\r\n    }\r\n\r\n    // Process all elements in the document body\r\n    Array.from(doc.body.children).forEach(cleanElement);\r\n    return doc.body.innerHTML;\r\n  }\r\n\r\n  function getContainingIframe(element) {\r\n    // If not in an iframe, return null\r\n    if (element.ownerDocument.defaultView === window.top) {\r\n      return null;\r\n    }\r\n    \r\n    // Try to find the iframe in the parent document that contains our element\r\n    try {\r\n      const parentDocument = element.ownerDocument.defaultView.parent.document;\r\n      const iframes = parentDocument.querySelectorAll('iframe');\r\n      \r\n      for (const iframe of iframes) {\r\n        if (iframe.contentWindow === element.ownerDocument.defaultView) {\r\n          return iframe;\r\n        }\r\n      }\r\n    } catch (e) {\r\n      // Cross-origin restriction\r\n      return \"Cross-origin iframe - cannot access details\";\r\n    }\r\n    \r\n    return null;\r\n  }\r\n\r\n  function getElementInfo(element, index) {\r\n\r\n    const xpath = generateXPath(element);\r\n    const css_selector = generateCssPath(element);\r\n    //disabled since it's blocking event handling in recorder\r\n    const short_css_selector = ''; //getRobustSelector(element);\r\n\r\n    const iframe = getContainingIframe(element);  \r\n    const iframe_selector = iframe ? generateCssPath(iframe) : \"\";\r\n    //disabled since it's blocking event handling in recorder\r\n    const short_iframe_selector = ''; //iframe ? getRobustSelector(iframe) : \"\";\r\n\r\n    // Return element info with pre-calculated values\r\n    return new ElementInfo(element, index, {\r\n      tag: element.tagName.toLowerCase(),\r\n      type: element.type || '',\r\n      text: element.innerText || element.placeholder || '', //getTextContent(element),\r\n      html: cleanHTML(element.outerHTML),\r\n      xpath: xpath,\r\n      css_selector: css_selector,\r\n      bounding_box: element.getBoundingClientRect(),\r\n      iframe_selector: iframe_selector,\r\n      short_css_selector: short_css_selector,\r\n      short_iframe_selector: short_iframe_selector\r\n    });\r\n  }\r\n\r\n  function getAriaLabelledByText(elementInfo, includeHidden=true) {\r\n    if (!elementInfo.element.hasAttribute('aria-labelledby')) return '';\r\n\r\n    const ids = elementInfo.element.getAttribute('aria-labelledby').split(/\\s+/);\r\n    let labelText = '';\r\n\r\n    //locate root (document or iFrame document if element is contained in an iframe)\r\n    let root = document;\r\n    if (elementInfo.iframe_selector) {      \r\n      const frames = getAllDocumentElementsIncludingShadow('iframe', document);\r\n      \r\n      // Iterate over all frames and compare their CSS selectors\r\n      for (const frame of frames) {\r\n        const selector = generateCssPath(frame);\r\n        if (selector === elementInfo.iframe_selector) {\r\n          root = frame.contentDocument || frame.contentWindow.document;        \r\n          break;\r\n        }\r\n      } \r\n    }\r\n\r\n    ids.forEach(id => {\r\n      const el = querySelectorShadow(`#${CSS.escape(id)}`, root);\r\n      if (el) {\r\n        if (includeHidden || el.offsetParent !== null || getComputedStyle(el).display !== 'none') {\r\n          labelText += el.textContent.trim() + ' ';\r\n        }\r\n      }\r\n    });\r\n\r\n    return labelText.trim();\r\n  }\r\n\r\n\r\n\r\n  const filterZeroDimensions = (elementInfo) => {\r\n    const rect = elementInfo.bounding_box;\r\n    //single pixel elements are typically faux controls and should be filtered too\r\n    const hasSize = rect.width > 1 && rect.height > 1;\r\n    const style = window.getComputedStyle(elementInfo.element);\r\n    const isVisible = style.display !== 'none' && style.visibility !== 'hidden';\r\n    \r\n    if (!hasSize || !isVisible) {\r\n      \r\n      return false;\r\n    }\r\n    return true;\r\n  };\r\n\r\n\r\n\r\n  function uniquifyElements(elements) {\r\n    const seen = new Set();\r\n\r\n    console.log(`Starting uniquification with ${elements.length} elements`);\r\n\r\n    // Filter out testing infrastructure elements first\r\n    const filteredInfrastructure = elements.filter(element_info => {\r\n      // Skip the highlight-overlay element completely - it's part of the testing infrastructure\r\n      if (element_info.element.id === 'highlight-overlay' || \r\n          (element_info.css_selector && element_info.css_selector.includes('#highlight-overlay'))) {\r\n        console.log('Filtered out testing infrastructure element:', element_info.css_selector);\r\n        return false;\r\n      }\r\n      \r\n      // Filter out UI framework container/manager elements\r\n      const el = element_info.element;\r\n      // UI framework container checks - generic detection for any framework\r\n      if ((el.getAttribute('data-rendered-by') || \r\n           el.getAttribute('data-reactroot') || \r\n           el.getAttribute('ng-version') || \r\n           el.getAttribute('data-component-id') ||\r\n           el.getAttribute('data-root') ||\r\n           el.getAttribute('data-framework')) && \r\n          (el.className && \r\n           typeof el.className === 'string' && \r\n           (el.className.includes('Container') || \r\n            el.className.includes('container') || \r\n            el.className.includes('Manager') || \r\n            el.className.includes('manager')))) {\r\n        console.log('Filtered out UI framework container element:', element_info.css_selector);\r\n        return false;\r\n      }\r\n      \r\n      // Direct filter for framework container elements that shouldn't be interactive\r\n      // Consolidating multiple container detection patterns into one efficient check\r\n      const isFullViewport = element_info.bounding_box && \r\n                           element_info.bounding_box.x <= 5 && \r\n                           element_info.bounding_box.y <= 5 && \r\n                           element_info.bounding_box.width >= (window.innerWidth * 0.95) && \r\n                           element_info.bounding_box.height >= (window.innerHeight * 0.95);\r\n                           \r\n      // Empty content check\r\n      const isEmpty = !el.innerText || el.innerText.trim() === '';\r\n      \r\n      // Check if it's a framework container element\r\n      if (element_info.element.tagName === 'DIV' && \r\n          isFullViewport && \r\n          isEmpty && \r\n          (\r\n            // Pattern matching for root containers\r\n            (element_info.xpath && \r\n              (element_info.xpath.match(/^\\/html\\[\\d+\\]\\/body\\[\\d+\\]\\/div\\[\\d+\\]\\/div\\[\\d+\\]$/) || \r\n               element_info.xpath.match(/^\\/\\/\\*\\[@id='[^']+'\\]\\/div\\[\\d+\\]$/))) ||\r\n            \r\n            // Simple DOM structure\r\n            (element_info.css_selector.split(' > ').length <= 4 && element_info.depth <= 5) ||\r\n            \r\n            // Empty or container-like classes\r\n            (!el.className || el.className === '' || \r\n             (typeof el.className === 'string' && \r\n              (el.className.includes('overlay') || \r\n               el.className.includes('container') || \r\n               el.className.includes('wrapper'))))\r\n          )) {\r\n        console.log('Filtered out framework container element:', element_info.css_selector);\r\n        return false;\r\n      }\r\n      \r\n      return true;\r\n    });\r\n\r\n    // First filter out elements with zero dimensions\r\n    const nonZeroElements = filteredInfrastructure.filter(filterZeroDimensions);\r\n    // sort by CSS selector depth so parents are processed first\r\n    nonZeroElements.sort((a, b) => a.getDepth() - b.getDepth());\r\n    console.log(`After dimension filtering: ${nonZeroElements.length} elements remain (${elements.length - nonZeroElements.length} removed)`);\r\n    \r\n    const filteredByParent = nonZeroElements.filter(element_info => {\r\n\r\n      const parent = findClosestParent(seen, element_info);\r\n      const keep = parent == null || shouldKeepNestedElement(element_info, parent);\r\n      // console.log(\"node \", element_info.index, \": keep=\", keep, \" parent=\", parent);\r\n      // if (!keep && !element_info.xpath) {\r\n      //   console.log(\"Filtered out element \", element_info,\" because it's a nested element of \", parent);\r\n      // }\r\n      if (keep)\r\n        seen.add(element_info.css_selector);\r\n\r\n      return keep;\r\n    });\r\n\r\n    console.log(`After parent/child filtering: ${filteredByParent.length} elements remain (${nonZeroElements.length - filteredByParent.length} removed)`);\r\n\r\n    // Final overlap filtering\r\n    const filteredResults = filteredByParent.filter(element => {\r\n\r\n       // Look for any element that came BEFORE this one in the array\r\n      const hasEarlierOverlap = filteredByParent.some(other => {\r\n        // Only check elements that came before (lower index)\r\n        if (filteredByParent.indexOf(other) >= filteredByParent.indexOf(element)) {\r\n          return false;\r\n        }\r\n        \r\n        const isOverlapping = areElementsOverlapping(element, other); \r\n        return isOverlapping;\r\n      });  \r\n\r\n      // Keep element if it has no earlier overlapping elements\r\n      return !hasEarlierOverlap;\r\n    });\r\n    \r\n    \r\n    \r\n    // Check for overlay removal\r\n    console.log(`After filtering: ${filteredResults.length} (${filteredByParent.length - filteredResults.length} removed by overlap)`);\r\n    \r\n    const nonOverlaidElements = filteredResults.filter(element => {\r\n      return !isOverlaid(element);\r\n    });\r\n\r\n    console.log(`Final elements after overlay removal: ${nonOverlaidElements.length} (${filteredResults.length - nonOverlaidElements.length} removed)`);\r\n    \r\n    return nonOverlaidElements;\r\n\r\n  }\r\n\r\n\r\n\r\n  const areElementsOverlapping = (element1, element2) => {\r\n    if (element1.css_selector === element2.css_selector) {\r\n      return true;\r\n    }\r\n    \r\n    const box1 = element1.bounding_box;\r\n    const box2 = element2.bounding_box;\r\n    \r\n    return box1.x === box2.x &&\r\n           box1.y === box2.y &&\r\n           box1.width === box2.width &&\r\n           box1.height === box2.height;\r\n          //  element1.text === element2.text &&\r\n          //  element2.tag === 'a';\r\n  };\r\n\r\n  function findClosestParent(seen, element_info) {  \r\n    \r\n    // Split the xpath into segments\r\n    const segments = element_info.css_selector.split(' > ');\r\n    \r\n    // Try increasingly shorter paths until we find one in the seen set\r\n    for (let i = segments.length - 1; i > 0; i--) {\r\n      const parentPath = segments.slice(0, i).join(' > ');\r\n      if (seen.has(parentPath)) {\r\n        return parentPath;\r\n      }\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  function shouldKeepNestedElement(elementInfo, parentPath) {\r\n    let result = false;\r\n    const parentSegments = parentPath.split(' > ');\r\n\r\n    const isParentLink = /^a(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\r\n    if (isParentLink) {\r\n      return false;    \r\n    }\r\n    // If this is a checkbox/radio input\r\n    if (elementInfo.tag === 'input' && \r\n        (elementInfo.type === 'checkbox' || elementInfo.type === 'radio')) {\r\n      \r\n      // Check if parent is a label by looking at the parent xpath's last segment\r\n      \r\n      const isParentLabel = /^label(:nth-of-type\\(\\d+\\))?$/.test(parentSegments[parentSegments.length - 1]);\r\n      \r\n      // If parent is a label, don't keep the input (we'll keep the label instead)\r\n      if (isParentLabel) {\r\n        return false;\r\n      }\r\n    }\r\n    \r\n    // Keep all other form controls and dropdown items\r\n    if (isFormControl(elementInfo) || isDropdownItem(elementInfo)) {\r\n      result = true;\r\n    }\r\n\r\n    if(isTableCell(elementInfo)) {\r\n      result = true;\r\n    }\r\n    \r\n    \r\n    // console.log(`shouldKeepNestedElement: ${elementInfo.tag} ${elementInfo.text} ${elementInfo.xpath} -> ${parentXPath} -> ${result}`);\r\n    return result;\r\n  }\r\n\r\n\r\n  function isTableCell(elementInfo) {\r\n    const element = elementInfo.element;\r\n    if(!element || !(element instanceof HTMLElement)) {\r\n      return false;\r\n    }\r\n    const validTags = new Set(['td', 'th']);\r\n    const validRoles = new Set(['cell', 'gridcell', 'columnheader', 'rowheader']);\r\n    \r\n    const tag = element.tagName.toLowerCase();\r\n    const role = element.getAttribute('role')?.toLowerCase();\r\n\r\n    if (validTags.has(tag) || (role && validRoles.has(role))) {\r\n      return true;\r\n    }\r\n    return false;\r\n    \r\n  }\r\n\r\n  function isOverlaid(elementInfo) {\r\n    const element = elementInfo.element;\r\n    const boundingRect = elementInfo.bounding_box;\r\n    \r\n\r\n    \r\n    \r\n    // Create a diagnostic logging function that only logs when needed\r\n    const diagnosticLog = (...args) => {\r\n      { // set to true for debugging\r\n        console.log('[OVERLAY-DEBUG]', ...args);\r\n      }\r\n    };\r\n\r\n    // Special handling for tooltips\r\n    if (elementInfo.element.className && typeof elementInfo.element.className === 'string' && \r\n        elementInfo.element.className.includes('tooltip')) {\r\n      diagnosticLog('Element is a tooltip, not considering it overlaid');\r\n      return false;\r\n    }\r\n    \r\n    \r\n      \r\n        // Get element at the center point to check if it's covered by a popup/modal\r\n        const middleX = boundingRect.x + boundingRect.width/2;\r\n        const middleY = boundingRect.y + boundingRect.height/2;\r\n        const elementAtMiddle = element.ownerDocument.elementFromPoint(middleX, middleY);\r\n        \r\n        if (elementAtMiddle && \r\n            elementAtMiddle !== element && \r\n            !isDecendent(element, elementAtMiddle) && \r\n            !isDecendent(elementAtMiddle, element)) {\r\n\r\n        \r\n        return true;\r\n      }\r\n        \r\n        \r\n      return false;\r\n    \r\n    }\r\n\r\n\r\n\r\n  /**\r\n   * Get the “best” short, unique, and robust CSS selector for an element.\r\n   * \r\n   * @param {Element} element\r\n   * @returns {string} A selector guaranteed to find exactly that element in its context\r\n   */\r\n  function getRobustSelector(element) {\r\n    // 1. Figure out the real “root” (iframe doc, shadow root, or main doc)\r\n    const root = (() => {\r\n      const rootNode = element.getRootNode();\r\n      if (rootNode instanceof ShadowRoot) {\r\n        return rootNode;\r\n      }\r\n      return element.ownerDocument;\r\n    })();\r\n\r\n    // 2. Options to bias toward stable attrs and away from auto-generated classes\r\n    const options = {\r\n      root,\r\n      // only use data-*, id or aria-label by default\r\n      attr(name, value) {\r\n        if (name === 'id' || name.startsWith('data-') || name === 'aria-label') {\r\n          return true;\r\n        }\r\n        return false;\r\n      },\r\n      // skip framework junk\r\n      filter(name, value) {\r\n        if (name.startsWith('ng-') || name.startsWith('_ngcontent') || /^p-/.test(name)) {\r\n          return false;\r\n        }\r\n        return true;\r\n      },\r\n      // let finder try really short seeds\r\n      seedMinLength: 1,\r\n      optimizedMinLength: 1,\r\n    };\r\n\r\n    let selector;\r\n    try {\r\n      selector = finder(element, options);\r\n      // 3. Verify it really works in the context\r\n      const found = root.querySelectorAll(selector);\r\n      if (found.length !== 1 || found[0] !== element) {\r\n        throw new Error('not unique or not found');\r\n      }\r\n      return selector;\r\n    } catch (err) {\r\n      // 4. Fallback: full path (you already have this utility)\r\n      console.warn('[getRobustSelector] finder failed, falling back to full path:', err);\r\n      return generateCssPath(element); // you’d import or define this elsewhere\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Checks if an element is scrollable (has scrollable content)\r\n   * \r\n   * @param element - The element to check\r\n   * @returns boolean indicating if the element is scrollable\r\n   */\r\n  function isScrollableContainer(element) {\r\n    if (!element) return false;\r\n    \r\n    const style = window.getComputedStyle(element);\r\n    \r\n    // Reliable way to detect if an element has scrollbars or is scrollable\r\n    const hasScrollHeight = element.scrollHeight > element.clientHeight;\r\n    const hasScrollWidth = element.scrollWidth > element.clientWidth;\r\n    \r\n    // Check actual style properties\r\n    const hasOverflowY = style.overflowY === 'auto' || \r\n                        style.overflowY === 'scroll' || \r\n                        style.overflowY === 'overlay';\r\n    const hasOverflowX = style.overflowX === 'auto' || \r\n                        style.overflowX === 'scroll' || \r\n                        style.overflowX === 'overlay';\r\n    \r\n    // Check common class names and attributes for scrollable containers across frameworks\r\n    const hasScrollClasses = element.classList.contains('scroll') || \r\n                            element.classList.contains('scrollable') ||\r\n                            element.classList.contains('overflow') ||\r\n                            element.classList.contains('overflow-auto') ||\r\n                            element.classList.contains('overflow-scroll') ||\r\n                            element.getAttribute('data-scrollable') === 'true';\r\n                            \r\n    // Check for height/max-height constraints that often indicate scrolling content\r\n    const hasHeightConstraint = style.maxHeight && \r\n                               style.maxHeight !== 'none' && \r\n                               style.maxHeight !== 'auto';\r\n    \r\n    // An element is scrollable if it has:\r\n    // 1. Actual scrollbars in use (most reliable check) OR\r\n    // 2. Overflow styles allowing scrolling AND content that would require scrolling\r\n    return (hasScrollHeight && hasOverflowY) || \r\n           (hasScrollWidth && hasOverflowX) ||\r\n           (hasScrollClasses && (hasScrollHeight || hasScrollWidth)) ||\r\n           (hasHeightConstraint && hasScrollHeight);\r\n  }\r\n\r\n  /**\r\n   * Detects scrollable containers that are ancestors of the target element\r\n   * \r\n   * This function traverses up the DOM tree from the target element and identifies\r\n   * all scrollable containers (elements that have scrollable content).\r\n   * \r\n   * @param target - The target element to start the search from\r\n   * @returns Array of objects with selector and scroll properties\r\n   */\r\n  function detectScrollableContainers(target) {\r\n    const scrollableContainers = [];\r\n    \r\n    if (!target) {\r\n      return scrollableContainers;\r\n    }\r\n    \r\n    console.log('🔍 [detectScrollableContainers] Starting detection for target:', target.tagName, target.id, target.className);\r\n    \r\n    // Detect if target is inside an iframe\r\n    const iframe = getContainingIframe(target);\r\n    const iframe_selector = iframe ? generateCssPath(iframe) : \"\";\r\n    \r\n    console.log('🔍 [detectScrollableContainers] Iframe context:', iframe ? 'inside iframe' : 'main document', 'selector:', iframe_selector);\r\n    \r\n    // Start from the target element and traverse up the DOM tree\r\n    let currentElement = target;\r\n    let depth = 0;\r\n    const MAX_DEPTH = 10; // Limit traversal depth to avoid infinite loops\r\n    \r\n    while (currentElement && depth < MAX_DEPTH) {\r\n      // Skip if we've reached the document body or html element\r\n      if (currentElement === document.body || currentElement === document.documentElement) {\r\n        break;\r\n      }\r\n      \r\n      // Check if the current element is scrollable\r\n      if (isScrollableContainer(currentElement)) {\r\n        console.log('🔍 [detectScrollableContainers] Found scrollable container at depth', depth, ':', currentElement.tagName, currentElement.id, currentElement.className);\r\n        \r\n        const container = {\r\n          containerEl: currentElement,\r\n          selector: generateCssPath(currentElement),\r\n          iframe_selector: iframe_selector,\r\n          scrollTop: currentElement.scrollTop,\r\n          scrollLeft: currentElement.scrollLeft,\r\n          scrollHeight: currentElement.scrollHeight,\r\n          scrollWidth: currentElement.scrollWidth,\r\n          clientHeight: currentElement.clientHeight,\r\n          clientWidth: currentElement.clientWidth\r\n        };\r\n        \r\n        scrollableContainers.push(container);\r\n      }\r\n      \r\n      // Move to parent element\r\n      if (currentElement.assignedSlot) {\r\n        // Handle Shadow DOM\r\n        currentElement = currentElement.assignedSlot;\r\n      } else {\r\n        currentElement = currentElement.parentElement;\r\n        \r\n        // Handle Shadow Root boundaries\r\n        if (currentElement) {\r\n          const rootNode = currentElement.getRootNode();\r\n          if (rootNode instanceof ShadowRoot) {\r\n            currentElement = rootNode.host;\r\n          }\r\n        }\r\n      }\r\n      \r\n      depth++;\r\n    }\r\n    \r\n    console.log('🔍 [detectScrollableContainers] Detection complete. Found', scrollableContainers.length, 'scrollable containers');\r\n    return scrollableContainers;\r\n  }\n\n  class DOMSerializer {\r\n      constructor(options = {}) {\r\n        this.options = {\r\n          includeStyles: true,\r\n          includeScripts: false, // Security consideration\r\n          includeFrames: true,\r\n          includeShadowDOM: true,\r\n          maxDepth: 50,\r\n          ...options\r\n        };\r\n        this.serializedFrames = new Map();\r\n        this.shadowRoots = new Map();\r\n      }\r\n    \r\n      /**\r\n       * Serialize a complete document or element\r\n       */\r\n      serialize(rootElement = document) {\r\n        try {\r\n          const serialized = {\r\n            type: 'document',\r\n            doctype: this.serializeDoctype(rootElement),\r\n            documentElement: this.serializeElement(rootElement.documentElement || rootElement),\r\n            frames: [],\r\n            timestamp: Date.now(),\r\n            url: rootElement.URL || window.location?.href,\r\n            metadata: {\r\n              title: rootElement.title,\r\n              charset: rootElement.characterSet,\r\n              contentType: rootElement.contentType\r\n            }\r\n          };\r\n    \r\n          // Serialize frames and iframes if enabled\r\n          if (this.options.includeFrames) {\r\n            serialized.frames = this.serializeFrames(rootElement);\r\n          }\r\n    \r\n          return serialized;\r\n        } catch (error) {\r\n          console.error('Serialization error:', error);\r\n          throw new Error(`DOM serialization failed: ${error.message}`);\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Serialize document type declaration\r\n       */\r\n      serializeDoctype(doc) {\r\n        if (!doc.doctype) return null;\r\n        \r\n        return {\r\n          name: doc.doctype.name,\r\n          publicId: doc.doctype.publicId,\r\n          systemId: doc.doctype.systemId\r\n        };\r\n      }\r\n    \r\n      /**\r\n       * Serialize an individual element and its children\r\n       */\r\n      serializeElement(element, depth = 0) {\r\n        if (depth > this.options.maxDepth) {\r\n          return { type: 'text', content: '<!-- Max depth exceeded -->' };\r\n        }\r\n    \r\n        const nodeType = element.nodeType;\r\n        \r\n        switch (nodeType) {\r\n          case Node.ELEMENT_NODE:\r\n            return this.serializeElementNode(element, depth);\r\n          case Node.TEXT_NODE:\r\n            return this.serializeTextNode(element);\r\n          case Node.COMMENT_NODE:\r\n            return this.serializeCommentNode(element);\r\n          case Node.DOCUMENT_FRAGMENT_NODE:\r\n            return this.serializeDocumentFragment(element, depth);\r\n          default:\r\n            return null;\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Serialize element node with attributes and children\r\n       */\r\n      serializeElementNode(element, depth) {\r\n        const tagName = element.tagName.toLowerCase();\r\n        \r\n        // Skip script tags for security unless explicitly enabled\r\n        if (tagName === 'script' && !this.options.includeScripts) {\r\n          return { type: 'comment', content: '<!-- Script tag removed for security -->' };\r\n        }\r\n    \r\n        const serialized = {\r\n          type: 'element',\r\n          tagName: tagName,\r\n          attributes: this.serializeAttributes(element),\r\n          children: [],\r\n          shadowRoot: null\r\n        };\r\n    \r\n        // Handle Shadow DOM\r\n        if (this.options.includeShadowDOM && element.shadowRoot) {\r\n          serialized.shadowRoot = this.serializeShadowRoot(element.shadowRoot, depth + 1);\r\n        }\r\n    \r\n        // Handle special elements\r\n        if (tagName === 'iframe' || tagName === 'frame') {\r\n          serialized.frameData = this.serializeFrameElement(element);\r\n        }\r\n    \r\n        // Serialize children\r\n        for (const child of element.childNodes) {\r\n          const serializedChild = this.serializeElement(child, depth + 1);\r\n          if (serializedChild) {\r\n            serialized.children.push(serializedChild);\r\n          }\r\n        }\r\n    \r\n        // Include computed styles if enabled\r\n        if (this.options.includeStyles && element.nodeType === Node.ELEMENT_NODE) {\r\n          serialized.computedStyle = this.serializeComputedStyle(element);\r\n        }\r\n    \r\n        return serialized;\r\n      }\r\n    \r\n      /**\r\n       * Serialize element attributes\r\n       */\r\n      serializeAttributes(element) {\r\n        const attributes = {};\r\n        \r\n        if (element.attributes) {\r\n          for (const attr of element.attributes) {\r\n            attributes[attr.name] = attr.value;\r\n          }\r\n        }\r\n    \r\n        return attributes;\r\n      }\r\n    \r\n      /**\r\n       * Serialize computed styles\r\n       */\r\n      serializeComputedStyle(element) {\r\n        try {\r\n          const computedStyle = window.getComputedStyle(element);\r\n          const styles = {};\r\n          \r\n          // Only serialize non-default values to reduce size\r\n          const importantStyles = [\r\n            'display', 'position', 'width', 'height', 'margin', 'padding',\r\n            'border', 'background', 'color', 'font-family', 'font-size',\r\n            'text-align', 'visibility', 'z-index', 'transform'\r\n          ];\r\n    \r\n          for (const prop of importantStyles) {\r\n            const value = computedStyle.getPropertyValue(prop);\r\n            if (value && value !== 'initial' && value !== 'normal') {\r\n              styles[prop] = value;\r\n            }\r\n          }\r\n    \r\n          return styles;\r\n        } catch (error) {\r\n          return {};\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Serialize text node\r\n       */\r\n      serializeTextNode(node) {\r\n        return {\r\n          type: 'text',\r\n          content: node.textContent\r\n        };\r\n      }\r\n    \r\n      /**\r\n       * Serialize comment node\r\n       */\r\n      serializeCommentNode(node) {\r\n        return {\r\n          type: 'comment',\r\n          content: node.textContent\r\n        };\r\n      }\r\n    \r\n      /**\r\n       * Serialize document fragment\r\n       */\r\n      serializeDocumentFragment(fragment, depth) {\r\n        const serialized = {\r\n          type: 'fragment',\r\n          children: []\r\n        };\r\n    \r\n        for (const child of fragment.childNodes) {\r\n          const serializedChild = this.serializeElement(child, depth + 1);\r\n          if (serializedChild) {\r\n            serialized.children.push(serializedChild);\r\n          }\r\n        }\r\n    \r\n        return serialized;\r\n      }\r\n    \r\n      /**\r\n       * Serialize Shadow DOM\r\n       */\r\n      serializeShadowRoot(shadowRoot, depth) {\r\n        const serialized = {\r\n          type: 'shadowRoot',\r\n          mode: shadowRoot.mode,\r\n          children: []\r\n        };\r\n    \r\n        for (const child of shadowRoot.childNodes) {\r\n          const serializedChild = this.serializeElement(child, depth + 1);\r\n          if (serializedChild) {\r\n            serialized.children.push(serializedChild);\r\n          }\r\n        }\r\n    \r\n        return serialized;\r\n      }\r\n    \r\n      /**\r\n       * Serialize frame/iframe elements\r\n       */\r\n      serializeFrameElement(frameElement) {\r\n        const frameData = {\r\n          src: frameElement.src,\r\n          name: frameElement.name,\r\n          id: frameElement.id,\r\n          sandbox: frameElement.sandbox?.toString() || '',\r\n          allowfullscreen: frameElement.allowFullscreen\r\n        };\r\n    \r\n        // Try to access frame content (may fail due to CORS)\r\n        try {\r\n          const frameDoc = frameElement.contentDocument;\r\n          if (frameDoc && this.options.includeFrames) {\r\n            frameData.content = this.serialize(frameDoc);\r\n          }\r\n        } catch (error) {\r\n          frameData.accessError = 'Cross-origin frame content not accessible';\r\n        }\r\n    \r\n        return frameData;\r\n      }\r\n    \r\n      /**\r\n       * Serialize all frames in document\r\n       */\r\n      serializeFrames(doc) {\r\n        const frames = [];\r\n        const frameElements = doc.querySelectorAll('iframe, frame');\r\n    \r\n        for (const frameElement of frameElements) {\r\n          try {\r\n            const frameDoc = frameElement.contentDocument;\r\n            if (frameDoc) {\r\n              frames.push({\r\n                element: this.serializeElement(frameElement),\r\n                content: this.serialize(frameDoc)\r\n              });\r\n            }\r\n          } catch (error) {\r\n            frames.push({\r\n              element: this.serializeElement(frameElement),\r\n              error: 'Frame content not accessible'\r\n            });\r\n          }\r\n        }\r\n    \r\n        return frames;\r\n      }\r\n    \r\n      /**\r\n       * Deserialize serialized DOM data back to DOM nodes\r\n       */\r\n      deserialize(serializedData, targetDocument = document) {\r\n        try {\r\n          if (serializedData.type === 'document') {\r\n            return this.deserializeDocument(serializedData, targetDocument);\r\n          } else {\r\n            return this.deserializeElement(serializedData, targetDocument);\r\n          }\r\n        } catch (error) {\r\n          console.error('Deserialization error:', error);\r\n          throw new Error(`DOM deserialization failed: ${error.message}`);\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Deserialize complete document\r\n       */\r\n      deserializeDocument(serializedDoc, targetDoc) {\r\n        // Create new document if needed\r\n        const doc = targetDoc || document.implementation.createHTMLDocument();\r\n    \r\n        // Set doctype if present\r\n        if (serializedDoc.doctype) {\r\n          const doctype = document.implementation.createDocumentType(\r\n            serializedDoc.doctype.name,\r\n            serializedDoc.doctype.publicId,\r\n            serializedDoc.doctype.systemId\r\n          );\r\n          doc.replaceChild(doctype, doc.doctype);\r\n        }\r\n    \r\n        // Deserialize document element\r\n        if (serializedDoc.documentElement) {\r\n          const newDocElement = this.deserializeElement(serializedDoc.documentElement, doc);\r\n          doc.replaceChild(newDocElement, doc.documentElement);\r\n        }\r\n    \r\n        // Handle metadata\r\n        if (serializedDoc.metadata) {\r\n          doc.title = serializedDoc.metadata.title || '';\r\n        }\r\n    \r\n        return doc;\r\n      }\r\n    \r\n      /**\r\n       * Deserialize individual element\r\n       */\r\n      deserializeElement(serializedNode, doc) {\r\n        switch (serializedNode.type) {\r\n          case 'element':\r\n            return this.deserializeElementNode(serializedNode, doc);\r\n          case 'text':\r\n            return doc.createTextNode(serializedNode.content);\r\n          case 'comment':\r\n            return doc.createComment(serializedNode.content);\r\n          case 'fragment':\r\n            return this.deserializeDocumentFragment(serializedNode, doc);\r\n          case 'shadowRoot':\r\n            // Shadow roots are handled during element creation\r\n            return null;\r\n          default:\r\n            return null;\r\n        }\r\n      }\r\n    \r\n      /**\r\n       * Deserialize element node\r\n       */\r\n      deserializeElementNode(serializedElement, doc) {\r\n        const element = doc.createElement(serializedElement.tagName);\r\n    \r\n        // Set attributes\r\n        if (serializedElement.attributes) {\r\n          for (const [name, value] of Object.entries(serializedElement.attributes)) {\r\n            try {\r\n              element.setAttribute(name, value);\r\n            } catch (error) {\r\n              console.warn(`Failed to set attribute ${name}:`, error);\r\n            }\r\n          }\r\n        }\r\n    \r\n        // Apply computed styles if available\r\n        if (serializedElement.computedStyle && this.options.includeStyles) {\r\n          for (const [prop, value] of Object.entries(serializedElement.computedStyle)) {\r\n            try {\r\n              element.style.setProperty(prop, value);\r\n            } catch (error) {\r\n              console.warn(`Failed to set style ${prop}:`, error);\r\n            }\r\n          }\r\n        }\r\n    \r\n        // Create shadow root if present\r\n        if (serializedElement.shadowRoot && element.attachShadow) {\r\n          try {\r\n            const shadowRoot = element.attachShadow({ \r\n              mode: serializedElement.shadowRoot.mode || 'open' \r\n            });\r\n            \r\n            // Deserialize shadow root children\r\n            for (const child of serializedElement.shadowRoot.children) {\r\n              const childElement = this.deserializeElement(child, doc);\r\n              if (childElement) {\r\n                shadowRoot.appendChild(childElement);\r\n              }\r\n            }\r\n          } catch (error) {\r\n            console.warn('Failed to create shadow root:', error);\r\n          }\r\n        }\r\n    \r\n        // Deserialize children\r\n        if (serializedElement.children) {\r\n          for (const child of serializedElement.children) {\r\n            const childElement = this.deserializeElement(child, doc);\r\n            if (childElement) {\r\n              element.appendChild(childElement);\r\n            }\r\n          }\r\n        }\r\n    \r\n        // Handle frame content\r\n        if (serializedElement.frameData && serializedElement.frameData.content) {\r\n          // Frame content deserialization would happen after the frame loads\r\n          element.addEventListener('load', () => {\r\n            try {\r\n              const frameDoc = element.contentDocument;\r\n              if (frameDoc) {\r\n                this.deserializeDocument(serializedElement.frameData.content, frameDoc);\r\n              }\r\n            } catch (error) {\r\n              console.warn('Failed to deserialize frame content:', error);\r\n            }\r\n          });\r\n        }\r\n    \r\n        return element;\r\n      }\r\n    \r\n      /**\r\n       * Deserialize document fragment\r\n       */\r\n      deserializeDocumentFragment(serializedFragment, doc) {\r\n        const fragment = doc.createDocumentFragment();\r\n    \r\n        if (serializedFragment.children) {\r\n          for (const child of serializedFragment.children) {\r\n            const childElement = this.deserializeElement(child, doc);\r\n            if (childElement) {\r\n              fragment.appendChild(childElement);\r\n            }\r\n          }\r\n        }\r\n    \r\n        return fragment;\r\n      }\r\n    }\r\n    \r\n    // Usage example and utility functions\r\n    class DOMUtils {\r\n      /**\r\n       * Create serializer with common presets\r\n       */\r\n      static createSerializer(preset = 'default') {\r\n        const presets = {\r\n          default: {\r\n            includeStyles: true,\r\n            includeScripts: false,\r\n            includeFrames: true,\r\n            includeShadowDOM: true\r\n          },\r\n          minimal: {\r\n            includeStyles: false,\r\n            includeScripts: false,\r\n            includeFrames: false,\r\n            includeShadowDOM: false\r\n          },\r\n          complete: {\r\n            includeStyles: true,\r\n            includeScripts: true,\r\n            includeFrames: true,\r\n            includeShadowDOM: true\r\n          },\r\n          secure: {\r\n            includeStyles: true,\r\n            includeScripts: false,\r\n            includeFrames: false,\r\n            includeShadowDOM: true\r\n          }\r\n        };\r\n    \r\n        return new DOMSerializer(presets[preset] || presets.default);\r\n      }\r\n    \r\n      /**\r\n       * Serialize DOM to JSON string\r\n       */\r\n      static serializeToJSON(element, options) {\r\n        const serializer = new DOMSerializer(options);\r\n        const serialized = serializer.serialize(element);\r\n        return JSON.stringify(serialized, null, 2);\r\n      }\r\n    \r\n      /**\r\n       * Deserialize from JSON string\r\n       */\r\n      static deserializeFromJSON(jsonString, targetDocument) {\r\n        const serialized = JSON.parse(jsonString);\r\n        const serializer = new DOMSerializer();\r\n        return serializer.deserialize(serialized, targetDocument);\r\n      }\r\n    \r\n      /**\r\n       * Clone DOM with full fidelity including Shadow DOM\r\n       */\r\n      static deepClone(element, options) {\r\n        const serializer = new DOMSerializer(options);\r\n        const serialized = serializer.serialize(element);\r\n        return serializer.deserialize(serialized, element.ownerDocument);\r\n      }\r\n    \r\n      /**\r\n       * Compare two DOM structures\r\n       */\r\n      static compare(element1, element2, options) {\r\n        const serializer = new DOMSerializer(options);\r\n        const serialized1 = serializer.serialize(element1);\r\n        const serialized2 = serializer.serialize(element2);\r\n        \r\n        return JSON.stringify(serialized1) === JSON.stringify(serialized2);\r\n      }\r\n    }\r\n    \r\n    /*\r\n    // Export for use\r\n    if (typeof module !== 'undefined' && module.exports) {\r\n      module.exports = { DOMSerializer, DOMUtils };\r\n    } else if (typeof window !== 'undefined') {\r\n      window.DOMSerializer = DOMSerializer;\r\n      window.DOMUtils = DOMUtils;\r\n    }\r\n    */\r\n\r\n    /* Usage Examples:\r\n    \r\n    // Basic serialization\r\n    const serializer = new DOMSerializer();\r\n    const serialized = serializer.serialize(document);\r\n    console.log(JSON.stringify(serialized, null, 2));\r\n    \r\n    // Deserialize back to DOM\r\n    const clonedDoc = serializer.deserialize(serialized);\r\n    \r\n    // Using presets\r\n    const minimalSerializer = DOMUtils.createSerializer('minimal');\r\n    const secureSerializer = DOMUtils.createSerializer('secure');\r\n    \r\n    // Serialize specific element with Shadow DOM\r\n    const customElement = document.querySelector('my-custom-element');\r\n    const serializedElement = serializer.serialize(customElement);\r\n    \r\n    // JSON utilities\r\n    const jsonString = DOMUtils.serializeToJSON(document.body);\r\n    const restored = DOMUtils.deserializeFromJSON(jsonString);\r\n    \r\n    // Deep clone with Shadow DOM support\r\n    const clone = DOMUtils.deepClone(document.body, { includeShadowDOM: true });\r\n    \r\n    */\r\n\r\n    function serializeNodeToJSON(nodeElement) {\r\n      return DOMUtils.serializeToJSON(nodeElement, {includeStyles: false});\r\n    }\r\n\r\n    function deserializeNodeFromJSON(jsonString) {\r\n      return DOMUtils.deserializeFromJSON(jsonString);\r\n    }\n\n  /**\r\n   * Checks if a point is inside a bounding box\r\n   * \r\n   * @param point The point to check\r\n   * @param box The bounding box\r\n   * @returns boolean indicating if the point is inside the box\r\n   */\r\n  function isPointInsideBox(point, box) {\r\n    return point.x >= box.x &&\r\n          point.x <= box.x + box.width &&\r\n          point.y >= box.y &&\r\n          point.y <= box.y + box.height;\r\n  }\r\n\r\n  /**\r\n   * Calculates the overlap area between two bounding boxes\r\n   * \r\n   * @param box1 First bounding box\r\n   * @param box2 Second bounding box\r\n   * @returns The overlap area\r\n   */\r\n  function calculateOverlap(box1, box2) {\r\n    const xOverlap = Math.max(0,\r\n      Math.min(box1.x + box1.width, box2.x + box2.width) -\r\n      Math.max(box1.x, box2.x)\r\n    );\r\n    const yOverlap = Math.max(0,\r\n      Math.min(box1.y + box1.height, box2.y + box2.height) -\r\n      Math.max(box1.y, box2.y)\r\n    );\r\n    return xOverlap * yOverlap;\r\n  }\r\n\r\n  /**\r\n   * Finds an exact match between candidate elements and the actual interaction element\r\n   * \r\n   * @param candidate_elements Array of candidate element infos\r\n   * @param actualInteractionElementInfo The actual interaction element info\r\n   * @returns The matching candidate element info, or null if no match is found\r\n   */\r\n  function findExactMatch(candidate_elements, actualInteractionElementInfo) {\r\n    if (!actualInteractionElementInfo.element) {\r\n      return null;\r\n    }\r\n\r\n    const exactMatch = candidate_elements.find(elementInfo => \r\n      elementInfo.element && elementInfo.element === actualInteractionElementInfo.element\r\n    );\r\n    \r\n    if (exactMatch) {\r\n      console.log('✅ Found exact element match:', {\r\n        matchedElement: exactMatch.element?.tagName,\r\n        matchedElementClass: exactMatch.element?.className,\r\n        index: exactMatch.index\r\n      });\r\n      return exactMatch;\r\n    }\r\n    \r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Finds a match by traversing up the parent elements\r\n   * \r\n   * @param candidate_elements Array of candidate element infos\r\n   * @param actualInteractionElementInfo The actual interaction element info\r\n   * @returns The matching candidate element info, or null if no match is found\r\n   */\r\n  function findParentMatch(candidate_elements, actualInteractionElementInfo) {\r\n    if (!actualInteractionElementInfo.element) {\r\n      return null;\r\n    }\r\n\r\n    let element = actualInteractionElementInfo.element;\r\n    while (element.parentElement) {\r\n      element = element.parentElement;\r\n      const parentMatch = candidate_elements.find(candidate => \r\n        candidate.element && candidate.element === element\r\n      );\r\n      \r\n      if (parentMatch) {\r\n        console.log('✅ Found parent element match:', {\r\n          matchedElement: parentMatch.element?.tagName,\r\n          matchedElementClass: parentMatch.element?.className,\r\n          index: parentMatch.index,\r\n          depth: element.tagName\r\n        });\r\n        return parentMatch;\r\n      }\r\n      \r\n      // Stop if we hit another candidate element\r\n      if (candidate_elements.some(candidate => \r\n        candidate.element && candidate.element === element\r\n      )) {\r\n        console.log('⚠️ Stopped parent search - hit another candidate element:', element.tagName);\r\n        break;\r\n      }\r\n    }\r\n    \r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * Finds a match based on spatial relationships between elements\r\n   * \r\n   * @param candidate_elements Array of candidate element infos\r\n   * @param actualInteractionElementInfo The actual interaction element info\r\n   * @returns The matching candidate element info, or null if no match is found\r\n   */\r\n  function findSpatialMatch(candidate_elements, actualInteractionElementInfo) {\r\n    if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\r\n      return null;\r\n    }\r\n\r\n    const actualBox = actualInteractionElementInfo.bounding_box;\r\n    let bestMatch = null;\r\n    let bestScore = 0;\r\n\r\n    for (const candidateInfo of candidate_elements) {\r\n      if (!candidateInfo.bounding_box) continue;\r\n      \r\n      const candidateBox = candidateInfo.bounding_box;\r\n      let score = 0;\r\n\r\n      // Check if actual element is contained within candidate\r\n      if (isPointInsideBox({ x: actualBox.x, y: actualBox.y }, candidateBox) &&\r\n          isPointInsideBox({ x: actualBox.x + actualBox.width, y: actualBox.y + actualBox.height }, candidateBox)) {\r\n        score += 100; // High score for containment\r\n      }\r\n\r\n      // Calculate overlap area as a factor\r\n      const overlap = calculateOverlap(actualBox, candidateBox);\r\n      score += overlap;\r\n\r\n      // Consider proximity if no containment\r\n      if (score === 0) {\r\n        const distance = Math.sqrt(\r\n          Math.pow((actualBox.x + actualBox.width/2) - (candidateBox.x + candidateBox.width/2), 2) +\r\n          Math.pow((actualBox.y + actualBox.height/2) - (candidateBox.y + candidateBox.height/2), 2)\r\n        );\r\n        // Convert distance to a score (closer = higher score)\r\n        score = 1000 / (distance + 1);\r\n      }\r\n\r\n      if (score > bestScore) {\r\n        bestScore = score;\r\n        bestMatch = candidateInfo;\r\n        console.log('📏 New best spatial match:', {\r\n          element: candidateInfo.element?.tagName,\r\n          class: candidateInfo.element?.className,\r\n          index: candidateInfo.index,\r\n          score: score\r\n        });\r\n      }\r\n    }\r\n\r\n    if (bestMatch) {\r\n      console.log('✅ Final spatial match selected:', {\r\n      element: bestMatch.element?.tagName,\r\n      class: bestMatch.element?.className,\r\n      index: bestMatch.index,\r\n      finalScore: bestScore\r\n    });\r\n    return bestMatch;\r\n  }\r\n\r\n  return null;\r\n  }\r\n\r\n  /**\r\n   * Finds a matching candidate element for an actual interaction element\r\n   * \r\n   * @param candidate_elements Array of candidate element infos\r\n   * @param actualInteractionElementInfo The actual interaction element info\r\n   * @returns The matching candidate element info, or null if no match is found\r\n   */\r\n  function findMatchingCandidateElementInfo(candidate_elements, actualInteractionElementInfo) {\r\n    if (!actualInteractionElementInfo.element || !actualInteractionElementInfo.bounding_box) {\r\n      console.error('❌ Missing required properties in actualInteractionElementInfo');\r\n      return null;\r\n    }\r\n\r\n    console.log('🔍 Starting element matching for:', {\r\n      clickedElement: actualInteractionElementInfo.element.tagName,\r\n      clickedElementClass: actualInteractionElementInfo.element.className,\r\n      totalCandidates: candidate_elements.length\r\n    });\r\n\r\n    // First try exact element match\r\n    const exactMatch = findExactMatch(candidate_elements, actualInteractionElementInfo);\r\n    if (exactMatch) {\r\n      return exactMatch;\r\n    }\r\n    console.log('❌ No exact element match found, trying parent matching...');\r\n\r\n    // Try finding closest clickable parent\r\n    const parentMatch = findParentMatch(candidate_elements, actualInteractionElementInfo);\r\n    if (parentMatch) {\r\n      return parentMatch;\r\n    }\r\n    console.log('❌ No parent match found, falling back to spatial matching...');\r\n\r\n    // If no exact or parent match, look for spatial relationships\r\n    const spatialMatch = findSpatialMatch(candidate_elements, actualInteractionElementInfo);\r\n    if (spatialMatch) {\r\n      return spatialMatch;\r\n    }\r\n\r\n    console.error('❌ No matching element found for actual interaction element:', actualInteractionElementInfo);\r\n    return null;\r\n  }\n\n  const highlight = {\r\n    execute: async function(elementTypes, handleScroll=false) {\r\n      const elements = await findElements(elementTypes);\r\n      highlightElements(elements, handleScroll);\r\n      return elements;\r\n    },\r\n\r\n    unexecute: function(handleScroll=false) {\r\n      unhighlightElements(handleScroll);\r\n    },\r\n\r\n    generateJSON: async function() {\r\n      const json = {};\r\n\r\n     // Capture viewport dimensions\r\n     const viewportData = {\r\n      width: window.innerWidth,\r\n      height: window.innerHeight,\r\n      documentWidth: document.documentElement.clientWidth,\r\n      documentHeight: document.documentElement.clientHeight,\r\n      timestamp: new Date().toISOString()\r\n    };\r\n\r\n      // Add viewport data to the JSON output\r\n      json.viewport = viewportData;\r\n\r\n\r\n      await Promise.all(Object.values(ElementTag).map(async elementType => {\r\n        const elements = await findElements(elementType);\r\n        json[elementType] = elements;\r\n      }));\r\n\r\n      // Serialize the JSON object\r\n      const jsonString = JSON.stringify(json, null, 4); // Pretty print with 4 spaces\r\n\r\n      console.log(`JSON: ${jsonString}`);\r\n      return jsonString;\r\n    },\r\n\r\n    getElementInfo\r\n  };\r\n\r\n\r\n  function unhighlightElements(handleScroll=false) {\r\n    const documents = getAllFrames();\r\n    documents.forEach(doc => {\r\n      const overlay = doc.getElementById('highlight-overlay');\r\n      if (overlay) {\r\n        if (handleScroll) {\r\n          // Remove event listeners\r\n          doc.removeEventListener('scroll', overlay.scrollHandler, true);\r\n          doc.removeEventListener('resize', overlay.resizeHandler);\r\n        }\r\n        overlay.remove();\r\n      }\r\n    });\r\n  }\r\n\r\n\r\n\r\n\r\n  async function findElements(elementTypes, verbose=true) {\r\n    const typesArray = Array.isArray(elementTypes) ? elementTypes : [elementTypes];\r\n    console.log('Starting element search for types:', typesArray);\r\n\r\n    const elements = [];\r\n    typesArray.forEach(elementType => {\r\n      if (elementType === ElementTag.FILLABLE) {\r\n        elements.push(...findFillables());\r\n      }\r\n      if (elementType === ElementTag.SELECTABLE) {\r\n        elements.push(...findDropdowns());\r\n      }\r\n      if (elementType === ElementTag.CLICKABLE) {\r\n        elements.push(...findClickables());\r\n        elements.push(...findToggles());\r\n        elements.push(...findCheckables());\r\n      }\r\n      if (elementType === ElementTag.NON_INTERACTIVE_ELEMENT) {\r\n        elements.push(...findNonInteractiveElements());\r\n      }\r\n    });\r\n\r\n    // console.log('Before uniquify:', elements.length);\r\n    const elementsWithInfo = elements.map((element, index) => \r\n      getElementInfo(element, index)\r\n    );\r\n\r\n    \r\n    \r\n    const uniqueElements = uniquifyElements(elementsWithInfo);\r\n    console.log(`Found ${uniqueElements.length} elements:`);\r\n    \r\n    // More comprehensive visibility check\r\n    const visibleElements = uniqueElements.filter(elementInfo => {\r\n      const el = elementInfo.element;\r\n      const style = getComputedStyle(el);\r\n      \r\n      // Check various style properties that affect visibility\r\n      if (style.display === 'none' || \r\n          style.visibility === 'hidden') {\r\n        return false;\r\n      }\r\n      \r\n      // Check if element has non-zero dimensions\r\n      const rect = el.getBoundingClientRect();\r\n      if (rect.width === 0 || rect.height === 0) {\r\n        return false;\r\n      }\r\n      \r\n      // Check if element is within viewport\r\n      if (rect.bottom < 0 || \r\n          rect.top > window.innerHeight || \r\n          rect.right < 0 || \r\n          rect.left > window.innerWidth) {\r\n        // Element is outside viewport, but still might be valid \r\n        // if user scrolls to it, so we'll include it\r\n        return true;\r\n      }\r\n      \r\n      return true;\r\n    });\r\n    \r\n    console.log(`Out of which ${visibleElements.length} elements are visible:`);\r\n    if (verbose) {\r\n      visibleElements.forEach(info => {\r\n        console.log(`Element ${info.index}:`, info);\r\n      });\r\n    }\r\n    \r\n    return visibleElements;\r\n  }\r\n\r\n  // elements is an array of objects with index, xpath\r\n  function highlightElements(elements, handleScroll=false) {\r\n    // console.log('[highlightElements] called with', elements.length, 'elements');\r\n    // Create overlay if it doesn't exist and store it in a dictionary\r\n    const documents = getAllFrames();  \r\n    let overlays = {};\r\n    documents.forEach(doc => {\r\n      let overlay = doc.getElementById('highlight-overlay');\r\n      if (!overlay) {\r\n        overlay = doc.createElement('div');\r\n        overlay.id = 'highlight-overlay';\r\n        overlay.style.cssText = `\r\n        position: fixed;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        pointer-events: none;\r\n        z-index: 2147483647;\r\n      `;\r\n        doc.body.appendChild(overlay);\r\n        // console.log('[highlightElements] Created overlay in document:', doc);\r\n      }\r\n      overlays[doc.documentURI] = overlay;\r\n    });\r\n    \r\n\r\n    const updateHighlights = (doc = null) => {\r\n      if (doc) {\r\n        overlays[doc.documentURI].innerHTML = '';\r\n      } else {\r\n        Object.values(overlays).forEach(overlay => { overlay.innerHTML = ''; });\r\n      }    \r\n      elements.forEach((elementInfo, idx) => {\r\n        //console.log(`[highlightElements] Processing element ${idx}:`, elementInfo.tag, elementInfo.css_selector, elementInfo.bounding_box);\r\n        let element = elementInfo.element; //getElementByXPathOrCssSelector(elementInfo);\r\n        if (!element) {\r\n          element = getElementByXPathOrCssSelector(elementInfo);\r\n          if (!element) {\r\n            console.warn('[highlightElements] Could not find element for:', elementInfo);\r\n            return;\r\n          }\r\n        }\r\n        //if highlights requested for a specific doc, skip unrelated elements\r\n        if (doc && element.ownerDocument !== doc) {\r\n          console.log(\"[highlightElements] Skipped element since it doesn't belong to document\", doc);\r\n          return;\r\n        }\r\n        const rect = element.getBoundingClientRect();\r\n        if (rect.width === 0 || rect.height === 0) {\r\n          console.warn('[highlightElements] Element has zero dimensions:', elementInfo);\r\n          return;\r\n        }\r\n        // Create border highlight (red rectangle)\r\n        // use ownerDocument to support iframes/frames\r\n        const highlight = element.ownerDocument.createElement('div');\r\n        highlight.style.cssText = `\r\n        position: fixed;\r\n        left: ${rect.x}px;\r\n        top: ${rect.y}px;\r\n        width: ${rect.width}px;\r\n        height: ${rect.height}px;\r\n        border: 1px solid rgb(255, 0, 0);\r\n        transition: all 0.2s ease-in-out;\r\n      `;\r\n        // Create index label container - now positioned to the right and slightly up\r\n        const labelContainer = element.ownerDocument.createElement('div');\r\n        labelContainer.style.cssText = `\r\n        position: absolute;\r\n        right: -10px;     /* Offset to the right */\r\n        top: -10px;       /* Offset upwards */\r\n        padding: 4px;\r\n        background-color: rgba(255, 255, 0, 0.6);\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n      `;\r\n        const text = element.ownerDocument.createElement('span');\r\n        text.style.cssText = `\r\n        color: rgb(0, 0, 0, 0.8);\r\n        font-family: 'Courier New', Courier, monospace;\r\n        font-size: 12px;\r\n        font-weight: bold;\r\n        line-height: 1;\r\n      `;\r\n        text.textContent = elementInfo.index;\r\n        labelContainer.appendChild(text);\r\n        highlight.appendChild(labelContainer);      \r\n        overlays[element.ownerDocument.documentURI].appendChild(highlight);\r\n        \r\n      });\r\n    };\r\n\r\n    // Initial highlight\r\n    updateHighlights();\r\n\r\n    if (handleScroll) {\r\n      documents.forEach(doc => {\r\n        // Update highlights on scroll and resize\r\n        console.log('registering scroll and resize handlers for document: ', doc);\r\n        const scrollHandler = () => {\r\n          requestAnimationFrame(() => updateHighlights(doc));\r\n        };\r\n        const resizeHandler = () => {\r\n          updateHighlights(doc);\r\n        };\r\n        doc.addEventListener('scroll', scrollHandler, true);\r\n        doc.addEventListener('resize', resizeHandler);\r\n        // Store event handlers for cleanup\r\n        overlays[doc.documentURI].scrollHandler = scrollHandler;\r\n        overlays[doc.documentURI].resizeHandler = resizeHandler;\r\n      });    \r\n    }\r\n  }\r\n\r\n  // function unexecute() {\r\n  //   unhighlightElements();\r\n  // }\r\n\r\n  // Make it available globally for both Extension and Playwright\r\n  if (typeof window !== 'undefined') {\r\n    function stripElementRefs(elementInfo) {\r\n      if (!elementInfo) return null;\r\n      const { element, ...rest } = elementInfo;\r\n      return rest;\r\n    }\r\n\r\n    window.ProboLabs = window.ProboLabs || {};\r\n\r\n    // --- Caching State ---\r\n    window.ProboLabs.candidates = [];\r\n    window.ProboLabs.actual = null;\r\n    window.ProboLabs.matchingCandidate = null;\r\n\r\n    // --- Methods ---\r\n    /**\r\n     * Find and cache candidate elements of a given type (e.g., 'CLICKABLE').\r\n     * NOTE: This function is async and must be awaited from Playwright/Node.\r\n     */\r\n    window.ProboLabs.findAndCacheCandidateElements = async function(elementType) {\r\n      //console.log('[ProboLabs] findAndCacheCandidateElements called with:', elementType);\r\n      const found = await findElements(elementType);\r\n      window.ProboLabs.candidates = found;\r\n      // console.log('[ProboLabs] candidates set to:', found, 'type:', typeof found, 'isArray:', Array.isArray(found));\r\n      return found.length;\r\n    };\r\n\r\n    window.ProboLabs.findAndCacheActualElement = function(cssSelector, iframeSelector, isHover=false) {\r\n      // console.log('[ProboLabs] findAndCacheActualElement called with:', cssSelector, iframeSelector);\r\n      let el = findElement(document, iframeSelector, cssSelector);\r\n      if(isHover) {\r\n        const visibleElement = findClosestVisibleElement(el);\r\n        if (visibleElement) {\r\n          el = visibleElement;\r\n        }\r\n      }\r\n      if (!el) {\r\n        window.ProboLabs.actual = null;\r\n        // console.log('[ProboLabs] actual set to null');\r\n        return false;\r\n      }\r\n      window.ProboLabs.actual = getElementInfo(el, -1);\r\n      // console.log('[ProboLabs] actual set to:', window.ProboLabs.actual);\r\n      return true;\r\n    };\r\n\r\n    window.ProboLabs.findAndCacheMatchingCandidate = function() {\r\n      // console.log('[ProboLabs] findAndCacheMatchingCandidate called');\r\n      if (!window.ProboLabs.candidates.length || !window.ProboLabs.actual) {\r\n        window.ProboLabs.matchingCandidate = null;\r\n        // console.log('[ProboLabs] matchingCandidate set to null');\r\n        return false;\r\n      }\r\n      window.ProboLabs.matchingCandidate = findMatchingCandidateElementInfo(window.ProboLabs.candidates, window.ProboLabs.actual);\r\n      // console.log('[ProboLabs] matchingCandidate set to:', window.ProboLabs.matchingCandidate);\r\n      return !!window.ProboLabs.matchingCandidate;\r\n    };\r\n\r\n    window.ProboLabs.highlightCachedElements = function(which) {\r\n      let elements = [];\r\n      if (which === 'candidates') elements = window.ProboLabs.candidates;\r\n      if (which === 'actual' && window.ProboLabs.actual) elements = [window.ProboLabs.actual];\r\n      if (which === 'matching' && window.ProboLabs.matchingCandidate) elements = [window.ProboLabs.matchingCandidate];\r\n      console.log(`[ProboLabs] highlightCachedElements ${which} with ${elements.length} elements`);\r\n      highlightElements(elements);\r\n    };\r\n\r\n    window.ProboLabs.unhighlight = function() {\r\n      // console.log('[ProboLabs] unhighlight called');\r\n      unhighlightElements();\r\n    };\r\n\r\n    window.ProboLabs.reset = function() {\r\n      console.log('[ProboLabs] reset called');\r\n      window.ProboLabs.candidates = [];\r\n      window.ProboLabs.actual = null;\r\n      window.ProboLabs.matchingCandidate = null;\r\n      unhighlightElements();\r\n    };\r\n\r\n    window.ProboLabs.getCandidates = function() {\r\n      // console.log('[ProboLabs] getCandidates called. candidates:', window.ProboLabs.candidates, 'type:', typeof window.ProboLabs.candidates, 'isArray:', Array.isArray(window.ProboLabs.candidates));\r\n      const arr = Array.isArray(window.ProboLabs.candidates) ? window.ProboLabs.candidates : [];\r\n      return arr.map(stripElementRefs);\r\n    };\r\n    window.ProboLabs.getActual = function() {\r\n      return stripElementRefs(window.ProboLabs.actual);\r\n    };\r\n    window.ProboLabs.getMatchingCandidate = function() {\r\n      return stripElementRefs(window.ProboLabs.matchingCandidate);\r\n    };\r\n\r\n    // Retain existing API for backward compatibility\r\n    window.ProboLabs.ElementTag = ElementTag;\r\n    window.ProboLabs.highlightElements = highlightElements;\r\n    window.ProboLabs.unhighlightElements = unhighlightElements;\r\n    window.ProboLabs.findElements = findElements;\r\n    window.ProboLabs.getElementInfo = getElementInfo;\r\n    window.ProboLabs.highlight = window.ProboLabs.highlight;\r\n    window.ProboLabs.unhighlight = window.ProboLabs.unhighlight;\r\n\r\n    // --- Utility Functions ---\r\n    function findClosestVisibleElement(element) {\r\n      let current = element;\r\n      while (current) {\r\n        const style = window.getComputedStyle(current);\r\n        if (\r\n          style &&\r\n          style.display !== 'none' &&\r\n          style.visibility !== 'hidden' &&\r\n          current.offsetWidth > 0 &&\r\n          current.offsetHeight > 0\r\n        ) {\r\n          return current;\r\n        }\r\n        if (!current.parentElement || current === document.body) break;\r\n        current = current.parentElement;\r\n      }\r\n      return null;\r\n    }\r\n  }\n\n  exports.ElementInfo = ElementInfo;\n  exports.ElementTag = ElementTag;\n  exports.deserializeNodeFromJSON = deserializeNodeFromJSON;\n  exports.detectScrollableContainers = detectScrollableContainers;\n  exports.findElement = findElement;\n  exports.findElements = findElements;\n  exports.generateCssPath = generateCssPath;\n  exports.getAriaLabelledByText = getAriaLabelledByText;\n  exports.getContainingIframe = getContainingIframe;\n  exports.getElementInfo = getElementInfo;\n  exports.getRobustSelector = getRobustSelector;\n  exports.highlight = highlight;\n  exports.highlightElements = highlightElements;\n  exports.isScrollableContainer = isScrollableContainer;\n  exports.serializeNodeToJSON = serializeNodeToJSON;\n  exports.unhighlightElements = unhighlightElements;\n\n}));\n//# sourceMappingURL=probolabs.umd.js.map\n";
 var ApplyAIStatus;
 (function (ApplyAIStatus) {
     ApplyAIStatus["PREPARE_START"] = "PREPARE_START";
@@ -7,6 +7,7 @@ var ApplyAIStatus;
     ApplyAIStatus["SEND_START"] = "SEND_START";
     ApplyAIStatus["SEND_SUCCESS"] = "SEND_SUCCESS";
     ApplyAIStatus["SEND_ERROR"] = "SEND_ERROR";
+    ApplyAIStatus["APPLY_AI_ERROR"] = "APPLY_AI_ERROR";
     ApplyAIStatus["APPLY_AI_CANCELLED"] = "APPLY_AI_CANCELLED";
     ApplyAIStatus["SUMMARY_COMPLETED"] = "SUMMARY_COMPLETED";
     ApplyAIStatus["SUMMARY_ERROR"] = "SUMMARY_ERROR";
@@ -33,6 +34,7 @@ var WebSocketsMessageType;
     WebSocketsMessageType["INTERACTION_REPLAY_ERROR"] = "INTERACTION_REPLAY_ERROR";
     WebSocketsMessageType["INTERACTION_REPLAY_CANCELLED"] = "INTERACTION_REPLAY_CANCELLED";
     WebSocketsMessageType["INTERACTION_APPLY_AI_CANCELLED"] = "INTERACTION_APPLY_AI_CANCELLED";
+    WebSocketsMessageType["INTERACTION_APPLY_AI_ERROR"] = "INTERACTION_APPLY_AI_ERROR";
     WebSocketsMessageType["INTERACTION_STEP_CREATED"] = "INTERACTION_STEP_CREATED";
     WebSocketsMessageType["INTERACTION_APPLY_AI_SUMMARY_COMPLETED"] = "INTERACTION_APPLY_AI_SUMMARY_COMPLETED";
     WebSocketsMessageType["INTERACTION_APPLY_AI_SUMMARY_ERROR"] = "INTERACTION_APPLY_AI_SUMMARY_ERROR";
@@ -57,6 +59,10 @@ var PlaywrightAction;
     PlaywrightAction["VALIDATE_URL"] = "VALIDATE_URL";
     PlaywrightAction["VALIDATE"] = "VALIDATE";
     PlaywrightAction["SCROLL_TO_ELEMENT"] = "SCROLL_TO_ELEMENT";
+    PlaywrightAction["EXTRACT_VALUE"] = "EXTRACT_VALUE";
+    PlaywrightAction["ASK_AI"] = "ASK_AI";
+    PlaywrightAction["EXECUTE_SCRIPT"] = "EXECUTE_SCRIPT";
+    PlaywrightAction["UPLOAD_FILES"] = "UPLOAD_FILES";
 })(PlaywrightAction || (PlaywrightAction = {}));
 
 /**
@@ -93,7 +99,8 @@ class ProboLogger {
         const hours = String(now.getHours()).padStart(2, '0');
         const minutes = String(now.getMinutes()).padStart(2, '0');
         const seconds = String(now.getSeconds()).padStart(2, '0');
-        return `[${hours}:${minutes}:${seconds}] [${this.prefix}]`;
+        const milliseconds = String(now.getMilliseconds()).padStart(3, '0');
+        return `[${hours}:${minutes}:${seconds}.${milliseconds}] [${this.prefix}]`;
     }
     debug(...args) { if (this.shouldLog(ProboLogLevel.DEBUG))
         console.debug(this.preamble(), ...args); }
@@ -649,20 +656,22 @@ class ApiClient {
         var _a;
         try {
             const data = await response.json();
+            const error = `${(data === null || data === void 0 ? void 0 : data.error) || 'Unknown error'}`;
+            apiLogger.debug(`API response: ${JSON.stringify(data)}`);
             if (!response.ok) {
                 switch (response.status) {
                     case 401:
-                        throw new ApiError(401, 'Unauthorized - Invalid or missing authentication token');
+                        throw new ApiError(401, `Unauthorized - Invalid or missing authentication token: ${error}`);
                     case 403:
-                        throw new ApiError(403, 'Forbidden - You do not have permission to perform this action');
+                        throw new ApiError(403, `Forbidden - You do not have permission to perform this action: ${error}`);
                     case 400:
-                        throw new ApiError(400, 'Bad Request', data);
+                        throw new ApiError(400, `Bad Request: ${error}`);
                     case 404:
-                        throw new ApiError(404, 'Not Found', data);
+                        throw new ApiError(404, `Not Found: ${error}`);
                     case 500:
-                        throw new ApiError(500, 'Internal Server Error', data);
+                        throw new ApiError(500, `Internal Server Error: ${error}`);
                     default:
-                        throw new ApiError(response.status, `API Error: ${data.error || 'Unknown error'}`, data);
+                        throw new ApiError(response.status, `API Error: ${error}`);
                 }
             }
             return data;
@@ -817,6 +826,7 @@ class ApiClient {
         // Use POST /interaction-to-step/ endpoint
         apiLogger.debug(`converting interaction #${interaction.interactionId} to step`);
         return pRetry(async () => {
+            var _a, _b;
             const response = await fetch(`${this.apiUrl}/interaction-to-step/`, {
                 method: 'POST',
                 headers: this.getHeaders(),
@@ -826,8 +836,8 @@ class ApiClient {
                     interaction_id: interaction.interactionId,
                     action: interaction.action,
                     argument: interaction.argument,
-                    element_css_selector: interaction.elementInfo.css_selector,
-                    iframe_selector: interaction.elementInfo.iframe_selector,
+                    element_css_selector: ((_a = interaction.elementInfo) === null || _a === void 0 ? void 0 : _a.css_selector) || '',
+                    iframe_selector: ((_b = interaction.elementInfo) === null || _b === void 0 ? void 0 : _b.iframe_selector) || '',
                     prompt: interaction.nativeDescription,
                     vanilla_prompt: interaction.nativeDescription,
                     is_vanilla_prompt_robust: interaction.isNativeDescriptionElaborate || false,
@@ -877,8 +887,73 @@ class ApiClient {
         }
         return data;
     }
+    async askAI(question, scenarioName, screenshot, aiModel) {
+        apiLogger.debug(`Asking AI question: "${question}", scenarioName: ${scenarioName}`);
+        apiLogger.debug(`headers: ${JSON.stringify(this.getHeaders())}`);
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/api/ask-ai/`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                body: JSON.stringify({
+                    question: question,
+                    scenario_name: scenarioName,
+                    screenshot: screenshot,
+                    model: aiModel
+                }),
+            });
+            const data = await this.handleResponse(response);
+            return data;
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                apiLogger.warn(`API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
 } /* ApiClient */
 
+/**
+ * Available AI models for LLM operations
+ */
+var AIModel;
+(function (AIModel) {
+    AIModel["AZURE_GPT4"] = "azure-gpt4";
+    AIModel["AZURE_GPT4_MINI"] = "azure-gpt4-mini";
+    AIModel["GEMINI_1_5_FLASH"] = "gemini-1.5-flash";
+    AIModel["GEMINI_2_5_FLASH"] = "gemini-2.5-flash";
+    AIModel["GPT4"] = "gpt4";
+    AIModel["GPT4_MINI"] = "gpt4-mini";
+    AIModel["CLAUDE_3_5"] = "claude-3.5";
+    AIModel["GROK_2"] = "grok-2";
+    AIModel["LLAMA_4_SCOUT"] = "llama-4-scout";
+    AIModel["DEEPSEEK_V3"] = "deepseek-v3";
+})(AIModel || (AIModel = {}));
+
+const DEFAULT_PLAYWRIGHT_TIMEOUT_CONFIG = {
+    highlightTimeout: 500,
+    playwrightActionTimeout: 5000,
+    playwrightNavigationTimeout: 10000,
+    playwrightLocatorTimeout: 15000,
+};
+
+({
+    // API Configuration
+    apiKey: '',
+    apiEndPoint: 'https://api.probolabs.ai',
+    baseUrl: undefined,
+    // Scenario Configuration
+    scenarioName: 'new recording',
+    scenarioId: undefined,
+    aiModel: 'azure-gpt4-mini',
+    // Browser Configuration
+    resetBrowserBeforeReplay: true,
+    // UI Configuration
+    hover_enabled: true,
+    // Timeout Configuration (spread from PlaywrightTimeoutConfig)
+    ...DEFAULT_PLAYWRIGHT_TIMEOUT_CONFIG,
+});
+
 // Default logger instance
 const proboLogger = new ProboLogger('probolib');
 
@@ -1141,6 +1216,13 @@ async function executePlaywrightAction(page, action, value, iframe_selector, ele
                 locator = page.frameLocator(iframe_selector).locator(element_css_selector);
             else
                 locator = page.locator(element_css_selector);
+            // Fail fast: immediately validate that the element exists
+            try {
+                await locator.waitFor({ state: 'attached' });
+            }
+            catch (e) {
+                throw new Error(`Element not found with selector: ${element_css_selector}${iframe_selector ? ` in iframe: ${iframe_selector}` : ''}`);
+            }
             switch (action) {
                 case PlaywrightAction.CLICK:
                     await handlePotentialNavigation(page, locator, value);
@@ -1193,7 +1275,7 @@ async function executePlaywrightAction(page, action, value, iframe_selector, ele
                     await (locator === null || locator === void 0 ? void 0 : locator.selectOption(optsArr));
                     break;
                 case PlaywrightAction.CHECK_CHECKBOX:
-                    await (locator === null || locator === void 0 ? void 0 : locator.setChecked(value.toLowerCase() === 'true'));
+                    await (locator === null || locator === void 0 ? void 0 : locator.setChecked(value == true));
                     break;
                 case PlaywrightAction.SELECT_RADIO:
                 case PlaywrightAction.TOGGLE_SWITCH:
@@ -1213,7 +1295,7 @@ async function executePlaywrightAction(page, action, value, iframe_selector, ele
                         return false;
                     }
                     proboLogger.info('Validation *PASS*');
-                    break;
+                    return true;
                 case PlaywrightAction.VALIDATE_CONTAINS_VALUE:
                 case PlaywrightAction.VALIDATE:
                     const actualContains = await getElementValue(page, locator);
@@ -1223,7 +1305,7 @@ async function executePlaywrightAction(page, action, value, iframe_selector, ele
                         return false;
                     }
                     proboLogger.info('Validation *PASS*');
-                    break;
+                    return true;
                 case PlaywrightAction.VALIDATE_URL:
                     const currUrl = page.url();
                     if (currUrl !== value) {
@@ -1231,7 +1313,7 @@ async function executePlaywrightAction(page, action, value, iframe_selector, ele
                         return false;
                     }
                     proboLogger.info('Validation *PASS*');
-                    break;
+                    return true;
                 case PlaywrightAction.SCROLL_TO_ELEMENT:
                     //  Restore exact scroll positions from recording
                     const scrollData = JSON.parse(value);
@@ -1247,6 +1329,10 @@ async function executePlaywrightAction(page, action, value, iframe_selector, ele
                     }
                     await page.waitForTimeout(500);
                     break;
+                case PlaywrightAction.EXTRACT_VALUE:
+                    const extractedValue = await getElementValue(page, locator);
+                    proboLogger.debug(`extracted value is [${extractedValue}]`);
+                    return extractedValue;
                 default:
                     throw new Error(`Unknown action: ${action}`);
             }
@@ -1346,7 +1432,7 @@ async function executeCachedPlaywrightAction(page, action, value, iframe_selecto
                     return false;
                 }
                 proboLogger.info('Validation *PASS*');
-                break;
+                return true;
             case PlaywrightAction.VALIDATE_CONTAINS_VALUE:
             case PlaywrightAction.VALIDATE:
                 const actualContains = await getElementValue(page, locator);
@@ -1356,7 +1442,7 @@ async function executeCachedPlaywrightAction(page, action, value, iframe_selecto
                     return false;
                 }
                 proboLogger.info('Validation *PASS*');
-                break;
+                return true;
             case PlaywrightAction.VALIDATE_URL:
                 const currUrl = page.url();
                 if (currUrl !== value) {
@@ -1364,7 +1450,11 @@ async function executeCachedPlaywrightAction(page, action, value, iframe_selecto
                     return false;
                 }
                 proboLogger.info('Validation *PASS*');
-                break;
+                return true;
+            case PlaywrightAction.EXTRACT_VALUE:
+                const extractedValue = await getElementValue(page, locator);
+                proboLogger.debug(`extracted value is [${extractedValue}]`);
+                return extractedValue;
             default:
                 throw new Error(`Unknown action: ${action}`);
         }
@@ -1403,6 +1493,31 @@ async function clickAtPosition(page, locator, clickPosition) {
         }
     }
 }
+/**
+   * Traverses up the DOM from the given locator to find the closest visible ancestor.
+   * Returns a Locator for the first visible element found, or null if none is visible up to <html>.
+   *
+   * @param locator - The Playwright locator to start searching from
+   * @returns Promise that resolves to a visible ancestor locator or null if none found
+   */
+async function findClosestVisibleElement(locator) {
+    let currentLocator = locator;
+    let parentLocator;
+    while (true) {
+        if (await currentLocator.isVisible()) {
+            return currentLocator;
+        }
+        // Move up to the parent element
+        parentLocator = currentLocator.locator('..');
+        // Check if we've reached the top of the DOM
+        const tagName = await parentLocator.evaluate(el => el.tagName).catch(() => null);
+        if (!tagName || tagName === 'HTML' || tagName === 'BODY') {
+            break;
+        }
+        currentLocator = parentLocator;
+    }
+    return null;
+}
 
 class Highlighter {
     constructor(enableConsoleLogs = true) {
@@ -1579,24 +1694,326 @@ class Highlighter {
     }
 }
 
-// const proboLogger = new ProboLogger('probo-playwright');
-/**
- * Available AI models for LLM operations
- */
-var AIModel;
-(function (AIModel) {
-    AIModel["AZURE_GPT4"] = "AZURE_GPT4";
-    AIModel["AZURE_GPT4_MINI"] = "AZURE_GPT4_MINI";
-    AIModel["GEMINI_1_5_FLASH"] = "GEMINI_1_5_FLASH";
-    AIModel["GEMINI_2_5_FLASH"] = "GEMINI_2_5_FLASH";
-    AIModel["GPT4"] = "GPT4";
-    AIModel["GPT4_MINI"] = "GPT4_MINI";
-    AIModel["CLAUDE_3_5"] = "CLAUDE_3_5";
-    AIModel["GROK_2"] = "GROK_2";
-    AIModel["LLAMA_4_SCOUT"] = "LLAMA_4_SCOUT";
-    AIModel["DEEPSEEK_V3"] = "DEEPSEEK_V3";
-    AIModel["DEFAULT_AI_MODEL"] = "DEFAULT_AI_MODEL";
-})(AIModel || (AIModel = {}));
+class ProboPlaywright {
+    constructor(config = DEFAULT_PLAYWRIGHT_TIMEOUT_CONFIG, page = null) {
+        this.page = null;
+        this.config = config;
+        this.setPage(page);
+    }
+    /**
+     * Sets the Playwright page instance for this ProboPlaywright instance.
+     * Also applies the configured default navigation and action timeouts to the page.
+     *
+     * @param page - The Playwright Page instance to use, or null to unset.
+     */
+    setPage(page) {
+        this.page = page;
+        if (this.page) {
+            this.page.setDefaultNavigationTimeout(this.config.playwrightNavigationTimeout);
+            this.page.setDefaultTimeout(this.config.playwrightActionTimeout);
+        }
+    }
+    /**
+     * Executes a single step in the test scenario with the specified action on the target element.
+     * Handles iframe navigation, element highlighting, and various Playwright actions like click, fill, validate, etc.
+     *
+     * @param params - Configuration object containing element selectors, action type, arguments, and display options
+     * @returns Promise that resolves to a result object for extract actions, or void for other actions
+     * @throws Error if element is not found or validation fails
+     */
+    async runStep(params) {
+        const { iframeSelector, elementSelector, action, argument = '', annotation = '', } = params;
+        // 0. Check that page is set
+        if (!this.page) {
+            throw new Error('ProboPlaywright: Page is not set');
+        }
+        // 1. Get the locator (iframe or not)
+        let locator;
+        if (iframeSelector && iframeSelector.length > 0) {
+            locator = this.page.frameLocator(iframeSelector).locator(elementSelector);
+        }
+        else {
+            locator = this.page.locator(elementSelector);
+        }
+        // Fail fast: immediately validate that the element exists
+        try {
+            await locator.waitFor({ state: 'attached', timeout: this.config.playwrightLocatorTimeout });
+        }
+        catch (e) {
+            throw new Error(`Element not found with selector: ${elementSelector}${iframeSelector ? ` in iframe: ${iframeSelector}` : ''}`);
+        }
+        if (action === PlaywrightAction.HOVER) {
+            const visibleLocator = await findClosestVisibleElement(locator);
+            if (visibleLocator) {
+                locator = visibleLocator;
+            }
+        }
+        // 2. Highlight, wait, unhighlight if highlightTimeout > 0
+        if (this.config.highlightTimeout > 0) {
+            await this.highlight(locator, annotation);
+            await this.page.waitForTimeout(this.config.highlightTimeout);
+            await this.unhighlight(locator);
+        }
+        // 3. Action logic
+        switch (action) {
+            case PlaywrightAction.CLICK:
+            case PlaywrightAction.CHECK_CHECKBOX:
+            case PlaywrightAction.SELECT_RADIO:
+                await this.robustClick(locator);
+                break;
+            case PlaywrightAction.FILL_IN:
+                await this.robustFill(locator, argument);
+                break;
+            case PlaywrightAction.SELECT_DROPDOWN:
+                await locator.selectOption(argument);
+                break;
+            case PlaywrightAction.VALIDATE:
+            case PlaywrightAction.VALIDATE_EXACT_VALUE:
+            case PlaywrightAction.VALIDATE_CONTAINS_VALUE:
+                const actualText = await this.getTextValue(locator);
+                if (actualText !== argument) {
+                    throw new Error(`Validation failed. Expected text "${argument}", but got "${actualText}".`);
+                }
+                break;
+            case PlaywrightAction.HOVER:
+                //console.log('HOVER', locator);
+                if (locator) {
+                    //console.log('executing HOVER on closest visible ancestor');
+                    await locator.hover();
+                }
+                break;
+            case PlaywrightAction.SCROLL_TO_ELEMENT:
+                //  Restore exact scroll positions from recording
+                const scrollData = JSON.parse(argument);
+                try {
+                    console.log('🔄 Restoring scroll position for container:', locator, 'scrollTop:', scrollData.scrollTop, 'scrollLeft:', scrollData.scrollLeft);
+                    await locator.evaluate((el, scrollData) => {
+                        // el.scrollTop = scrollData.scrollTop;
+                        // el.scrollLeft = scrollData.scrollLeft;
+                        el.scrollTo({ left: scrollData.scrollLeft, top: scrollData.scrollTop, behavior: 'smooth' });
+                    }, { scrollTop: scrollData.scrollTop, scrollLeft: scrollData.scrollLeft }, { timeout: 2000 });
+                }
+                catch (e) {
+                    console.error('🔄 Failed to restore scroll position for container:', locator, 'scrollTop:', scrollData.scrollTop, 'scrollLeft:', scrollData.scrollLeft, 'error:', e);
+                }
+                await this.page.waitForTimeout(500);
+                break;
+            case PlaywrightAction.UPLOAD_FILES:
+                await locator.setInputFiles(argument);
+                break;
+            case PlaywrightAction.EXTRACT_VALUE:
+                let extractedText = await this.getTextValue(locator);
+                return { key: 'extractedValue', value: extractedText };
+            default:
+                throw new Error(`Unhandled action: ${action}`);
+        }
+    }
+    /**
+     * Creates a visual highlight overlay on the target element with optional annotation text.
+     * The highlight appears as a red border around the element and can include descriptive text.
+     *
+     * @param locator - The Playwright locator for the element to highlight
+     * @param annotation - Optional text annotation to display above/below the highlighted element
+     */
+    async highlight(locator, annotation = null) {
+        try {
+            await locator.evaluate((el) => {
+                const overlay = el.ownerDocument.createElement('div');
+                overlay.id = 'highlight-overlay';
+                overlay.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+            pointer-events: none;
+            z-index: 2147483647;
+        `;
+                el.ownerDocument.body.appendChild(overlay);
+                const bbox = el.getBoundingClientRect();
+                const highlight = el.ownerDocument.createElement('div');
+                highlight.style.cssText = `
+          position: fixed;
+          left: ${bbox.x}px;
+          top: ${bbox.y}px;
+          width: ${bbox.width}px;
+          height: ${bbox.height}px;
+          border: 2px solid rgb(255, 0, 0);
+          transition: all 0.2s ease-in-out;
+        `;
+                overlay.appendChild(highlight);
+            }, { timeout: 500 });
+        }
+        catch (e) {
+            console.log('highlight: failed to run locator.evaluate()', e);
+        }
+        if (annotation) {
+            await locator.evaluate((el, annotation) => {
+                const overlay = el.ownerDocument.getElementById('highlight-overlay');
+                if (overlay) {
+                    const bbox = el.getBoundingClientRect();
+                    const annotationEl = el.ownerDocument.createElement('div');
+                    annotationEl.style.cssText = `
+            position: fixed;
+            left: ${bbox.x}px;
+            top: ${bbox.y - 25}px;
+            padding: 2px 6px;
+            background-color: rgba(255, 255, 0, 0.6);
+            color: black;
+            font-size: 16px;
+            font-family: 'Courier New', Courier, monospace;
+            font-weight: bold;
+            border-radius: 3px;
+            pointer-events: none;
+            z-index: 2147483647;
+          `;
+                    annotationEl.textContent = annotation;
+                    // If element is too close to top of window, position annotation below
+                    if (bbox.y < 30) {
+                        annotationEl.style.top = `${bbox.y + bbox.height + 5}px`;
+                    }
+                    overlay.appendChild(annotationEl);
+                }
+            }, annotation, { timeout: 500 });
+        }
+    }
+    ;
+    /**
+     * Removes the highlight overlay from the target element.
+     * Cleans up the visual highlighting created by the highlight method.
+     *
+     * @param locator - The Playwright locator for the element to unhighlight
+     */
+    async unhighlight(locator) {
+        try {
+            await locator.evaluate((el) => {
+                const overlay = el.ownerDocument.getElementById('highlight-overlay');
+                if (overlay) {
+                    overlay.remove();
+                }
+            }, { timeout: 500 });
+        }
+        catch (e) {
+            console.log('unhighlight: failed to run locator.evaluate()', e);
+        }
+    }
+    ;
+    /**
+     * Attempts to fill a form field with the specified value using multiple fallback strategies.
+     * First tries the standard fill method, then falls back to click + type if needed.
+     *
+     * @param locator - The Playwright locator for the input element
+     * @param value - The text value to fill into the input field
+     */
+    async robustFill(locator, value) {
+        if (!this.page) {
+            throw new Error('ProboPlaywright: Page is not set');
+        }
+        try {
+            await locator.fill(value);
+            return;
+        }
+        catch (err) {
+            console.warn('robustFill: failed to run locator.fill()', err);
+        }
+        // fallback: click and type
+        try {
+            await this.robustClick(locator);
+            await this.page.keyboard.type(value);
+            return;
+        }
+        catch (err) {
+            console.warn('robustFill: failed to run locator.click() and page.keyboard.type()', err);
+        }
+    }
+    ;
+    /**
+     * Performs a robust click operation using multiple fallback strategies.
+     * Attempts standard click first, then mouse click at center coordinates, and finally native DOM events.
+     *
+     * @param locator - The Playwright locator for the element to click
+     * @throws Error if all click methods fail
+     */
+    async robustClick(locator) {
+        if (!this.page) {
+            throw new Error('ProboPlaywright: Page is not set');
+        }
+        // start with a standard click
+        try {
+            await locator.click({ noWaitAfter: false, timeout: this.config.playwrightActionTimeout });
+            return;
+        }
+        catch (err) {
+            console.warn('robustClick: failed to run locator.click(), trying mouse.click()');
+        }
+        // try clicking using mouse at the center of the element
+        try {
+            const bbox = await locator.boundingBox({ timeout: this.config.playwrightLocatorTimeout });
+            if (bbox) {
+                await this.page.mouse.click(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
+                return;
+            }
+            else {
+                console.warn('robustClick: bounding box not found');
+            }
+        }
+        catch (err2) {
+            console.warn('robustClick: failed to run page.mouse.click()');
+        }
+        // fallback: dispatch native mouse events manually
+        try {
+            await locator.evaluate((el) => {
+                ['mousedown', 'mouseup', 'click'].forEach(type => {
+                    const event = new MouseEvent(type, {
+                        bubbles: true,
+                        cancelable: true,
+                        view: window
+                    });
+                    el.dispatchEvent(event);
+                });
+            }, { timeout: this.config.playwrightActionTimeout });
+        }
+        catch (err3) {
+            console.error('robustClick: all click methods failed:', err3);
+            throw err3; // Re-throw final error if all fallbacks fail
+        }
+    }
+    ;
+    /**
+     * Extracts text content from an element using multiple strategies.
+     * Tries textContent first, then inputValue, and finally looks for nested input elements.
+     * Returns normalized and trimmed text for consistent comparison.
+     *
+     * @param locator - The Playwright locator for the element to extract text from
+     * @returns Normalized text content with consistent whitespace handling
+     */
+    async getTextValue(locator) {
+        let textValue = await locator.textContent();
+        if (!textValue) {
+            try {
+                textValue = await locator.inputValue();
+            }
+            catch (err) {
+                console.warn('getTextValue: failed to run locator.inputValue()', err);
+            }
+        }
+        if (!textValue) {
+            try {
+                textValue = await locator.locator('input').inputValue();
+            }
+            catch (err) {
+                console.warn('getTextValue: failed to run locator.locator("input").inputValue()', err);
+            }
+        }
+        if (!textValue) {
+            textValue = '';
+        }
+        // Trim and normalize whitespace to make comparison more robust
+        return textValue.trim().replace(/\s+/g, ' ');
+    }
+    ;
+} /* class ProboPlaywright */
+
 const retryOptions = {
     retries: 3,
     minTimeout: 1000,
@@ -1606,7 +2023,7 @@ const retryOptions = {
     }
 };
 class Probo {
-    constructor({ scenarioName, token = '', apiUrl = '', enableConsoleLogs = false, logToConsole = true, logToFile = false, debugLevel = ProboLogLevel.INFO, aiModel = AIModel.DEFAULT_AI_MODEL }) {
+    constructor({ scenarioName, token = '', apiUrl = '', enableConsoleLogs = false, logToConsole = true, logToFile = false, debugLevel = ProboLogLevel.INFO, aiModel = AIModel.AZURE_GPT4_MINI }) {
         // Configure logger transports and level
         // configureLogger({ logToConsole, logToFile, level: debugLevel });
         proboLogger.setLogLevel(debugLevel);
@@ -1625,9 +2042,19 @@ class Probo {
         this.enableConsoleLogs = enableConsoleLogs;
         this.scenarioName = scenarioName;
         this.aiModel = aiModel;
+        // set the log level for the api client
+        apiLogger.setLogLevel(debugLevel);
         proboLogger.info(`Initializing: scenario=${scenarioName}, apiUrl=${apiEndPoint}, ` +
             `enableConsoleLogs=${enableConsoleLogs}, debugLevel=${debugLevel}, aiModel=${aiModel}`);
     }
+    async askAI(page, question) {
+        var _a, _b;
+        const response = await this.askAIHelper(page, question);
+        if ((_a = response === null || response === void 0 ? void 0 : response.result) === null || _a === void 0 ? void 0 : _a.error) {
+            throw new Error(response.result.error);
+        }
+        return (_b = response === null || response === void 0 ? void 0 : response.result) === null || _b === void 0 ? void 0 : _b.answer;
+    }
     async runStep(page, stepPrompt, argument = null, options = { useCache: true, stepIdFromServer: undefined, aiModel: this.aiModel }) {
         // Use the aiModel from options if provided, otherwise use the one from constructor
         const aiModelToUse = options.aiModel !== undefined ? options.aiModel : this.aiModel;
@@ -1636,10 +2063,10 @@ class Probo {
         // First check if the step exists in the database
         let stepId;
         if (options.useCache) {
-            const isCachedStep = await this._handleCachedStep(page, stepPrompt, argument);
+            const [isCachedStep, returnValue] = await this._handleCachedStep(page, stepPrompt, argument);
             if (isCachedStep) {
                 proboLogger.debug('performed cached step!');
-                return true;
+                return returnValue;
             }
         }
         proboLogger.debug(`Cache disabled or step not found, creating new step`);
@@ -1657,7 +2084,7 @@ class Probo {
                     if (nextInstruction.args.success) {
                         proboLogger.info(`Reasoning: ${nextInstruction.args.message}`);
                         proboLogger.info('Step completed successfully');
-                        return nextInstruction.args.status;
+                        return nextInstruction.args.return_value;
                     }
                     else {
                         throw new Error(nextInstruction.args.message);
@@ -1710,25 +2137,26 @@ class Probo {
             proboLogger.debug(`Step in the DB: #${result.step.id} status: ${result.step.status} action: ${result.step.action} argument: ${actionArgument} locator: ${result.step.element_css_selector}`);
             if (result.step.status !== 'EXECUTED') {
                 proboLogger.debug(`Step ${result.step.id} is not executed, returning false`);
-                return false;
+                return [false, false];
             }
             proboLogger.debug(`Step ${result.step.id} is in status executed, performing action directly with Playwright`);
             const element_css_selector = result.step.element_css_selector;
             const iframe_selector = result.step.iframe_selector;
+            let returnValue;
             try {
-                await executeCachedPlaywrightAction(page, result.step.action, actionArgument, iframe_selector, element_css_selector);
+                returnValue = await executeCachedPlaywrightAction(page, result.step.action, actionArgument, iframe_selector, element_css_selector);
             }
             catch (error) {
                 proboLogger.error(`Error executing action for step ${result.step.id} going to reset the step`);
                 proboLogger.debug('Error details:', error);
                 await this.apiClient.resetStep(result.step.id);
-                return false;
+                return [false, false];
             }
-            return true;
+            return [true, returnValue];
         }
         else {
             proboLogger.debug(`Step not found in database, continuing with the normal flow`);
-            return false;
+            return [false, false];
         }
     }
     async _handleStepCreation(page, stepPrompt, stepIdFromServer, useCache) {
@@ -1780,6 +2208,9 @@ class Probo {
     async highlightElement(page, element_css_selector, iframe_selector, element_index) {
         return this.highlighter.highlightElement(page, element_css_selector, iframe_selector, element_index);
     }
+    async waitForMutationsToSettle(page, timeout = 1500, initTimeout = 2000) {
+        return waitForMutationsToSettle(page, timeout, initTimeout);
+    }
     async screenshot(page) {
         proboLogger.debug(`taking screenshot of current page: ${page.url()}`);
         // await page.evaluate(() => document.fonts?.ready.catch(() => {}));
@@ -1803,7 +2234,13 @@ class Probo {
             proboLogger.debug('Highlighted element');
         }
         const pre_action_screenshot_url = await this.screenshot(page);
-        const step_status = await executePlaywrightAction(page, action, value, iframe_selector, element_css_selector);
+        const returnValue = await executePlaywrightAction(page, action, value, iframe_selector, element_css_selector);
+        let stepStatus;
+        if ([PlaywrightAction.VALIDATE, PlaywrightAction.VALIDATE_EXACT_VALUE,
+            PlaywrightAction.VALIDATE_CONTAINS_VALUE, PlaywrightAction.VALIDATE_URL].includes(action))
+            stepStatus = returnValue;
+        else
+            stepStatus = true;
         await this.unhighlightElements(page);
         proboLogger.debug('UnHighlighted element');
         await waitForMutationsToSettle(page);
@@ -1835,13 +2272,32 @@ class Probo {
                 pre_action_screenshot_url: pre_action_screenshot_url,
                 post_action_screenshot_url: post_action_screenshot_url,
                 post_html_content: post_html_content,
-                validation_status: step_status !== null && step_status !== void 0 ? step_status : true
+                validation_status: stepStatus,
+                return_value: returnValue
             }
         };
         return executed_instruction;
     }
+    async askAIHelper(page, question) {
+        proboLogger.debug(`🔍 [askAI] Asking AI question: "${question}", scenarioName: ${this.scenarioName}, aiModel: ${this.aiModel}`);
+        try {
+            // Get current page and capture screenshot      
+            const screenshot = await this.screenshot(page);
+            proboLogger.debug(`📸 [askAI] Screenshot captured: ${screenshot}`);
+            proboLogger.debug(`📤 [askAI] Sending chat request to backend`);
+            // Use ApiClient to send request to backend API      
+            const serverResponse = await this.apiClient.askAI(question, this.scenarioName, screenshot, this.aiModel);
+            proboLogger.debug(`✅ [askAI] Chat response received successfully`);
+            // Return the answer from the result, or the reasoning if no answer
+            return serverResponse;
+        }
+        catch (error) {
+            proboLogger.error(`❌ [askAI] Error in askAI: ${error}`);
+            throw error;
+        }
+    }
 }
 // export const highlighterCode = '';
 
-export { AIModel, Highlighter, PlaywrightAction, Probo, ProboLogLevel, executeCachedPlaywrightAction, executePlaywrightAction };
+export { Highlighter, PlaywrightAction, Probo, ProboLogLevel, ProboPlaywright, executeCachedPlaywrightAction, executePlaywrightAction, findClosestVisibleElement };
 //# sourceMappingURL=index.js.map