@probolabs/playwright 0.1.0 → 0.1.3

package/dist/index.js

@@ -0,0 +1,1177 @@
+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}) {\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.element = element;\r\n      this.depth = -1;\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.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  // 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;\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\"]').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).*/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'].includes(el.tagName.toLowerCase());\r\n      // const comboboxTag = el.tagName.toLowerCase().includes('combobox-item');\r\n      const style = window.getComputedStyle(el); \r\n      const result = hasDropdownClass && validTag && style.cursor === 'pointer';\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\"]'));\r\n\r\n    dropdowns.push(...getAllElementsIncludingShadow('nav ul li'));\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[href]')];\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  /**\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    let element;\r\n\r\n    if (element_info.xpath) { //try xpath if exists\r\n      element = document.evaluate(\r\n        element_info.xpath, \r\n        document, \r\n        null, \r\n        XPathResult.FIRST_ORDERED_NODE_TYPE, \r\n        null\r\n      ).singleNodeValue;\r\n    \r\n      if (!element) {\r\n        console.warn('Failed to find element with xpath:', element_info.xpath);\r\n      }\r\n    }\r\n    else { //try CSS selector\r\n      element = querySelectorShadow(element_info.css_selector);\r\n      // console.log('found element by CSS elector: ', element);\r\n      if (!element) {\r\n        console.warn('Failed to find element with CSS selector:', element_info.css_selector);\r\n      }\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.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    const path = [];\r\n    while (element.nodeType === Node.ELEMENT_NODE) {    \r\n      let selector = element.nodeName.toLowerCase();\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      let singleChild = true;\r\n      while (sibling = sibling.nextElementSibling) {\r\n        if (sibling.nodeName.toLowerCase() === selector) {\r\n          singleChild = false;\r\n          break;\r\n        }\r\n      }\r\n      if (nth > 1 || !singleChild) selector += `:nth-of-type(${nth})`;\r\n    \r\n      path.unshift(selector);\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.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    }\r\n    return path.join(' > ');\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 getElementInfo(element, index) {\r\n\r\n    const xpath = generateXPath(element);\r\n    const css_selector = generateCssPath(element);\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, //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    });\r\n  }\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  function uniquifyElements(elements) {\r\n    const seen = new Set();\r\n    console.log(`Starting uniquification with ${elements.length} elements`);\r\n    // First filter out elements with zero dimensions\r\n    const nonZeroElements = elements.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    // nonZeroElements.forEach(element_info => seen.add(element_info.css_selector));\r\n      \r\n    // nonZeroElements.forEach(info => {    \r\n    //     console.log(`Element ${info.index}:`, info);    \r\n    // });\r\n    \r\n    const filteredByParent = nonZeroElements.filter(element_info => {\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      // 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        return areElementsOverlapping(element, other);\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    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    //remove bogus links\r\n    // const finalResults = filteredResults.filter(elementInfo => {\r\n    //   //ignore non-link elements\r\n    //   if (elementInfo.tag !== 'a')\r\n    //     return true;\r\n    //   const special_link = elementInfo.element.getAttribute('data-special-link');\r\n    //   return !special_link || special_link!=='true';\r\n    // });\r\n\r\n    // further cleanup of of the element html to remove any element that we have already seen\r\n      \r\n    \r\n    // for debugging purposes, add a data-probolabs_index attribute to the element\r\n    // filteredResults.forEach((elementInfo, index) => {\r\n    //   // elementInfo.index = index.toString();\r\n    //   const foundElement = elementInfo.element; //getElementByXPathOrCssSelector(element);\r\n    //   if (foundElement) {\r\n    //     foundElement.dataset.probolabs_index = index.toString();\r\n    //   }\r\n    // });\r\n\r\n    // final path cleanup the html\r\n    // filteredResults.forEach(elementInfo => {\r\n    //   const foundElement = elementInfo.element; //getElementByXPathOrCssSelector(element);\r\n    //   if (foundElement) {\r\n    //     //  const parser = new DOMParser();\r\n    //     //  const doc = parser.parseFromString(foundElement.outerHTML, \"text/html\");\r\n    //     //  doc.querySelectorAll('[data-probolabs_index]').forEach(el => {\r\n    //     //    if (el.dataset.probolabs_index !== element.index) {\r\n    //     //      el.remove();\r\n    //     //    }\r\n    //     //  });\r\n    //     //  // Get the first element from the processed document\r\n    //     //  const container = doc.body.firstElementChild;\r\n    //     const clone = foundElement.cloneNode(false);  // false = don't clone children\r\n    //     elementInfo.element.html = clone.outerHTML;\r\n    //   }\r\n    // });\r\n\r\n    return nonOverlaidElements;\r\n\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    // console.log(`shouldKeepNestedElement: ${elementInfo.tag} ${elementInfo.text} ${elementInfo.xpath} -> ${parentXPath} -> ${result}`);\r\n    return result;\r\n  }\r\n\r\n  function isOverlaid(elementInfo) {\r\n    const element = elementInfo.element;\r\n    const boundingRect = element.getBoundingClientRect();\r\n    \r\n    // for (let x of [boundingRect.left, boundingRect.left + boundingRect.width]) {\r\n    //   for (let y of [boundingRect.top, boundingRect.top + boundingRect.height]) {\r\n    const elementAtPoint = element.ownerDocument.elementFromPoint(boundingRect.x + boundingRect.width/2, boundingRect.y + boundingRect.height/2);        \r\n    \r\n    return elementAtPoint && elementAtPoint !== element && !isDecendent(element, elementAtPoint) && !isDecendent(elementAtPoint, element);\r\n          // return true;\r\n    //   }\r\n    // }\r\n    // return false;\r\n  }\r\n\r\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  };\n\n  const highlight = {\r\n    execute: async function(elementTypes, handleScroll=false) {\r\n      const elements = await findElements(elementTypes);\r\n      highlightElements(elements);\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      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) {\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    const uniqueElements = uniquifyElements(elementsWithInfo);\r\n    console.log(`Found ${uniqueElements.length} elements:`);\r\n    const visibleElements = uniqueElements.filter(elementInfo => \r\n      getComputedStyle(elementInfo.element).display !== 'none'\r\n    );\r\n    console.log(`Out of which ${visibleElements.length} elements are visible:`);\r\n    visibleElements.forEach(info => {\r\n      console.log(`Element ${info.index}:`, info);\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) {\r\n    // console.log('Starting highlight for elements:', elements);\r\n    \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: 10000;\r\n      `;\r\n        doc.body.appendChild(overlay);\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 => {\r\n        // console.log('updateHighlights-Processing elementInfo:', elementInfo);\r\n        let element = elementInfo.element; //getElementByXPathOrCssSelector(elementInfo);\r\n        if (!element) {\r\n          element = getElementByXPathOrCssSelector(elementInfo);\r\n          if (!element)\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(\"skipped element \", element, \" since it doesn't belong to document \", doc);\r\n          return;\r\n        }\r\n\r\n        const rect = element.getBoundingClientRect();\r\n        // console.log('Element rect:', elementInfo.tag, rect);\r\n        \r\n        if (rect.width === 0 || rect.height === 0) {\r\n          console.warn('Element has zero dimensions:', elementInfo);\r\n          return;\r\n        }\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\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\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        \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    // Initial highlight\r\n    updateHighlights();\r\n\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  // 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    window.ProboLabs = {\r\n      ElementTag,\r\n      highlight,\r\n      unhighlightElements,\r\n      findElements,\r\n      highlightElements,\r\n      getElementInfo\r\n    };\r\n  }\n\n  exports.findElements = findElements;\n  exports.highlight = highlight;\n  exports.highlightElements = highlightElements;\n  exports.unhighlightElements = unhighlightElements;\n\n  Object.defineProperty(exports, '__esModule', { value: true });\n\n}));\n//# sourceMappingURL=probolabs.umd.js.map\n";
+const ElementTag = {
+  CLICKABLE: "CLICKABLE", // button, link, toggle switch, checkbox, radio, dropdowns, clickable divs
+  FILLABLE: "FILLABLE", // input, textarea content_editable, date picker??
+  SELECTABLE: "SELECTABLE", // select
+  NON_INTERACTIVE_ELEMENT: 'NON_INTERACTIVE_ELEMENT',
+};
+
+var ProboLogLevel;
+(function (ProboLogLevel) {
+    ProboLogLevel["DEBUG"] = "DEBUG";
+    ProboLogLevel["INFO"] = "INFO";
+    ProboLogLevel["LOG"] = "LOG";
+    ProboLogLevel["WARN"] = "WARN";
+    ProboLogLevel["ERROR"] = "ERROR";
+})(ProboLogLevel || (ProboLogLevel = {}));
+// Add a severity map for comparison
+const LogLevelSeverity = {
+    [ProboLogLevel.DEBUG]: 0,
+    [ProboLogLevel.INFO]: 1,
+    [ProboLogLevel.LOG]: 2,
+    [ProboLogLevel.WARN]: 3,
+    [ProboLogLevel.ERROR]: 4,
+};
+class ProboLogger {
+    constructor(prefix, logLevel = ProboLogLevel.LOG) {
+        this.prefix = prefix;
+        this.logLevel = logLevel;
+    }
+    setLogLevel(level) {
+        this.logLevel = level;
+        console.log(`[${this.prefix}-INFO] Log level set to: ${ProboLogLevel[level]}`);
+    }
+    debug(...args) {
+        this.msg(ProboLogLevel.DEBUG, ...args);
+    }
+    info(...args) {
+        this.msg(ProboLogLevel.INFO, ...args);
+    }
+    log(...args) {
+        this.msg(ProboLogLevel.LOG, ...args);
+    }
+    warn(...args) {
+        this.msg(ProboLogLevel.WARN, ...args);
+    }
+    error(...args) {
+        this.msg(ProboLogLevel.ERROR, ...args);
+    }
+    msg(logLevel, ...args) {
+        if (LogLevelSeverity[logLevel] >= LogLevelSeverity[this.logLevel]) {
+            const now = new Date();
+            const timestamp = now.toLocaleString('en-GB', {
+                day: '2-digit',
+                month: 'short',
+                year: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+                hour12: false
+            }).replace(',', '');
+            // const stack = new Error().stack;
+            // const callerLine = stack?.split('\n')[3];
+            // const callerInfo = callerLine?.match(/at\s+(?:(.+)\s+\()?(.+):(\d+):(\d+)\)?/);
+            // const [, fnName, file, line] = callerInfo || [];
+            // const fileInfo = file ? `${file.split('/').pop()}:${line}` : '';
+            // const functionInfo = fnName ? `${fnName}` : '';
+            // console.log(`[${timestamp}] ${logLevel} [${this.prefix}.${fileInfo}${functionInfo ? ` ${functionInfo}` : ''}]`, ...args);
+            console.log(`[${timestamp}] ${logLevel} [${this.prefix}]`, ...args);
+        }
+    }
+}
+const proboLogger = new ProboLogger('probolib');
+
+// Utility functions for enhanced Playwright interactions
+async function waitForNavigationToSettle(page, options = {}) {
+    const startTime = Date.now();
+    let navigationCount = 0;
+    let lastNavigationTime = null;
+    const onFrameNavigated = (frame) => {
+        if (frame === page.mainFrame()) {
+            navigationCount++;
+            lastNavigationTime = Date.now();
+            proboLogger.debug(`Navigation ${navigationCount} detected at +${(lastNavigationTime - startTime) / 1000}s`);
+        }
+    };
+    try {
+        page.on('framenavigated', onFrameNavigated);
+        await page.waitForTimeout(options.initialWait || 1500);
+        proboLogger.debug(`After initial wait (${(Date.now() - startTime) / 1000}s), navigation_count: ${navigationCount}`);
+        if (navigationCount > 0) {
+            while (true) {
+                const currentTime = Date.now();
+                if (lastNavigationTime && (currentTime - lastNavigationTime) > (options.navigationTimeout || 5000)) {
+                    break;
+                }
+                if ((currentTime - startTime) > (options.totalTimeout || 10000)) {
+                    break;
+                }
+                await page.waitForTimeout(100);
+            }
+            await page.waitForLoadState('domcontentloaded', { timeout: options.totalTimeout || 10000 });
+            proboLogger.debug(`Navigation settled in ${(Date.now() - startTime) / 1000}s`);
+            return true;
+        }
+        proboLogger.debug(`No navigation detected (${(Date.now() - startTime) / 1000}s)`);
+        return false;
+    }
+    finally {
+        page.removeListener('framenavigated', onFrameNavigated);
+        proboLogger.debug(`Navigation listener removed at ${(Date.now() - startTime) / 1000}s`);
+    }
+}
+async function stabilizePage(page) {
+    const startTime = Date.now();
+    proboLogger.debug('Starting page stabilization...');
+    await waitForNavigationToSettle(page);
+    const afterNavTime = Date.now();
+    proboLogger.debug(`Navigation phase: ${(afterNavTime - startTime) / 1000}s`);
+    await scrollToBottomRight(page);
+    const afterScrollTime = Date.now();
+    proboLogger.debug(`Scroll phase: ${(afterScrollTime - afterNavTime) / 1000}s`);
+    await waitForMutationsToSettle(page);
+    const totalTime = (Date.now() - startTime) / 1000;
+    proboLogger.debug(`Page stabilization complete in ${totalTime}s`);
+}
+async function enhancedClick(page, selector, options = {}) {
+    await stabilizePage(page);
+    proboLogger.debug(`Clicking element: ${selector}`);
+    await page.click(selector, { noWaitAfter: false, ...options });
+    await stabilizePage(page);
+}
+async function selectDropdownOption(page, selector, value) {
+    const locator = page.locator(selector);
+    const tagName = await locator.evaluate(el => el.tagName.toLowerCase());
+    const role = await locator.getAttribute('role');
+    if (tagName === 'option' || role === 'option') {
+        proboLogger.debug('selectDropdownOption: option tag/role detected');
+        await locator.click();
+    }
+    else if (tagName === 'select') {
+        // Handle native select element
+        proboLogger.debug('selectDropdownOption: simple select tag');
+        try {
+            // First try direct selectOption
+            await page.selectOption(selector, value);
+        }
+        catch (error) {
+            proboLogger.debug('selectDropdownOption: direct selectOption failed, trying alternative approach');
+            // If direct selection fails, try force-selecting
+            await page.evaluate(({ sel, val }) => {
+                const element = document.querySelector(sel);
+                if (element) {
+                    const event = new Event('change', { bubbles: true });
+                    element.value = Array.isArray(val) ? val[0] : val;
+                    element.dispatchEvent(event);
+                }
+            }, { sel: selector, val: value });
+        }
+    }
+    else {
+        // Handle custom dropdown (non-select element)
+        //look for child <select> if exists
+        let listboxLocator = locator.locator('select');
+        let count = await listboxLocator.count();
+        if (count > 1)
+            throw new Error(`selectDropdownOption: ambiguous action found ${count} <select> elements`);
+        if (count === 1) { //delegate to child <select>
+            proboLogger.debug("selectDropdownOption: identified child element with <select>");
+            await listboxLocator.selectOption(value);
+        }
+        else { //no child <select> found
+            //click the original locator to expose the real listbox and options
+            proboLogger.debug("selectDropdownOption: clicking container element, looking for child element with role listbox");
+            await locator.click();
+            let container = locator;
+            count = 0;
+            if (role !== 'listbox') {
+                //search up to 7 levels above original locator
+                for (let i = 0; i < 7; i++) {
+                    listboxLocator = container.getByRole('listbox');
+                    count = await listboxLocator.count();
+                    if (count >= 1)
+                        break;
+                    else {
+                        proboLogger.debug(`selectDropdownOption: iteration #${i}: no listbox found`);
+                        container = container.locator('xpath=..');
+                    }
+                }
+            }
+            else
+                listboxLocator = container;
+            if (count !== 1)
+                throw new Error(`selectDropdownOption: found ${count} listbox locators`);
+            proboLogger.debug(`selectDropdownOption: clicking options ${value}`);
+            // Handle both string and array values
+            const values = Array.isArray(value) ? value : [value];
+            for (const val of values) {
+                const optionLocator = listboxLocator
+                    .getByRole('option')
+                    .getByText(new RegExp(`^${val}$`, 'i'));
+                count = await optionLocator.count();
+                if (count !== 1)
+                    throw new Error(`selectDropdownOption: found ${count} option locators`);
+                await optionLocator.click();
+            }
+        }
+    }
+}
+async function getElementValue(page, selector) {
+    const element = page.locator(selector).first();
+    return await element.textContent() || '';
+}
+async function waitForMutationsToSettle(page) {
+    const startTime = Date.now();
+    await page.waitForTimeout(500);
+    proboLogger.debug(`Mutations settled in ${(Date.now() - startTime) / 1000}s`);
+}
+async function scrollToBottomRight(page) {
+    const startTime = Date.now();
+    proboLogger.debug("Starting page scroll...");
+    let lastHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+    let lastWidth = await page.evaluate(() => document.documentElement.scrollWidth);
+    let iterationCount = 0;
+    while (true) {
+        iterationCount++;
+        let smoothingSteps = 0;
+        const initScrollY = await page.evaluate(() => window.scrollY);
+        const initScrollX = await page.evaluate(() => window.scrollX);
+        const maxScrollY = await page.evaluate(() => document.documentElement.scrollHeight);
+        const maxScrollX = await page.evaluate(() => document.documentElement.scrollWidth);
+        const maxClientY = await page.evaluate(() => document.documentElement.clientHeight);
+        const maxClientX = await page.evaluate(() => document.documentElement.clientWidth);
+        let currScrollX = initScrollX;
+        while (currScrollX <= (maxScrollX - maxClientX)) {
+            let currScrollY = initScrollY;
+            while (currScrollY <= (maxScrollY - maxClientY)) {
+                currScrollY += maxClientY;
+                await page.evaluate(({ x, y }) => window.scrollTo(x, y), { x: currScrollX, y: currScrollY });
+                await page.waitForTimeout(50);
+                smoothingSteps++;
+            }
+            currScrollX += maxClientX;
+        }
+        proboLogger.debug(`Iteration ${iterationCount}: ${smoothingSteps} smoothing steps in ${(Date.now() - startTime) / 1000}s`);
+        const newHeight = await page.evaluate(() => document.documentElement.scrollHeight);
+        const newWidth = await page.evaluate(() => document.documentElement.scrollWidth);
+        if (newHeight === lastHeight && newWidth === lastWidth) {
+            break;
+        }
+        proboLogger.debug(`Page dimensions updated at ${(Date.now() - startTime) / 1000}s, repeating scroll`);
+        lastHeight = newHeight;
+        lastWidth = newWidth;
+    }
+    await page.waitForTimeout(200);
+    await page.evaluate(() => window.scrollTo(0, 0));
+    await page.waitForTimeout(50);
+    proboLogger.debug(`Scroll completed in ${(Date.now() - startTime) / 1000}s`);
+}
+const PlaywrightAction = {
+    VISIT_BASE_URL: 'VISIT_BASE_URL',
+    VISIT_URL: 'VISIT_URL',
+    CLICK: 'CLICK',
+    FILL_IN: 'FILL_IN',
+    SELECT_DROPDOWN: 'SELECT_DROPDOWN',
+    SELECT_MULTIPLE_DROPDOWN: 'SELECT_MULTIPLE_DROPDOWN',
+    CHECK_CHECKBOX: 'CHECK_CHECKBOX',
+    SELECT_RADIO: 'SELECT_RADIO',
+    TOGGLE_SWITCH: 'TOGGLE_SWITCH',
+    TYPE_KEYS: 'TYPE_KEYS',
+    VALIDATE_EXACT_VALUE: 'VALIDATE_EXACT_VALUE',
+    VALIDATE_CONTAINS_VALUE: 'VALIDATE_CONTAINS_VALUE',
+    VALIDATE_URL: 'VALIDATE_URL'
+};
+const executePlaywrightAction = async (page, action, value, element_css_selector) => {
+    proboLogger.info('Executing playwright action:', { action, value, element_css_selector });
+    try {
+        switch (action) {
+            case PlaywrightAction.VISIT_BASE_URL:
+                await page.goto(value, { waitUntil: 'domcontentloaded' });
+                await stabilizePage(page);
+                break;
+            case PlaywrightAction.VISIT_URL:
+                await page.goto(value, { waitUntil: 'domcontentloaded' });
+                await stabilizePage(page);
+                break;
+            case PlaywrightAction.CLICK:
+                const element = page.locator(element_css_selector);
+                const tagName = await element.evaluate(el => el.tagName.toLowerCase());
+                if (tagName === 'select') {
+                    // If it's a select element, use selectDropdownOption instead of click
+                    await selectDropdownOption(page, element_css_selector, value);
+                }
+                else {
+                    await enhancedClick(page, element_css_selector);
+                }
+                break;
+            case PlaywrightAction.FILL_IN:
+                await enhancedClick(page, element_css_selector);
+                await page.fill(element_css_selector, value);
+                break;
+            case PlaywrightAction.SELECT_DROPDOWN:
+                await stabilizePage(page);
+                await selectDropdownOption(page, element_css_selector, value);
+                break;
+            case PlaywrightAction.SELECT_MULTIPLE_DROPDOWN:
+                let options;
+                if (value.startsWith('[')) {
+                    // Handle array-like string: "['option1', 'option2']" or '["option1", "option2"]'
+                    try {
+                        options = JSON.parse(value);
+                    }
+                    catch (_a) {
+                        // Handle case where quotes might be inconsistent
+                        options = value.slice(1, -1).split(',')
+                            .map(opt => opt.trim().replace(/^['"]|['"]$/g, ''));
+                    }
+                }
+                else {
+                    // Handle comma-separated string: "option1, option2"
+                    options = value.split(',').map(opt => opt.trim());
+                }
+                await selectDropdownOption(page, element_css_selector, options);
+                break;
+            case PlaywrightAction.CHECK_CHECKBOX:
+                await stabilizePage(page);
+                await page.setChecked(element_css_selector, value.toLowerCase() === 'true');
+                break;
+            case PlaywrightAction.SELECT_RADIO:
+            case PlaywrightAction.TOGGLE_SWITCH:
+                await enhancedClick(page, element_css_selector);
+                break;
+            case PlaywrightAction.TYPE_KEYS:
+                await stabilizePage(page);
+                await page.locator(element_css_selector).pressSequentially(value);
+                break;
+            case PlaywrightAction.VALIDATE_EXACT_VALUE:
+                await stabilizePage(page);
+                const exactValue = await getElementValue(page, element_css_selector);
+                if (exactValue !== value) {
+                    proboLogger.info(`Validation FAIL: expected ${value} but got ${exactValue}`);
+                    return false;
+                }
+                proboLogger.info('Validation PASS');
+                return true;
+            case PlaywrightAction.VALIDATE_CONTAINS_VALUE:
+                await stabilizePage(page);
+                const containsValue = await getElementValue(page, element_css_selector);
+                if (!containsValue.includes(value)) {
+                    proboLogger.info(`Validation FAIL: expected ${value} to be contained in ${containsValue}`);
+                    return false;
+                }
+                proboLogger.info('Validation PASS');
+                return true;
+            case PlaywrightAction.VALIDATE_URL:
+                await stabilizePage(page);
+                const currentUrl = page.url();
+                if (currentUrl !== value) {
+                    proboLogger.info(`Validation FAIL: expected url ${value} but got ${currentUrl}`);
+                    return false;
+                }
+                proboLogger.info('Validation PASS');
+                return true;
+            default:
+                throw new Error(`Unknown action: ${action}`);
+        }
+        return true;
+    }
+    catch (error) {
+        proboLogger.error(`Failed to execute action ${action}:`, error);
+        throw error;
+    }
+};
+
+class Highlighter {
+    constructor(enableConsoleLogs = true) {
+        this.enableConsoleLogs = enableConsoleLogs;
+    }
+    async ensureHighlighterScript(page, maxRetries = 3) {
+        for (let attempt = 0; attempt < maxRetries; attempt++) {
+            try {
+                const scriptExists = await page.evaluate(`typeof window.ProboLabs?.highlight?.execute === 'function'`);
+                if (!scriptExists) {
+                    proboLogger.debug('Injecting highlighter script...');
+                    await page.evaluate(highlighterCode);
+                    // Verify the script was injected correctly
+                    const verified = await page.evaluate(`
+            //console.log('ProboLabs global:', window.ProboLabs);
+            typeof window.ProboLabs?.highlight?.execute === 'function'
+          `);
+                    proboLogger.debug('Script injection verified:', verified);
+                }
+                return; // Success - exit the function
+            }
+            catch (error) {
+                if (attempt === maxRetries - 1) {
+                    throw error;
+                }
+                proboLogger.debug(`Script injection attempt ${attempt + 1} failed, retrying after delay...`);
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+        }
+    }
+    async highlightElements(page, elementTag) {
+        proboLogger.debug('highlightElements called with:', elementTag);
+        await this.ensureHighlighterScript(page);
+        // Execute the highlight function and await its result
+        const result = await page.evaluate(async (tag) => {
+            var _a, _b;
+            //proboLogger.debug('Browser: Starting highlight execution with tag:', tag);
+            if (!((_b = (_a = window.ProboLabs) === null || _a === void 0 ? void 0 : _a.highlight) === null || _b === void 0 ? void 0 : _b.execute)) {
+                console.error('Browser: ProboLabs.highlight.execute is not available!');
+                return null;
+            }
+            const elements = await window.ProboLabs.highlight.execute([tag]);
+            //proboLogger.debug('Browser: Found elements:', elements);
+            return elements;
+        }, elementTag);
+        return result;
+    }
+    async unhighlightElements(page) {
+        proboLogger.debug('unhighlightElements called');
+        await this.ensureHighlighterScript(page);
+        await page.evaluate(() => {
+            var _a, _b;
+            (_b = (_a = window === null || window === void 0 ? void 0 : window.ProboLabs) === null || _a === void 0 ? void 0 : _a.highlight) === null || _b === void 0 ? void 0 : _b.unexecute();
+        });
+    }
+    async highlightElement(page, element_css_selector, element_index) {
+        await this.ensureHighlighterScript(page);
+        proboLogger.debug('Highlighting element with:', { element_css_selector, element_index });
+        await page.evaluate(({ css_selector, index }) => {
+            const proboLabs = window.ProboLabs;
+            if (!proboLabs) {
+                proboLogger.warn('ProboLabs not initialized');
+                return;
+            }
+            // Create ElementInfo object for the element
+            const elementInfo = {
+                css_selector: css_selector,
+                index: index
+            };
+            // Call highlightElements directly
+            proboLabs.highlightElements([elementInfo]);
+        }, {
+            css_selector: element_css_selector,
+            index: element_index
+        });
+    }
+}
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var retry$2 = {};
+
+var retry_operation;
+var hasRequiredRetry_operation;
+
+function requireRetry_operation () {
+	if (hasRequiredRetry_operation) return retry_operation;
+	hasRequiredRetry_operation = 1;
+	function RetryOperation(timeouts, options) {
+	  // Compatibility for the old (timeouts, retryForever) signature
+	  if (typeof options === 'boolean') {
+	    options = { forever: options };
+	  }
+
+	  this._originalTimeouts = JSON.parse(JSON.stringify(timeouts));
+	  this._timeouts = timeouts;
+	  this._options = options || {};
+	  this._maxRetryTime = options && options.maxRetryTime || Infinity;
+	  this._fn = null;
+	  this._errors = [];
+	  this._attempts = 1;
+	  this._operationTimeout = null;
+	  this._operationTimeoutCb = null;
+	  this._timeout = null;
+	  this._operationStart = null;
+	  this._timer = null;
+
+	  if (this._options.forever) {
+	    this._cachedTimeouts = this._timeouts.slice(0);
+	  }
+	}
+	retry_operation = RetryOperation;
+
+	RetryOperation.prototype.reset = function() {
+	  this._attempts = 1;
+	  this._timeouts = this._originalTimeouts.slice(0);
+	};
+
+	RetryOperation.prototype.stop = function() {
+	  if (this._timeout) {
+	    clearTimeout(this._timeout);
+	  }
+	  if (this._timer) {
+	    clearTimeout(this._timer);
+	  }
+
+	  this._timeouts       = [];
+	  this._cachedTimeouts = null;
+	};
+
+	RetryOperation.prototype.retry = function(err) {
+	  if (this._timeout) {
+	    clearTimeout(this._timeout);
+	  }
+
+	  if (!err) {
+	    return false;
+	  }
+	  var currentTime = new Date().getTime();
+	  if (err && currentTime - this._operationStart >= this._maxRetryTime) {
+	    this._errors.push(err);
+	    this._errors.unshift(new Error('RetryOperation timeout occurred'));
+	    return false;
+	  }
+
+	  this._errors.push(err);
+
+	  var timeout = this._timeouts.shift();
+	  if (timeout === undefined) {
+	    if (this._cachedTimeouts) {
+	      // retry forever, only keep last error
+	      this._errors.splice(0, this._errors.length - 1);
+	      timeout = this._cachedTimeouts.slice(-1);
+	    } else {
+	      return false;
+	    }
+	  }
+
+	  var self = this;
+	  this._timer = setTimeout(function() {
+	    self._attempts++;
+
+	    if (self._operationTimeoutCb) {
+	      self._timeout = setTimeout(function() {
+	        self._operationTimeoutCb(self._attempts);
+	      }, self._operationTimeout);
+
+	      if (self._options.unref) {
+	          self._timeout.unref();
+	      }
+	    }
+
+	    self._fn(self._attempts);
+	  }, timeout);
+
+	  if (this._options.unref) {
+	      this._timer.unref();
+	  }
+
+	  return true;
+	};
+
+	RetryOperation.prototype.attempt = function(fn, timeoutOps) {
+	  this._fn = fn;
+
+	  if (timeoutOps) {
+	    if (timeoutOps.timeout) {
+	      this._operationTimeout = timeoutOps.timeout;
+	    }
+	    if (timeoutOps.cb) {
+	      this._operationTimeoutCb = timeoutOps.cb;
+	    }
+	  }
+
+	  var self = this;
+	  if (this._operationTimeoutCb) {
+	    this._timeout = setTimeout(function() {
+	      self._operationTimeoutCb();
+	    }, self._operationTimeout);
+	  }
+
+	  this._operationStart = new Date().getTime();
+
+	  this._fn(this._attempts);
+	};
+
+	RetryOperation.prototype.try = function(fn) {
+	  console.log('Using RetryOperation.try() is deprecated');
+	  this.attempt(fn);
+	};
+
+	RetryOperation.prototype.start = function(fn) {
+	  console.log('Using RetryOperation.start() is deprecated');
+	  this.attempt(fn);
+	};
+
+	RetryOperation.prototype.start = RetryOperation.prototype.try;
+
+	RetryOperation.prototype.errors = function() {
+	  return this._errors;
+	};
+
+	RetryOperation.prototype.attempts = function() {
+	  return this._attempts;
+	};
+
+	RetryOperation.prototype.mainError = function() {
+	  if (this._errors.length === 0) {
+	    return null;
+	  }
+
+	  var counts = {};
+	  var mainError = null;
+	  var mainErrorCount = 0;
+
+	  for (var i = 0; i < this._errors.length; i++) {
+	    var error = this._errors[i];
+	    var message = error.message;
+	    var count = (counts[message] || 0) + 1;
+
+	    counts[message] = count;
+
+	    if (count >= mainErrorCount) {
+	      mainError = error;
+	      mainErrorCount = count;
+	    }
+	  }
+
+	  return mainError;
+	};
+	return retry_operation;
+}
+
+var hasRequiredRetry$1;
+
+function requireRetry$1 () {
+	if (hasRequiredRetry$1) return retry$2;
+	hasRequiredRetry$1 = 1;
+	(function (exports) {
+		var RetryOperation = requireRetry_operation();
+
+		exports.operation = function(options) {
+		  var timeouts = exports.timeouts(options);
+		  return new RetryOperation(timeouts, {
+		      forever: options && (options.forever || options.retries === Infinity),
+		      unref: options && options.unref,
+		      maxRetryTime: options && options.maxRetryTime
+		  });
+		};
+
+		exports.timeouts = function(options) {
+		  if (options instanceof Array) {
+		    return [].concat(options);
+		  }
+
+		  var opts = {
+		    retries: 10,
+		    factor: 2,
+		    minTimeout: 1 * 1000,
+		    maxTimeout: Infinity,
+		    randomize: false
+		  };
+		  for (var key in options) {
+		    opts[key] = options[key];
+		  }
+
+		  if (opts.minTimeout > opts.maxTimeout) {
+		    throw new Error('minTimeout is greater than maxTimeout');
+		  }
+
+		  var timeouts = [];
+		  for (var i = 0; i < opts.retries; i++) {
+		    timeouts.push(this.createTimeout(i, opts));
+		  }
+
+		  if (options && options.forever && !timeouts.length) {
+		    timeouts.push(this.createTimeout(i, opts));
+		  }
+
+		  // sort the array numerically ascending
+		  timeouts.sort(function(a,b) {
+		    return a - b;
+		  });
+
+		  return timeouts;
+		};
+
+		exports.createTimeout = function(attempt, opts) {
+		  var random = (opts.randomize)
+		    ? (Math.random() + 1)
+		    : 1;
+
+		  var timeout = Math.round(random * Math.max(opts.minTimeout, 1) * Math.pow(opts.factor, attempt));
+		  timeout = Math.min(timeout, opts.maxTimeout);
+
+		  return timeout;
+		};
+
+		exports.wrap = function(obj, options, methods) {
+		  if (options instanceof Array) {
+		    methods = options;
+		    options = null;
+		  }
+
+		  if (!methods) {
+		    methods = [];
+		    for (var key in obj) {
+		      if (typeof obj[key] === 'function') {
+		        methods.push(key);
+		      }
+		    }
+		  }
+
+		  for (var i = 0; i < methods.length; i++) {
+		    var method   = methods[i];
+		    var original = obj[method];
+
+		    obj[method] = function retryWrapper(original) {
+		      var op       = exports.operation(options);
+		      var args     = Array.prototype.slice.call(arguments, 1);
+		      var callback = args.pop();
+
+		      args.push(function(err) {
+		        if (op.retry(err)) {
+		          return;
+		        }
+		        if (err) {
+		          arguments[0] = op.mainError();
+		        }
+		        callback.apply(this, arguments);
+		      });
+
+		      op.attempt(function() {
+		        original.apply(obj, args);
+		      });
+		    }.bind(obj, original);
+		    obj[method].options = options;
+		  }
+		}; 
+	} (retry$2));
+	return retry$2;
+}
+
+var retry$1;
+var hasRequiredRetry;
+
+function requireRetry () {
+	if (hasRequiredRetry) return retry$1;
+	hasRequiredRetry = 1;
+	retry$1 = requireRetry$1();
+	return retry$1;
+}
+
+var retryExports = requireRetry();
+var retry = /*@__PURE__*/getDefaultExportFromCjs(retryExports);
+
+const objectToString = Object.prototype.toString;
+
+const isError = value => objectToString.call(value) === '[object Error]';
+
+const errorMessages = new Set([
+	'network error', // Chrome
+	'Failed to fetch', // Chrome
+	'NetworkError when attempting to fetch resource.', // Firefox
+	'The Internet connection appears to be offline.', // Safari 16
+	'Load failed', // Safari 17+
+	'Network request failed', // `cross-fetch`
+	'fetch failed', // Undici (Node.js)
+	'terminated', // Undici (Node.js)
+]);
+
+function isNetworkError(error) {
+	const isValid = error
+		&& isError(error)
+		&& error.name === 'TypeError'
+		&& typeof error.message === 'string';
+
+	if (!isValid) {
+		return false;
+	}
+
+	// We do an extra check for Safari 17+ as it has a very generic error message.
+	// Network errors in Safari have no stack.
+	if (error.message === 'Load failed') {
+		return error.stack === undefined;
+	}
+
+	return errorMessages.has(error.message);
+}
+
+class AbortError extends Error {
+	constructor(message) {
+		super();
+
+		if (message instanceof Error) {
+			this.originalError = message;
+			({message} = message);
+		} else {
+			this.originalError = new Error(message);
+			this.originalError.stack = this.stack;
+		}
+
+		this.name = 'AbortError';
+		this.message = message;
+	}
+}
+
+const decorateErrorWithCounts = (error, attemptNumber, options) => {
+	// Minus 1 from attemptNumber because the first attempt does not count as a retry
+	const retriesLeft = options.retries - (attemptNumber - 1);
+
+	error.attemptNumber = attemptNumber;
+	error.retriesLeft = retriesLeft;
+	return error;
+};
+
+async function pRetry(input, options) {
+	return new Promise((resolve, reject) => {
+		options = {...options};
+		options.onFailedAttempt ??= () => {};
+		options.shouldRetry ??= () => true;
+		options.retries ??= 10;
+
+		const operation = retry.operation(options);
+
+		const abortHandler = () => {
+			operation.stop();
+			reject(options.signal?.reason);
+		};
+
+		if (options.signal && !options.signal.aborted) {
+			options.signal.addEventListener('abort', abortHandler, {once: true});
+		}
+
+		const cleanUp = () => {
+			options.signal?.removeEventListener('abort', abortHandler);
+			operation.stop();
+		};
+
+		operation.attempt(async attemptNumber => {
+			try {
+				const result = await input(attemptNumber);
+				cleanUp();
+				resolve(result);
+			} catch (error) {
+				try {
+					if (!(error instanceof Error)) {
+						throw new TypeError(`Non-error was thrown: "${error}". You should only throw errors.`);
+					}
+
+					if (error instanceof AbortError) {
+						throw error.originalError;
+					}
+
+					if (error instanceof TypeError && !isNetworkError(error)) {
+						throw error;
+					}
+
+					decorateErrorWithCounts(error, attemptNumber, options);
+
+					if (!(await options.shouldRetry(error))) {
+						operation.stop();
+						reject(error);
+					}
+
+					await options.onFailedAttempt(error);
+
+					if (!operation.retry(error)) {
+						throw operation.mainError();
+					}
+				} catch (finalError) {
+					decorateErrorWithCounts(finalError, attemptNumber, options);
+					cleanUp();
+					reject(finalError);
+				}
+			}
+		});
+	});
+}
+
+class ApiError extends Error {
+    constructor(status, message, data) {
+        super(message);
+        this.status = status;
+        this.data = data;
+        this.name = 'ApiError';
+        // Remove stack trace for cleaner error messages
+        this.stack = undefined;
+    }
+    toString() {
+        return `${this.message} (Status: ${this.status})`;
+    }
+}
+class ApiClient {
+    constructor(apiUrl, token = 'b31793f81a1f58b8a153c86a5fdf4df0e5179c51', // Default to demo token
+    maxRetries = 3, initialBackoff = 1000) {
+        this.apiUrl = apiUrl;
+        this.token = token;
+        this.maxRetries = maxRetries;
+        this.initialBackoff = initialBackoff;
+    }
+    async handleResponse(response) {
+        var _a;
+        try {
+            const data = await response.json();
+            if (!response.ok) {
+                switch (response.status) {
+                    case 401:
+                        throw new ApiError(401, 'Unauthorized - Invalid or missing authentication token');
+                    case 403:
+                        throw new ApiError(403, 'Forbidden - You do not have permission to perform this action');
+                    case 400:
+                        throw new ApiError(400, 'Bad Request', data);
+                    case 404:
+                        throw new ApiError(404, 'Not Found', data);
+                    case 500:
+                        throw new ApiError(500, 'Internal Server Error', data);
+                    default:
+                        throw new ApiError(response.status, `API Error: ${data.error || 'Unknown error'}`, data);
+                }
+            }
+            return data;
+        }
+        catch (error) {
+            // Only throw the original error if it's not a network error
+            if (!((_a = error.message) === null || _a === void 0 ? void 0 : _a.includes('fetch failed'))) {
+                throw error;
+            }
+            throw new ApiError(0, 'Network error: fetch failed');
+        }
+    }
+    getHeaders() {
+        const headers = {
+            'Content-Type': 'application/json',
+        };
+        // Always include token in headers now that we have a default
+        headers['Authorization'] = `Token ${this.token}`;
+        return headers;
+    }
+    async createStep(options) {
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/step-runners/`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                body: JSON.stringify({
+                    step_id: options.stepIdFromServer,
+                    scenario_name: options.scenarioName,
+                    step_prompt: options.stepPrompt,
+                    initial_screenshot: options.initial_screenshot_url,
+                    initial_html_content: options.initial_html_content,
+                    use_cache: options.use_cache,
+                }),
+            });
+            const data = await this.handleResponse(response);
+            return data.step.id;
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                console.log(`[probolib-LOG] API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+    async resolveNextInstruction(stepId, instruction) {
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/step-runners/${stepId}/run/`, {
+                method: 'POST',
+                headers: this.getHeaders(),
+                body: JSON.stringify({ executed_instruction: instruction }),
+            });
+            const data = await this.handleResponse(response);
+            return data.instruction;
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                console.log(`[probolib-LOG] API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+    async uploadScreenshot(screenshot_bytes) {
+        return pRetry(async () => {
+            const response = await fetch(`${this.apiUrl}/upload-screenshots/`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Token ${this.token}`
+                },
+                body: screenshot_bytes,
+            });
+            const data = await this.handleResponse(response);
+            return data.screenshot_url;
+        }, {
+            retries: this.maxRetries,
+            minTimeout: this.initialBackoff,
+            onFailedAttempt: error => {
+                console.log(`[probolib-LOG] API call failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+            }
+        });
+    }
+}
+
+const DEMO_TOKEN = 'b31793f81a1f58b8a153c86a5fdf4df0e5179c51';
+const retryOptions = {
+    retries: 3,
+    minTimeout: 1000,
+    onFailedAttempt: (error) => {
+        proboLogger.warn(`Page operation failed, attempt ${error.attemptNumber} of ${error.retriesLeft + error.attemptNumber}...`);
+    }
+};
+class Probo {
+    constructor({ scenarioName, token, apiUrl, enableConsoleLogs = false, debugLevel = ProboLogLevel.LOG }) {
+        this.highlighter = new Highlighter(enableConsoleLogs);
+        this.apiClient = new ApiClient(apiUrl, token);
+        this.enableConsoleLogs = enableConsoleLogs;
+        this.scenarioName = scenarioName;
+        proboLogger.setLogLevel(debugLevel);
+        proboLogger.log(`Initializing: scenarioName: ${scenarioName}, apiUrl: ${apiUrl}, enableConsoleLogs: ${enableConsoleLogs}, debugLevel: ${debugLevel}`);
+    }
+    async runStep(page, stepPrompt, stepIdFromServer, // Make optional
+    useCache = true) {
+        proboLogger.log(`runStep: #${stepIdFromServer} - ${stepPrompt}. pageUrl: ${page.url()}`);
+        this.setupConsoleLogs(page);
+        const stepId = await this._handleStepCreation(page, stepPrompt, stepIdFromServer, useCache);
+        proboLogger.debug('Step ID:', stepId);
+        let instruction = null;
+        // Main execution loop
+        while (true) {
+            try {
+                // Get next instruction from server
+                const nextInstruction = await this.apiClient.resolveNextInstruction(stepId, instruction);
+                proboLogger.debug('Next Instruction from server:', nextInstruction);
+                // Exit conditions
+                if (nextInstruction.what_to_do === 'do_nothing') {
+                    if (nextInstruction.args.success) {
+                        proboLogger.log(`Reasoning: ${nextInstruction.args.message}`);
+                        proboLogger.info('Step completed successfully');
+                        return nextInstruction.args.status;
+                    }
+                    else {
+                        throw new Error(`Step failed: ${nextInstruction.args.message}`);
+                    }
+                    break;
+                }
+                // Handle different instruction types
+                switch (nextInstruction.what_to_do) {
+                    case 'highlight_candidate_elements':
+                        proboLogger.debug('Highlighting candidate elements:', nextInstruction.args.element_type);
+                        const highlighted_elements = await this.highlightElements(page, nextInstruction.args.element_type);
+                        proboLogger.debug(`Highlighted ${highlighted_elements.length} elements`);
+                        const candidate_elements_screenshot_url = await this.screenshot(page);
+                        // proboLogger.log('candidate_elements_screenshot_url:', candidate_elements_screenshot_url);
+                        const executed_instruction = {
+                            what_to_do: 'highlight_candidate_elements',
+                            args: {
+                                element_type: nextInstruction.args.element_type
+                            },
+                            result: {
+                                highlighted_elements: highlighted_elements,
+                                candidate_elements_screenshot_url: candidate_elements_screenshot_url
+                            }
+                        };
+                        proboLogger.debug('Executed Instruction:', executed_instruction);
+                        instruction = executed_instruction;
+                        break;
+                    case 'perform_action':
+                        instruction = await this._handlePerformAction(page, nextInstruction);
+                        break;
+                    default:
+                        throw new Error(`Unknown instruction type: ${nextInstruction.what_to_do}`);
+                }
+            }
+            catch (error) {
+                proboLogger.error('Error during step execution:', error);
+                throw error;
+            }
+        }
+    }
+    async _handleStepCreation(page, stepPrompt, stepIdFromServer, useCache) {
+        proboLogger.debug(`Taking initial screenshot from the page ${page.url()}`);
+        await stabilizePage(page);
+        const initial_screenshot_url = await pRetry(() => this.screenshot(page), retryOptions);
+        proboLogger.debug(`Taking initial html content from the page ${page.url()}`);
+        const initial_html_content = await pRetry(async () => {
+            try {
+                return await page.content();
+            }
+            catch (error) {
+                console.log('Error caught:', {
+                    name: error.name,
+                    message: error.message,
+                    code: error.code,
+                    constructor: error.constructor.name,
+                    prototype: Object.getPrototypeOf(error).constructor.name
+                });
+                throw error; // Re-throw to trigger retry
+            }
+        }, retryOptions);
+        return await this.apiClient.createStep({
+            stepIdFromServer,
+            scenarioName: this.scenarioName,
+            stepPrompt: stepPrompt,
+            initial_screenshot_url,
+            initial_html_content,
+            use_cache: useCache
+        });
+    }
+    setupConsoleLogs(page) {
+        if (this.enableConsoleLogs) {
+            page.on('console', msg => {
+                const type = msg.type();
+                const text = msg.text();
+                proboLogger.log(`[Browser-${type}]: ${text}`);
+            });
+        }
+    }
+    async highlightElements(page, elementTag) {
+        return this.highlighter.highlightElements(page, elementTag);
+    }
+    async unhighlightElements(page) {
+        return this.highlighter.unhighlightElements(page);
+    }
+    async highlightElement(page, element_css_selector, element_index) {
+        return this.highlighter.highlightElement(page, element_css_selector, element_index);
+    }
+    async screenshot(page) {
+        const screenshot_bytes = await page.screenshot({ fullPage: true, animations: 'disabled' });
+        // make an api call to upload the screenshot to cloudinary
+        const screenshot_url = await this.apiClient.uploadScreenshot(screenshot_bytes);
+        return screenshot_url;
+    }
+    async _handlePerformAction(page, nextInstruction) {
+        proboLogger.debug('Handling perform action:', nextInstruction);
+        const action = nextInstruction.args.action;
+        const value = nextInstruction.args.value;
+        const element_css_selector = nextInstruction.args.element_css_selector;
+        const element_index = nextInstruction.args.element_index;
+        if (action !== PlaywrightAction.VISIT_URL) {
+            await this.unhighlightElements(page);
+            proboLogger.debug('Unhighlighted elements');
+            await this.highlightElement(page, element_css_selector, element_index);
+            proboLogger.debug('Highlighted element');
+        }
+        const pre_action_screenshot_url = await this.screenshot(page);
+        const step_status = await executePlaywrightAction(page, action, value, element_css_selector);
+        await this.unhighlightElements(page);
+        proboLogger.debug('UnHighlighted element');
+        await waitForNavigationToSettle(page, { initialWait: 500 });
+        const post_action_screenshot_url = await this.screenshot(page);
+        const post_html_content = await pRetry(async () => {
+            try {
+                return await page.content();
+            }
+            catch (error) {
+                console.log('Error caught:', {
+                    name: error.name,
+                    message: error.message,
+                    code: error.code,
+                    constructor: error.constructor.name,
+                    prototype: Object.getPrototypeOf(error).constructor.name
+                });
+                throw error; // Re-throw to trigger retry
+            }
+        }, retryOptions);
+        const executed_instruction = {
+            what_to_do: 'perform_action',
+            args: {
+                action: action,
+                value: value,
+                element_css_selector: element_css_selector
+            },
+            result: {
+                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
+            }
+        };
+        return executed_instruction;
+    }
+}
+
+export { DEMO_TOKEN, ElementTag, Probo, ProboLogLevel };
+//# sourceMappingURL=index.js.map