feat: support shadow dom field auto add

src/components/browser/BrowserWindow.tsx

@@ -358,6 +358,312 @@ export const BrowserWindow = () => {
           return trimmed.length > 0;
         };
 
+        // Enhanced shadow DOM-aware element evaluation
+        const evaluateXPathWithShadowSupport = (
+          document: Document,
+          xpath: string,
+          isShadow: boolean = false
+        ): Element | null => {
+          try {
+            // First try regular XPath evaluation
+            const result = document.evaluate(
+              xpath,
+              document,
+              null,
+              XPathResult.FIRST_ORDERED_NODE_TYPE,
+              null
+            ).singleNodeValue as Element | null;
+
+            if (!isShadow || result) {
+              return result;
+            }
+
+            // If shadow DOM is indicated and regular XPath fails, use shadow DOM traversal
+            let cleanPath = xpath;
+            let isIndexed = false;
+
+            const indexedMatch = xpath.match(/^\((.*?)\)\[(\d+)\](.*)$/);
+            if (indexedMatch) {
+              cleanPath = indexedMatch[1] + indexedMatch[3];
+              isIndexed = true;
+            }
+
+            const pathParts = cleanPath
+              .replace(/^\/\//, "")
+              .split("/")
+              .map((p) => p.trim())
+              .filter((p) => p.length > 0);
+
+            let currentContexts: (Document | Element | ShadowRoot)[] = [document];
+
+            for (let i = 0; i < pathParts.length; i++) {
+              const part = pathParts[i];
+              const nextContexts: (Element | ShadowRoot)[] = [];
+
+              for (const ctx of currentContexts) {
+                const positionalMatch = part.match(/^([^[]+)\[(\d+)\]$/);
+                let partWithoutPosition = part;
+                let requestedPosition: number | null = null;
+
+                if (positionalMatch) {
+                  partWithoutPosition = positionalMatch[1];
+                  requestedPosition = parseInt(positionalMatch[2]);
+                }
+
+                const matched = queryInsideContext(ctx, partWithoutPosition);
+
+                let elementsToAdd = matched;
+                if (requestedPosition !== null) {
+                  const index = requestedPosition - 1;
+                  if (index >= 0 && index < matched.length) {
+                    elementsToAdd = [matched[index]];
+                  } else {
+                    elementsToAdd = [];
+                  }
+                }
+
+                elementsToAdd.forEach((el) => {
+                  nextContexts.push(el);
+                  if (el.shadowRoot) {
+                    nextContexts.push(el.shadowRoot);
+                  }
+                });
+              }
+
+              if (nextContexts.length === 0) {
+                return null;
+              }
+
+              currentContexts = nextContexts;
+            }
+
+            if (currentContexts.length > 0) {
+              if (isIndexed && indexedMatch) {
+                const requestedIndex = parseInt(indexedMatch[2]) - 1;
+                if (requestedIndex >= 0 && requestedIndex < currentContexts.length) {
+                  return currentContexts[requestedIndex] as Element;
+                } else {
+                  return null;
+                }
+              }
+
+              return currentContexts[0] as Element;
+            }
+
+            return null;
+          } catch (err) {
+            console.error("XPath evaluation failed:", xpath, err);
+            return null;
+          }
+        };
+
+        const queryInsideContext = (
+          context: Document | Element | ShadowRoot,
+          part: string
+        ): Element[] => {
+          try {
+            const { tagName, conditions } = parseXPathPart(part);
+
+            const candidateElements = Array.from(context.querySelectorAll(tagName));
+            if (candidateElements.length === 0) {
+              return [];
+            }
+
+            const matchingElements = candidateElements.filter((el) => {
+              return elementMatchesConditions(el, conditions);
+            });
+
+            return matchingElements;
+          } catch (err) {
+            console.error("Error in queryInsideContext:", err);
+            return [];
+          }
+        };
+
+        const parseXPathPart = (
+          part: string
+        ): { tagName: string; conditions: string[] } => {
+          const tagMatch = part.match(/^([a-zA-Z0-9-]+)/);
+          const tagName = tagMatch ? tagMatch[1] : "*";
+
+          const conditionMatches = part.match(/\[([^\]]+)\]/g);
+          const conditions = conditionMatches
+            ? conditionMatches.map((c) => c.slice(1, -1))
+            : [];
+
+          return { tagName, conditions };
+        };
+
+        const elementMatchesConditions = (
+          element: Element,
+          conditions: string[]
+        ): boolean => {
+          for (const condition of conditions) {
+            if (!elementMatchesCondition(element, condition)) {
+              return false;
+            }
+          }
+          return true;
+        };
+
+        const elementMatchesCondition = (
+          element: Element,
+          condition: string
+        ): boolean => {
+          condition = condition.trim();
+
+          if (/^\d+$/.test(condition)) {
+            return true;
+          }
+
+          // Handle @attribute="value"
+          const attrMatch = condition.match(/^@([^=]+)=["']([^"']+)["']$/);
+          if (attrMatch) {
+            const [, attr, value] = attrMatch;
+            const elementValue = element.getAttribute(attr);
+            return elementValue === value;
+          }
+
+          // Handle contains(@class, 'value')
+          const classContainsMatch = condition.match(
+            /^contains\(@class,\s*["']([^"']+)["']\)$/
+          );
+          if (classContainsMatch) {
+            const className = classContainsMatch[1];
+            return element.classList.contains(className);
+          }
+
+          // Handle contains(@attribute, 'value')
+          const attrContainsMatch = condition.match(
+            /^contains\(@([^,]+),\s*["']([^"']+)["']\)$/
+          );
+          if (attrContainsMatch) {
+            const [, attr, value] = attrContainsMatch;
+            const elementValue = element.getAttribute(attr) || "";
+            return elementValue.includes(value);
+          }
+
+          // Handle text()="value"
+          const textMatch = condition.match(/^text\(\)=["']([^"']+)["']$/);
+          if (textMatch) {
+            const expectedText = textMatch[1];
+            const elementText = element.textContent?.trim() || "";
+            return elementText === expectedText;
+          }
+
+          // Handle contains(text(), 'value')
+          const textContainsMatch = condition.match(
+            /^contains\(text\(\),\s*["']([^"']+)["']\)$/
+          );
+          if (textContainsMatch) {
+            const expectedText = textContainsMatch[1];
+            const elementText = element.textContent?.trim() || "";
+            return elementText.includes(expectedText);
+          }
+
+          // Handle count(*)=0 (element has no children)
+          if (condition === "count(*)=0") {
+            return element.children.length === 0;
+          }
+
+          // Handle other count conditions
+          const countMatch = condition.match(/^count\(\*\)=(\d+)$/);
+          if (countMatch) {
+            const expectedCount = parseInt(countMatch[1]);
+            return element.children.length === expectedCount;
+          }
+
+          return true;
+        };
+
+        // Enhanced value extraction with shadow DOM support
+        const extractValueWithShadowSupport = (
+          element: Element,
+          attribute: string
+        ): string | null => {
+          if (!element) return null;
+
+          const baseURL =
+            element.ownerDocument?.location?.href || window.location.origin;
+
+          // Check shadow DOM content first
+          if (element.shadowRoot) {
+            const shadowContent = element.shadowRoot.textContent;
+            if (shadowContent?.trim()) {
+              return shadowContent.trim();
+            }
+          }
+
+          if (attribute === "innerText") {
+            let textContent =
+              (element as HTMLElement).innerText?.trim() ||
+              (element as HTMLElement).textContent?.trim();
+
+            if (!textContent) {
+              const dataAttributes = [
+                "data-600",
+                "data-text",
+                "data-label",
+                "data-value",
+                "data-content",
+              ];
+              for (const attr of dataAttributes) {
+                const dataValue = element.getAttribute(attr);
+                if (dataValue && dataValue.trim()) {
+                  textContent = dataValue.trim();
+                  break;
+                }
+              }
+            }
+
+            return textContent || null;
+          } else if (attribute === "innerHTML") {
+            return element.innerHTML?.trim() || null;
+          } else if (attribute === "href") {
+            let anchorElement = element;
+
+            if (element.tagName !== "A") {
+              anchorElement =
+                element.closest("a") ||
+                element.parentElement?.closest("a") ||
+                element;
+            }
+
+            const hrefValue = anchorElement.getAttribute("href");
+            if (!hrefValue || hrefValue.trim() === "") {
+              return null;
+            }
+
+            try {
+              return new URL(hrefValue, baseURL).href;
+            } catch (e) {
+              console.warn("Error creating URL from", hrefValue, e);
+              return hrefValue;
+            }
+          } else if (attribute === "src") {
+            const attrValue = element.getAttribute(attribute);
+            const dataAttr = attrValue || element.getAttribute("data-" + attribute);
+
+            if (!dataAttr || dataAttr.trim() === "") {
+              const style = window.getComputedStyle(element as HTMLElement);
+              const bgImage = style.backgroundImage;
+              if (bgImage && bgImage !== "none") {
+                const matches = bgImage.match(/url\(['"]?([^'")]+)['"]?\)/);
+                return matches ? new URL(matches[1], baseURL).href : null;
+              }
+              return null;
+            }
+
+            try {
+              return new URL(dataAttr, baseURL).href;
+            } catch (e) {
+              console.warn("Error creating URL from", dataAttr, e);
+              return dataAttr;
+            }
+          }
+          return element.getAttribute(attribute);
+        };
+
         // Simple deepest child finder - limit depth to prevent hanging
         const findDeepestChild = (element: HTMLElement): HTMLElement => {
           let deepest = element;
@@ -386,160 +692,159 @@ export const BrowserWindow = () => {
 
         uniqueChildSelectors.forEach((childSelector, index) => {
           try {
-            const result = iframeElement.contentDocument!.evaluate(
+            // Detect if this selector should use shadow DOM traversal
-              childSelector,
+            const isShadowSelector = childSelector.includes('>>') || 
+                                   childSelector.startsWith('//') && 
+                                   (listSelector.includes('>>') || currentSnapshot?.snapshot);
+
+            const element = evaluateXPathWithShadowSupport(
               iframeElement.contentDocument!,
-              null,
+              childSelector,
-              XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
+              isShadowSelector
-              null
+            ) as HTMLElement;
-            );
 
-            if (result.snapshotLength > 0) {
+            if (element && isElementVisible(element)) {
-              const element = result.snapshotItem(0) as HTMLElement;
+              const tagName = element.tagName.toLowerCase();
+              const isShadow = element.getRootNode() instanceof ShadowRoot;
 
-              if (element && isElementVisible(element)) {
+              if (tagName === "a") {
-                const tagName = element.tagName.toLowerCase();
+                const anchor = element as HTMLAnchorElement;
+                const href = extractValueWithShadowSupport(anchor, "href");
+                const text = extractValueWithShadowSupport(anchor, "innerText");
 
-                if (tagName === "a") {
+                if (
-                  const anchor = element as HTMLAnchorElement;
+                  href &&
-                  const href = anchor.href;
+                  href.trim() !== "" &&
-                  const text = anchor.textContent?.trim() || "";
+                  href !== window.location.href &&
+                  !href.startsWith("javascript:") &&
+                  !href.startsWith("#")
+                ) {
+                  const fieldIdHref = Date.now() + index * 1000;
 
-                  if (
+                  candidateFields.push({
-                    href &&
+                    id: fieldIdHref,
-                    href.trim() !== "" &&
+                    element: element,
-                    href !== window.location.href &&
+                    isLeaf: true,
-                    !href.startsWith("javascript:") &&
+                    depth: 0,
-                    !href.startsWith("#")
+                    field: {
-                  ) {
-                    const fieldIdHref = Date.now() + index * 1000;
-
-                    candidateFields.push({
                       id: fieldIdHref,
-                      element: element,
+                      type: "text",
-                      isLeaf: true,
+                      label: `Label ${index * 2 + 1}`,
-                      depth: 0,
+                      data: href,
-                      field: {
+                      selectorObj: {
-                        id: fieldIdHref,
+                        selector: childSelector,
-                        type: "text",
+                        tag: element.tagName,
-                        label: `Label ${index * 2 + 1}`,
+                        isShadow: isShadow,
-                        data: href,
+                        attribute: "href",
-                        selectorObj: {
-                          selector: childSelector,
-                          tag: element.tagName,
-                          isShadow: element.getRootNode() instanceof ShadowRoot,
-                          attribute: "href",
-                        },
                       },
-                    });
+                    },
-                  }
+                  });
+                }
 
-                  const fieldIdText = Date.now() + index * 1000 + 1;
+                const fieldIdText = Date.now() + index * 1000 + 1;
 
-                  if (isValidData(text)) {
+                if (text && isValidData(text)) {
-                    candidateFields.push({
+                  candidateFields.push({
+                    id: fieldIdText,
+                    element: element,
+                    isLeaf: true,
+                    depth: 0,
+                    field: {
                       id: fieldIdText,
-                      element: element,
+                      type: "text",
-                      isLeaf: true,
+                      label: `Label ${index * 2 + 2}`,
-                      depth: 0,
+                      data: text,
-                      field: {
+                      selectorObj: {
-                        id: fieldIdText,
+                        selector: childSelector,
-                        type: "text",
+                        tag: element.tagName,
-                        label: `Label ${index * 2 + 2}`,
+                        isShadow: isShadow,
-                        data: text,
+                        attribute: "innerText",
-                        selectorObj: {
-                          selector: childSelector,
-                          tag: element.tagName,
-                          isShadow: element.getRootNode() instanceof ShadowRoot,
-                          attribute: "innerText",
-                        },
                       },
-                    });
+                    },
-                  }
+                  });
-                } else if (tagName === "img") {
+                }
-                  const img = element as HTMLImageElement;
+              } else if (tagName === "img") {
-                  const src = img.src;
+                const img = element as HTMLImageElement;
-                  const alt = img.alt?.trim() || "";
+                const src = extractValueWithShadowSupport(img, "src");
+                const alt = extractValueWithShadowSupport(img, "alt");
 
-                  if (src && !src.startsWith("data:") && src.length > 10) {
+                if (src && !src.startsWith("data:") && src.length > 10) {
-                    const fieldId = Date.now() + index * 1000;
+                  const fieldId = Date.now() + index * 1000;
 
-                    candidateFields.push({
+                  candidateFields.push({
+                    id: fieldId,
+                    element: element,
+                    isLeaf: true,
+                    depth: 0,
+                    field: {
                       id: fieldId,
-                      element: element,
+                      type: "text",
-                      isLeaf: true,
+                      label: `Label ${index + 1}`,
-                      depth: 0,
+                      data: src,
-                      field: {
+                      selectorObj: {
-                        id: fieldId,
+                        selector: childSelector,
-                        type: "text",
+                        tag: element.tagName,
-                        label: `Label ${index + 1}`,
+                        isShadow: isShadow,
-                        data: src,
+                        attribute: "src",
-                        selectorObj: {
-                          selector: childSelector,
-                          tag: element.tagName,
-                          isShadow: element.getRootNode() instanceof ShadowRoot,
-                          attribute: "src",
-                        },
                       },
-                    });
+                    },
-                  }
+                  });
+                }
 
-                  if (isValidData(alt)) {
+                if (alt && isValidData(alt)) {
-                    const fieldId = Date.now() + index * 1000 + 1;
+                  const fieldId = Date.now() + index * 1000 + 1;
 
-                    candidateFields.push({
+                  candidateFields.push({
+                    id: fieldId,
+                    element: element,
+                    isLeaf: true,
+                    depth: 0,
+                    field: {
                       id: fieldId,
-                      element: element,
+                      type: "text",
-                      isLeaf: true,
+                      label: `Label ${index + 2}`,
-                      depth: 0,
+                      data: alt,
-                      field: {
+                      selectorObj: {
-                        id: fieldId,
+                        selector: childSelector,
-                        type: "text",
+                        tag: element.tagName,
-                        label: `Label ${index + 2}`,
+                        isShadow: isShadow,
-                        data: alt,
+                        attribute: "alt",
-                        selectorObj: {
-                          selector: childSelector,
-                          tag: element.tagName,
-                          isShadow: element.getRootNode() instanceof ShadowRoot,
-                          attribute: "alt",
-                        },
                       },
-                    });
+                    },
-                  }
+                  });
-                } else {
+                }
-                  const deepestElement = findDeepestChild(element);
+              } else {
-                  const data = deepestElement.textContent?.trim() || "";
+                const deepestElement = findDeepestChild(element);
+                const data = extractValueWithShadowSupport(deepestElement, "innerText");
 
-                  if (isValidData(data)) {
+                if (data && isValidData(data)) {
-                    const isLeaf = isLeafElement(deepestElement);
+                  const isLeaf = isLeafElement(deepestElement);
-                    const depth = getElementDepthFromList(
+                  const depth = getElementDepthFromList(
-                      deepestElement,
+                    deepestElement,
-                      listSelector,
+                    listSelector,
-                      iframeElement.contentDocument!
+                    iframeElement.contentDocument!
-                    );
+                  );
 
-                    const fieldId = Date.now() + index;
+                  const fieldId = Date.now() + index;
 
-                    candidateFields.push({
+                  candidateFields.push({
+                    id: fieldId,
+                    element: deepestElement,
+                    isLeaf: isLeaf,
+                    depth: depth,
+                    field: {
                       id: fieldId,
-                      element: deepestElement,
+                      type: "text",
-                      isLeaf: isLeaf,
+                      label: `Label ${index + 1}`,
-                      depth: depth,
+                      data: data,
-                      field: {
+                      selectorObj: {
-                        id: fieldId,
+                        selector: childSelector,
-                        type: "text",
+                        tag: deepestElement.tagName,
-                        label: `Label ${index + 1}`,
+                        isShadow: deepestElement.getRootNode() instanceof ShadowRoot,
-                        data: data,
+                        attribute: "innerText",
-                        selectorObj: {
-                          selector: childSelector,
-                          tag: deepestElement.tagName,
-                          isShadow:
-                            deepestElement.getRootNode() instanceof ShadowRoot,
-                          attribute: "innerText",
-                        },
                       },
-                    });
+                    },
-                  }
+                  });
                 }
               }
             }