Merge pull request #41 from amhsirak/develop

feat: display selected element information for decision modal

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

@@ -23,6 +23,8 @@ interface PersistedGeneratedData {
   lastUsedSelector: string;
   lastIndex: number | null;
   lastAction: string;
+  lastUsedSelectorTagName: string;
+  lastUsedSelectorInnerText: string;
 }
 
 interface MetaData {
@@ -97,6 +99,8 @@ export class WorkflowGenerator {
     lastUsedSelector: '',
     lastIndex: null,
     lastAction: '',
+    lastUsedSelectorTagName: '',
+    lastUsedSelectorInnerText: '',
   }
 
   /**
@@ -299,6 +303,22 @@ export class WorkflowGenerator {
     await this.addPairToWorkflowAndNotifyClient(pair, page);
   };
 
+  /**
+   * Returns tag name and text content for the specified selector
+   * used in customAction for decision modal
+   */
+  private async getLastUsedSelectorInfo(page: Page, selector: string) {
+    const elementHandle = await page.$(selector);
+    if (elementHandle) {
+      const tagName = await elementHandle.evaluate(el => (el as HTMLElement).tagName);
+      // TODO: based on tagName, send data. Always innerText won't hold true. For now, can roll. 
+      const innerText = await elementHandle.evaluate(el => (el as HTMLElement).innerText);
+
+      return { tagName, innerText };
+    }
+    return { tagName: '', innerText: '' };
+  }
+
   /**
    * Generates a pair for the custom action event.
    * @param action The type of the custom action.
@@ -315,11 +335,15 @@ export class WorkflowGenerator {
     }
 
     if (this.generatedData.lastUsedSelector) {
+      const elementInfo = await this.getLastUsedSelectorInfo(page, this.generatedData.lastUsedSelector);
+
       this.socket.emit('decision', {
         pair, actionType: 'customAction',
         lastData: {
           selector: this.generatedData.lastUsedSelector,
           action: this.generatedData.lastAction,
+          tagName: elementInfo.tagName,
+          innerText: elementInfo.innerText,
         }
       });
     } else {
@@ -486,7 +510,7 @@ export class WorkflowGenerator {
     const selectorBasedOnCustomAction = (this.getList === true)
       ? await getNonUniqueSelectors(page, coordinates)
       : await getSelectors(page, coordinates);
-      
+
     const bestSelector = getBestSelectorForAction(
       {
         type: action,

src/components/molecules/InterpretationButtons.tsx

@@ -28,9 +28,11 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
     pair: WhereWhatPair | null,
     actionType: string,
     selector: string,
+    tagName: string,
+    innerText: string,
     action: string,
     open: boolean
-  }>({ pair: null, actionType: '', selector: '', action: '', open: false });
+  }>({ pair: null, actionType: '', selector: '', action: '', tagName: '', innerText: '', open: false });
 
   const { socket } = useSocketStore();
   const { notify } = useGlobalInfoStore();
@@ -48,14 +50,16 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
 
   const decisionHandler = useCallback(
     ({ pair, actionType, lastData }
-      : { pair: WhereWhatPair | null, actionType: string, lastData: { selector: string, action: string } }) => {
-      const { selector, action } = lastData;
+      : { pair: WhereWhatPair | null, actionType: string, lastData: { selector: string, action: string, tagName: string, innerText: string } }) => {
+      const { selector, action, tagName, innerText } = lastData;
       setDecisionModal((prevState) => {
         return {
           pair,
           actionType,
           selector,
           action,
+          tagName,
+          innerText,
           open: true,
         }
       })
@@ -64,7 +68,7 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
   const handleDecision = (decision: boolean) => {
     const { pair, actionType } = decisionModal;
     socket?.emit('decision', { pair, actionType, decision });
-    setDecisionModal({ pair: null, actionType: '', selector: '', action: '', open: false });
+    setDecisionModal({ pair: null, actionType: '', selector: '', action: '', tagName: '', innerText: '', open: false });
   }
 
   const handleDescription = () => {
@@ -73,12 +77,14 @@ export const InterpretationButtons = ({ enableStepping }: InterpretationButtonsP
         return (
           <React.Fragment>
             <Typography>
-              Do you want to use the previously recorded selector
-              as a where condition for matching the action?
+              Do you want to use your previous selection as a condition for performing this action?
             </Typography>
             <Box style={{ marginTop: '4px' }}>
-              [previous action: <b>{decisionModal.action}</b>]
-              <pre>{decisionModal.selector}</pre>
+              <Typography>Your previous action was:
+                <b>{decisionModal.action.charAt(0).toUpperCase() + decisionModal.action.slice(1)} </b>,
+                on an element with text
+                <b>{decisionModal.innerText} </b>
+              </Typography>
             </Box>
           </React.Fragment>);
       default: return null;