From 316531ea575d29348defc0d71c89754b029dab5f Mon Sep 17 00:00:00 2001
From: amhsirak <karishmashuklaa@gmail.com>
Date: Wed, 20 Nov 2024 01:07:42 +0530
Subject: [PATCH] feat: traverse up the parent selector

---
 .../workflow-management/classes/Generator.ts  |  2 ++
 server/src/workflow-management/selector.ts    | 20 ++++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/server/src/workflow-management/classes/Generator.ts b/server/src/workflow-management/classes/Generator.ts
index 1716531c..1ecfac87 100644
--- a/server/src/workflow-management/classes/Generator.ts
+++ b/server/src/workflow-management/classes/Generator.ts
@@ -559,6 +559,8 @@ export class WorkflowGenerator {
         if (this.listSelector !== '') {
           const childSelectors = await getChildSelectors(page, this.listSelector || '');
           this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo, childSelectors })
+          console.log(`Child Selectors: ${childSelectors}`)
+          console.log(`List sekector ${this.listSelector}`)
         } else {
           this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo });
         }
diff --git a/server/src/workflow-management/selector.ts b/server/src/workflow-management/selector.ts
index 18b878ff..9bdcb072 100644
--- a/server/src/workflow-management/selector.ts
+++ b/server/src/workflow-management/selector.ts
@@ -790,20 +790,21 @@ export const getNonUniqueSelectors = async (page: Page, coordinates: Coordinates
   }
 };
 
-
 export const getChildSelectors = async (page: Page, parentSelector: string): Promise<string[]> => {
   try {
     const childSelectors = await page.evaluate((parentSelector: string) => {
+      // Function to generate non-unique selector for an element
       function getNonUniqueSelector(element: HTMLElement): string {
         let selector = element.tagName.toLowerCase();
 
+        // Add class names if available
         const className = typeof element.className === 'string' ? element.className : '';
         if (className) {
           const classes = className.split(/\s+/).filter((cls: string) => Boolean(cls));
           if (classes.length > 0) {
             const validClasses = classes.filter((cls: string) => !cls.startsWith('!') && !cls.includes(':'));
             if (validClasses.length > 0) {
-              selector += '.' + validClasses.map(cls => CSS.escape(cls)).join('.');
+              selector += '.' + validClasses.map(cls => CSS.escape(cls)).join('.'); 
             }
           }
         }
@@ -811,30 +812,34 @@ export const getChildSelectors = async (page: Page, parentSelector: string): Pro
         return selector;
       }
 
-      function getSelectorPath(element: HTMLElement | null): string {
+      // Function to get the full CSS selector path from the current element to the parentSelector
+      function getSelectorPath(element: HTMLElement | null, parentElement: HTMLElement): string {
         if (!element || !element.parentElement) return '';
 
-        const parentSelector = getNonUniqueSelector(element.parentElement);
+        const parentSelector = getNonUniqueSelector(parentElement);
         const elementSelector = getNonUniqueSelector(element);
 
         return `${parentSelector} > ${elementSelector}`;
       }
 
-      function getAllDescendantSelectors(element: HTMLElement, stopAtParent: HTMLElement | null): string[] {
+      // Function to recursively gather all descendant selectors
+      function getAllDescendantSelectors(element: HTMLElement, parentElement: HTMLElement): string[] {
         let selectors: string[] = [];
         const children = Array.from(element.children) as HTMLElement[];
 
         for (const child of children) {
-          selectors.push(getSelectorPath(child));
-          selectors = selectors.concat(getAllDescendantSelectors(child, stopAtParent));
+          selectors.push(getSelectorPath(child, parentElement));
+          selectors = selectors.concat(getAllDescendantSelectors(child, parentElement));
         }
 
         return selectors;
       }
 
+      // Get the parent element based on the selector
       const parentElement = document.querySelector(parentSelector) as HTMLElement;
       if (!parentElement) return [];
 
+      // Gather all descendant selectors starting from the parent element
       return getAllDescendantSelectors(parentElement, parentElement);
     }, parentSelector);
 
@@ -845,6 +850,7 @@ export const getChildSelectors = async (page: Page, parentSelector: string): Pro
   }
 };
 
+
 /**
  * Returns the first pair from the given workflow that contains the given selector
  * inside the where condition, and it is the only selector there.