Merge pull request #393 from AutomationSolutionz/recorder

Muntasib-creator · web-flow · commit 4a0968a79e1e · 2023-12-10T20:24:15.000+06:00
Recorder
diff --git a/Apps/Web/AI_Recorder/background/back_reocrder.js b/Apps/Web/AI_Recorder/background/back_reocrder.js
@@ -11,6 +11,7 @@ const browserAppData = chrome || browser;
 var idx = 0;
 var recorded_actions = [];
 var action_name_convert = {
+    select: "click",
     type: "text",
     open: "go to link",
     Go_to_link: "go to link",
@@ -59,6 +60,7 @@ async function fetchAIData(idx, command, value, url, document){
     browserAppData.storage.local.set({
         recorded_actions: recorded_actions,
     })
+    if (['select', 'click'].includes(command)) value = ""
     let validate_full_text_by_ai = false
     if (command === 'validate full text by ai'){
         command = 'validate full text';
@@ -72,6 +74,7 @@ async function fetchAIData(idx, command, value, url, document){
         "action_value": value,
         "source": "web",
     };
+    console.log(document);
     var data = JSON.stringify(dataj);
 
     const url_ = `${metaData.url}/ai_record_single_action/`
diff --git a/Apps/Web/AI_Recorder/content/loc_builders.js b/Apps/Web/AI_Recorder/content/loc_builders.js
@@ -480,4 +480,236 @@ LocatorBuilders.add('xpath:idRelative', function(e) {
         current = current.parentNode;
     }
     return null;
-});
+});
+
+// The following code is fetched from https://github.com/firebug/firebug which is BSD licensed
+// A 3rd party tool to build exact xpath /html/body/div/...
+// Have not implemented this into locator_builder yet
+var Xpath = {};
+Xpath.getElementXPath = function(element)
+{
+    if (element && element.id)
+        return '//*[@id="' + element.id + '"]';
+    else
+        return Xpath.getElementTreeXPath(element);
+};
+
+Xpath.getElementTreeXPath = function(element)
+{
+    var paths = [];
+
+    // Use nodeName (instead of localName) so namespace prefix is included (if any).
+    for (; element && element.nodeType == Node.ELEMENT_NODE; element = element.parentNode)
+    {
+        var index = 0;
+        var hasFollowingSiblings = false;
+        for (var sibling = element.previousSibling; sibling; sibling = sibling.previousSibling)
+        {
+            // Ignore document type declaration.
+            if (sibling.nodeType == Node.DOCUMENT_TYPE_NODE)
+                continue;
+
+            if (sibling.nodeName == element.nodeName)
+                ++index;
+        }
+
+        for (var sibling = element.nextSibling; sibling && !hasFollowingSiblings;
+            sibling = sibling.nextSibling)
+        {
+            if (sibling.nodeName == element.nodeName)
+                hasFollowingSiblings = true;
+        }
+
+        var tagName = (element.prefix ? element.prefix + ":" : "") + element.localName;
+        var pathIndex = (index || hasFollowingSiblings ? "[" + (index + 1) + "]" : "");
+        paths.splice(0, 0, tagName + pathIndex);
+    }
+
+    return paths.length ? "/" + paths.join("/") : null;
+};
+
+Xpath.cssToXPath = function(rule)
+{
+    var regElement = /^([#.]?)([a-z0-9\\*_-]*)((\|)([a-z0-9\\*_-]*))?/i;
+    var regAttr1 = /^\[([^\]]*)\]/i;
+    var regAttr2 = /^\[\s*([^~=\s]+)\s*(~?=)\s*"([^"]+)"\s*\]/i;
+    var regPseudo = /^:([a-z_-])+/i;
+    var regCombinator = /^(\s*[>+\s])?/i;
+    var regComma = /^\s*,/i;
+
+    var index = 1;
+    var parts = ["//", "*"];
+    var lastRule = null;
+
+    while (rule.length && rule != lastRule)
+    {
+        lastRule = rule;
+
+        // Trim leading whitespace
+        rule = Str.trim(rule);
+        if (!rule.length)
+            break;
+
+        // Match the element identifier
+        var m = regElement.exec(rule);
+        if (m)
+        {
+            if (!m[1])
+            {
+                // XXXjoe Namespace ignored for now
+                if (m[5])
+                    parts[index] = m[5];
+                else
+                    parts[index] = m[2];
+            }
+            else if (m[1] == '#')
+                parts.push("[@id='" + m[2] + "']");
+            else if (m[1] == '.')
+                parts.push("[contains(concat(' ',normalize-space(@class),' '), ' " + m[2] + " ')]");
+
+            rule = rule.substr(m[0].length);
+        }
+
+        // Match attribute selectors
+        m = regAttr2.exec(rule);
+        if (m)
+        {
+            if (m[2] == "~=")
+                parts.push("[contains(@" + m[1] + ", '" + m[3] + "')]");
+            else
+                parts.push("[@" + m[1] + "='" + m[3] + "']");
+
+            rule = rule.substr(m[0].length);
+        }
+        else
+        {
+            m = regAttr1.exec(rule);
+            if (m)
+            {
+                parts.push("[@" + m[1] + "]");
+                rule = rule.substr(m[0].length);
+            }
+        }
+
+        // Skip over pseudo-classes and pseudo-elements, which are of no use to us
+        m = regPseudo.exec(rule);
+        while (m)
+        {
+            rule = rule.substr(m[0].length);
+            m = regPseudo.exec(rule);
+        }
+
+        // Match combinators
+        m = regCombinator.exec(rule);
+        if (m && m[0].length)
+        {
+            if (m[0].indexOf(">") != -1)
+                parts.push("/");
+            else if (m[0].indexOf("+") != -1)
+                parts.push("/following-sibling::");
+            else
+                parts.push("//");
+
+            index = parts.length;
+            parts.push("*");
+            rule = rule.substr(m[0].length);
+        }
+
+        m = regComma.exec(rule);
+        if (m)
+        {
+            parts.push(" | ", "//", "*");
+            index = parts.length-1;
+            rule = rule.substr(m[0].length);
+        }
+    }
+
+    var xpath = parts.join("");
+    return xpath;
+};
+
+Xpath.getElementsBySelector = function(doc, css)
+{
+    var xpath = Xpath.cssToXPath(css);
+    return Xpath.getElementsByXPath(doc, xpath);
+};
+
+Xpath.getElementsByXPath = function(doc, xpath)
+{
+    try
+    {
+        return Xpath.evaluateXPath(doc, xpath);
+    }
+    catch(ex)
+    {
+        return [];
+    }
+};
+
+/**
+ * Evaluates an XPath expression.
+ *
+ * @param {Document} doc
+ * @param {String} xpath The XPath expression.
+ * @param {Node} contextNode The context node.
+ * @param {int} resultType
+ *
+ * @returns {*} The result of the XPath expression, depending on resultType :<br> <ul>
+ *          <li>if it is XPathResult.NUMBER_TYPE, then it returns a Number</li>
+ *          <li>if it is XPathResult.STRING_TYPE, then it returns a String</li>
+ *          <li>if it is XPathResult.BOOLEAN_TYPE, then it returns a boolean</li>
+ *          <li>if it is XPathResult.UNORDERED_NODE_ITERATOR_TYPE
+ *              or XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, then it returns an array of nodes</li>
+ *          <li>if it is XPathResult.ORDERED_NODE_SNAPSHOT_TYPE
+ *              or XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, then it returns an array of nodes</li>
+ *          <li>if it is XPathResult.ANY_UNORDERED_NODE_TYPE
+ *              or XPathResult.FIRST_ORDERED_NODE_TYPE, then it returns a single node</li>
+ *          </ul>
+ */
+Xpath.evaluateXPath = function(doc, xpath, contextNode, resultType)
+{
+    if (contextNode === undefined)
+        contextNode = doc;
+
+    if (resultType === undefined)
+        resultType = XPathResult.ANY_TYPE;
+
+    var result = doc.evaluate(xpath, contextNode, null, resultType, null);
+
+    switch (result.resultType)
+    {
+        case XPathResult.NUMBER_TYPE:
+            return result.numberValue;
+
+        case XPathResult.STRING_TYPE:
+            return result.stringValue;
+
+        case XPathResult.BOOLEAN_TYPE:
+            return result.booleanValue;
+
+        case XPathResult.UNORDERED_NODE_ITERATOR_TYPE:
+        case XPathResult.ORDERED_NODE_ITERATOR_TYPE:
+            var nodes = [];
+            for (var item = result.iterateNext(); item; item = result.iterateNext())
+                nodes.push(item);
+            return nodes;
+
+        case XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE:
+        case XPathResult.ORDERED_NODE_SNAPSHOT_TYPE:
+            var nodes = [];
+            for (var i = 0; i < result.snapshotLength; ++i)
+                nodes.push(result.snapshotItem(i));
+            return nodes;
+
+        case XPathResult.ANY_UNORDERED_NODE_TYPE:
+        case XPathResult.FIRST_ORDERED_NODE_TYPE:
+            return result.singleNodeValue;
+    }
+};
+
+Xpath.getRuleMatchingElements = function(rule, doc)
+{
+    var css = rule.selectorText;
+    var xpath = Xpath.cssToXPath(css);
+    return Xpath.getElementsByXPath(doc, xpath);
+};
diff --git a/Apps/Web/AI_Recorder/content/rec_handlers.js b/Apps/Web/AI_Recorder/content/rec_handlers.js
@@ -60,7 +60,13 @@ Recorder.addEventHandler('type', 'change', function(event) {
 
 /* Recorder Click event */
 var preventClickTwice = false;
+var select_xpath
 Recorder.addEventHandler('clickAt', 'click', function(event) {
+    // console.log('click event', event);
+    // console.log("event.target", event.target);
+    var xpaths = this.locatorBuilders.buildAll(event.target);
+    if ('select' == event.target.nodeName.toLowerCase()) select_xpath = xpaths
+    // console.log("xpaths", xpaths);
     if (event.button == 0 && !preventClick && event.isTrusted) {
         if (!preventClickTwice) {
             var top = event.pageY,
@@ -71,9 +77,7 @@ Recorder.addEventHandler('clickAt', 'click', function(event) {
                 left -= element.offsetLeft;
                 element = element.offsetParent;
             } while (element);
-            var target = event.target;
-            this.record("click", this.locatorBuilders.buildAll(event.target), '');
-            var arrayTest = this.locatorBuilders.buildAll(event.target);
+            this.record("click", xpaths, '');
             preventClickTwice = true;
         }
         setTimeout(function() { preventClickTwice = false; }, 30);
@@ -456,14 +460,37 @@ Recorder.addEventHandler('select', 'focus', function(event) {
     }
 }, true);
 
+/* on focusout */
+var change_event_invoked = false;
+Recorder.addEventHandler('select_focusout', 'focusout', function(event) {
+    // if (event.target.tagName.toLowerCase() == 'select') console.log('select focusout', event);
+    if (event.target.tagName.toLowerCase() !== 'select') return;
+    setTimeout(()=>{
+        if (change_event_invoked) return;
+        var option = event.target.options[event.target.selectedIndex];
+        // console.log("event.target", event.target);
+        var xpaths = this.locatorBuilders.buildAll(event.target);
+        if (xpaths.length == 0) xpaths = select_xpath;
+        // console.log("xpaths", xpaths);
+        this.record("select", xpaths, this.getOptionLocator(option));
+        // console.log("option from select focusout event", option);
+        change_event_invoked = false;
+    }, 250)
+}, true);
+
 /* change */
-Recorder.addEventHandler('select', 'change', function(event) {
+Recorder.addEventHandler('select_change', 'change', function(event) {
     if (event.target.tagName) {
         var tagName = event.target.tagName.toLowerCase();
         if ('select' == tagName) {
+            console.log("select change event", event);
             if (!event.target.multiple) {
                 var option = event.target.options[event.target.selectedIndex];
                 this.record("select", this.locatorBuilders.buildAll(event.target), this.getOptionLocator(option));
+                change_event_invoked = true;
+                setTimeout(()=>{
+                    change_event_invoked = false;
+                },500)
             } else {
                 var options = event.target.options;
                 for (var i = 0; i < options.length; i++) {
diff --git a/Apps/Web/AI_Recorder/content/recorder.js b/Apps/Web/AI_Recorder/content/recorder.js
@@ -54,7 +54,7 @@ class Recorder {
         return frameLocation = "root" + frameLocation;
     }
 
-    prepare_dom(target, command){
+    prepare_dom(target, command, value){
         for (let each of target) if (each[1] == 'xpath:position') {
             var xpath = each[0];
             break;
@@ -66,6 +66,11 @@ class Recorder {
         var xPathResult = document.evaluate(xpath, html);
         if(xPathResult) var main_elem = xPathResult.iterateNext();
         else return;
+
+        if (main_elem.tagName === 'SELECT' && command === 'select'){
+            xPathResult = document.evaluate(`./option[normalize-space(text())="${value.substr(6).trim()}"]`, main_elem);
+            if(xPathResult) main_elem = xPathResult.iterateNext();
+        }
         
         main_elem.setAttribute('zeuz', 'aiplugin');
         console.log(main_elem.hasAttribute('zeuz'), main_elem);
@@ -97,7 +102,7 @@ class Recorder {
     }
 
     record(command, target, value, insertBeforeLastCommand, actualFrameLocation) {
-        const dom = this.prepare_dom(target, command)
+        const dom = this.prepare_dom(target, command, value)
         browserAppData.runtime.sendMessage({
             apiName: 'record_action',
             command: command,
diff --git a/Apps/Web/AI_Recorder/panel/assets/js/background/recorder.js b/Apps/Web/AI_Recorder/panel/assets/js/background/recorder.js
@@ -22,7 +22,7 @@ class BackgroundRecorder {
 				for(let i = 0; i < result.recorded_actions.length; i++){
 					if (result.recorded_actions[i] === 'empty'){
                         console.log("Opacity 2222 =================", result.recorded_actions);
-						$("#record_label").text("Waiting...");
+						$("#record_label").text("Recording...");
 						$("#record").attr('disabled', true).css('opacity',0.5);
 						return;
 					}
diff --git a/Framework/Built_In_Automation/Shared_Resources/LocateElement.py b/Framework/Built_In_Automation/Shared_Resources/LocateElement.py
@@ -225,7 +225,8 @@ def Get_Element(step_data_set, driver, query_debug=False, return_all_elements=Fa
                 pass
             try:
                 if CommonUtil.debug_status:
-                    CommonUtil.ExecLog(sModuleInfo, f"{generic_driver.execute_script('return document.body.outerHTML;')}", 3)
+                    # CommonUtil.ExecLog(sModuleInfo, f"{generic_driver.execute_script('return document.body.outerHTML;')}", 3)
+                    pass
             except:
                 pass
         return "zeuz_failed"

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ class BackgroundRecorder {`
`22`	`22`	`for(let i = 0; i < result.recorded_actions.length; i++){`
`23`	`23`	`if (result.recorded_actions[i] === 'empty'){`
`24`	`24`	`console.log("Opacity 2222 =================", result.recorded_actions);`
`25`		`- $("#record_label").text("Waiting...");`
	`25`	`+ $("#record_label").text("Recording...");`
`26`	`26`	`$("#record").attr('disabled', true).css('opacity',0.5);`
`27`	`27`	`return;`
`28`	`28`	`}`