feat: use outerHTML & generate more meaningful semantic selectors

server/src/workflow-management/selector.ts

@@ -790,67 +790,94 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
   }
 };
 
-export const getChildSelectors = async (page: Page, parentSelector: string): Promise<string[]> => {
+
+export const getChildSelectors = async (page: Page, outerHTML: string): Promise<string[]> => {
   try {
-    const childSelectors = await page.evaluate((parentSelector: string) => {
+    const childSelectors = await page.evaluate((outerHTML: string) => {
-      // Function to generate non-unique selector for an element
       function getNonUniqueSelector(element: HTMLElement): string {
+        // Start with tag name
         let selector = element.tagName.toLowerCase();
 
-        // Add class names if available
+        // Add meaningful attributes
-        const className = typeof element.className === 'string' ? element.className : '';
+        const attributesToConsider = [
-        if (className) {
+          'class',
-          const classes = className.split(/\s+/).filter((cls: string) => Boolean(cls));
+          'data-testid',
-          if (classes.length > 0) {
+          'data-cy',
-            const validClasses = classes.filter((cls: string) => !cls.startsWith('!') && !cls.includes(':'));
+          'data-test',
-            if (validClasses.length > 0) {
+          'aria-label',
-              selector += '.' + validClasses.map(cls => CSS.escape(cls)).join('.'); 
+          'title',
+          'id'
+        ];
+
+        // Collect additional attributes
+        const additionalAttrs: string[] = [];
+
+        attributesToConsider.forEach(attrName => {
+          if (attrName === 'class') {
+            // Handle classes
+            const className = typeof element.className === 'string' ? element.className : '';
+            if (className) {
+              const classes = className.split(/\s+/)
+                .filter((cls: string) => Boolean(cls))
+                .filter(cls => !cls.startsWith('!') && !cls.includes(':'));
+              
+              if (classes.length > 0) {
+                additionalAttrs.push(
+                  classes.map(cls => `.${CSS.escape(cls)}`).join('')
+                );
+              }
+            }
+          } else {
+            // Handle other attributes
+            const attrValue = element.getAttribute(attrName);
+            if (attrValue) {
+              additionalAttrs.push(`[${attrName}="${CSS.escape(attrValue)}"]`);
             }
           }
-        }
+        });
 
-        return selector;
+        // Combine selector with attributes
+        return selector + additionalAttrs.join('');
       }
 
-      // Function to get the full CSS selector path from the current element to the parentSelector
+      function getSelectorPath(element: HTMLElement | null, root: HTMLElement): string {
-      function getSelectorPath(element: HTMLElement | null, parentElement: HTMLElement): string {
+        if (!element || element === root) return '';
-        if (!element || !element.parentElement) return '';
+        
-
+        const parentSelector = getSelectorPath(element.parentElement, root);
-        const parentSelector = getNonUniqueSelector(parentElement);
         const elementSelector = getNonUniqueSelector(element);
 
-        return `${parentSelector} > ${elementSelector}`;
+        return parentSelector ? `${parentSelector} ${elementSelector}` : elementSelector;
       }
 
-      // Function to recursively gather all descendant selectors
+      function parseOuterHTML(outerHTML: string): HTMLElement {
-      function getAllDescendantSelectors(element: HTMLElement, parentElement: HTMLElement): string[] {
+        const tempContainer = document.createElement('div');
-        let selectors: string[] = [];
+        tempContainer.innerHTML = outerHTML.trim();
-        const children = Array.from(element.children) as HTMLElement[];
+        return tempContainer.firstElementChild as HTMLElement;
-
-        for (const child of children) {
-          selectors.push(getSelectorPath(child, parentElement));
-          selectors = selectors.concat(getAllDescendantSelectors(child, parentElement));
-        }
-
-        return selectors;
       }
 
-      // Get the parent element based on the selector
+      function getAllDescendantSelectors(root: HTMLElement): string[] {
-      const parentElement = document.querySelector(parentSelector) as HTMLElement;
+        const descendants = root.querySelectorAll('*');
-      if (!parentElement) return [];
+        const selectors = Array.from(descendants).map(element =>
+          getSelectorPath(element as HTMLElement, root)
+        );
+        
+        // Include the root element itself
+        const rootSelector = getNonUniqueSelector(root);
+        return [rootSelector, ...selectors];
+      }
 
-      // Gather all descendant selectors starting from the parent element
+      const rootElement = parseOuterHTML(outerHTML);
-      return getAllDescendantSelectors(parentElement, parentElement);
+      if (!rootElement) return [];
-    }, parentSelector);
+      return getAllDescendantSelectors(rootElement);
+    }, outerHTML);
 
     return childSelectors || [];
   } catch (error) {
-    console.error('Error in getChildSelectors:', error);
+    console.error('Error in getChildSelectorsFromOuterHTML:', error);
     return [];
   }
 };
 
-
 /**
  * Returns the first pair from the given workflow that contains the given selector
  * inside the where condition, and it is the only selector there.