diff --git a/server/src/workflow-management/classes/Generator.ts b/server/src/workflow-management/classes/Generator.ts index f9ae1410..0b303478 100644 --- a/server/src/workflow-management/classes/Generator.ts +++ b/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, diff --git a/src/components/molecules/InterpretationButtons.tsx b/src/components/molecules/InterpretationButtons.tsx index 848c7e05..c9f45be2 100644 --- a/src/components/molecules/InterpretationButtons.tsx +++ b/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 ( - 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? - [previous action: {decisionModal.action}] -
{decisionModal.selector}
+ Your previous action was: + {decisionModal.action.charAt(0).toUpperCase() + decisionModal.action.slice(1)} , + on an element with text + {decisionModal.innerText} +
); default: return null;