feat: shadow dom selection

maxun-core/src/interpret.ts

@@ -403,7 +403,7 @@ export default class Interpreter extends EventEmitter {
         await this.options.serializableCallback(scrapeResults);
       },
 
-      scrapeSchema: async (schema: Record<string, { selector: string; tag: string, attribute: string; }>) => {
+      scrapeSchema: async (schema: Record<string, { selector: string; tag: string, attribute: string; shadow: string}>) => {
         await this.ensureScriptsLoaded(page);
 
         const scrapeResult = await page.evaluate((schemaObj) => window.scrapeSchema(schemaObj), schema);
@@ -663,11 +663,28 @@ export default class Interpreter extends EventEmitter {
       if (isApplicable) {
           return actionId;
       }
+    }
   }
+
+  private removeShadowSelectors(workflow: Workflow) {
+    for (let actionId = workflow.length - 1; actionId >= 0; actionId--) {
+      const step = workflow[actionId];
+
+      // Check if step has where and selectors
+      if (step.where && Array.isArray(step.where.selectors)) {
+          // Filter out selectors that contain ">>"
+          step.where.selectors = step.where.selectors.filter(selector => !selector.includes('>>'));
+      }
+    }
+
+    return workflow;
   }
 
   private async runLoop(p: Page, workflow: Workflow) {
-    const workflowCopy: Workflow = JSON.parse(JSON.stringify(workflow));
+    let workflowCopy: Workflow = JSON.parse(JSON.stringify(workflow));
+
+    // remove shadow selectors
+    workflowCopy = this.removeShadowSelectors(workflowCopy);
 
     // apply ad-blocker to the current page
     try {

server/src/types/index.ts

@@ -129,6 +129,11 @@ export interface BaseActionInfo {
     hasOnlyText: boolean;
 }
 
+interface ShadowSelector {
+    full: string;
+    mode: string;
+}
+
 /**
  * Holds all the possible css selectors that has been found for an element.
  * @category Types
@@ -143,6 +148,7 @@ export interface Selectors {
     hrefSelector: string|null;
     accessibilitySelector: string|null;
     formSelector: string|null;
+    shadowSelector: ShadowSelector | null;
 }
 
 /**
@@ -156,7 +162,7 @@ export interface BaseAction extends BaseActionInfo{
     associatedActions: ActionType[];
     inputType: string | undefined;
     value: string | undefined;
-    selectors: { [key: string]: string | null };
+    selectors: Selectors;
     timestamp: number;
     isPassword: boolean;
     /**

server/src/workflow-management/classes/Generator.ts

@@ -730,15 +730,26 @@ export class WorkflowGenerator {
     const displaySelector = await this.generateSelector(page, coordinates, ActionType.Click);
     const elementInfo = await getElementInformation(page, coordinates, this.listSelector, this.getList);
     if (rect) {
+      const highlighterData = {
+        rect,
+        selector: displaySelector,
+        elementInfo,
+        // Include shadow DOM specific information
+        shadowInfo: elementInfo?.isShadowRoot ? {
+          mode: elementInfo.shadowRootMode,
+          content: elementInfo.shadowRootContent
+        } : null
+      };
+
       if (this.getList === true) {
         if (this.listSelector !== '') {
           const childSelectors = await getChildSelectors(page, this.listSelector || '');
-          this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo, childSelectors })
+          this.socket.emit('highlighter', { ...highlighterData, childSelectors })
         } else {
-          this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo });
+          this.socket.emit('highlighter', { ...highlighterData });
         }
       } else {
-        this.socket.emit('highlighter', { rect, selector: displaySelector, elementInfo });
+        this.socket.emit('highlighter', { ...highlighterData });
       }
     }
   }