topological-nodered-wdio 1.0.0 → 1.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "topological-nodered-wdio",
   "description": "Open source WebdriverIO nodes for Node-RED",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "author": "topological",
   "license": "MIT",
   "repository": {

package/src/dropdown-action.js

@@ -13,7 +13,6 @@ module.exports = function(RED) {
 
         let browser = await common.getBrowser(node.context())
         let locator = await common.getLocator(
-          browser,
           locateUsing,
           locateValue
         )

package/src/element-action.html

@@ -1,5 +1,5 @@
 <script type="text/javascript">
-  function setAction() {
+  const setAction = () => {
     let action = $('#node-input-action').val()
     $('#actionSendKeys').hide()
     $('#getAttribute').hide()
@@ -11,13 +11,61 @@
     }
   }
 
+  const showSelectors = () => {
+    let locateType = $('#node-input-locateType').prop('checked')
+    if (locateType) {
+      $('.node-input-locateValues-container-row').show()
+      $('#node-input-locateValue').parent().hide()
+      $('#node-input-locateUsing').parent().hide()
+    } else {
+      $('.node-input-locateValues-container-row').hide()
+      $('#node-input-locateValue').parent().show()
+      $('#node-input-locateUsing').parent().show()
+    }
+  }
+
+  const multiSelectorsUI = (node) => {
+        $('#node-input-locateValues-container').css('min-height', '50vh').css('min-width', '600px').editableList({
+            addItem: function (container, index, data) {
+                container.css({
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap'
+                });
+                let fragment = document.createDocumentFragment();
+                var row = $('<div/>', { style: "display:flex;" }).appendTo(fragment);
+                var selectField = $('<select/>', { class: "node-input-locateValues-using", style: "width:30%; margin-right:10px;border-radius:5px; border: 1px solid lightgray; outline-color: rgba(85, 150, 230, 0.8); outline-width: thin;" }).appendTo(row);
+                selectField.append($('<option>', { value: 'id', text: 'id' }));
+                selectField.append($('<option>', { value: 'name', text: 'name' }));
+                selectField.append($('<option>', { value: 'css selector', text: 'CSS selector' }));
+                selectField.append($('<option>', { value: 'link text', text: 'Link text' }));
+                selectField.append($('<option>', { value: 'partial link text', text: 'Partial link text' }));
+                selectField.append($('<option>', { value: 'tag name', text: 'Tag name' }));
+                selectField.append($('<option>', { value: 'xpath', text: 'XPath' }));
+                var inputField = $('<input/>', { class: "node-input-locateValues-value", style: "width:65%; margin-right:10px;border-radius:5px; border: 1px solid lightgray; outline-color: rgba(85, 150, 230, 0.8); outline-width: thin;", placeholder: "selector" }).appendTo(row);
+                if (data === null || data === undefined) {
+                    data = { using: 'xpath', value: '' }
+                }
+                selectField.val(data.using)
+                inputField.val(data.value)
+                container.append(fragment)
+            },
+            removable: true,
+            sortable: true
+        })
+
+        $('#node-input-locateValues-container').editableList('addItems', node.locateValues || []);
+    }
+
+
   RED.nodes.registerType('element-action', {
     category: 'Webdriver IO',
     color: '#a6bbcf',
     defaults: {
       name: { value: '' },
       locateUsing: { value: 'xpath' },
+      locateType: { value: false },
       locateValue: { value: '' },
+      locateValues: { value: [] },
       action: { value: 'click' },
       sendKeys: {
         value: '',
@@ -29,38 +77,46 @@
     inputs: 1,
     outputs: 1,
     icon: 'white-globe.png',
-    label: function() {
+    label: function () {
       return this.name || 'element action'
     },
-    oneditprepare: function() {
+    oneditprepare: function () {
+      var that = this
       setAction()
+      showSelectors()
+      multiSelectorsUI(that)
       $('#node-input-sendKeys').typedInput({
         default: 'str',
         typeField: $('#node-input-object'),
         types: ['msg', 'flow', 'global', 'str']
       })
+    }, 
+    oneditsave: function () {
+      var node = this
+      var locateType = $('#node-input-locateType').prop('checked')
+      node.locateType = locateType
+      if (locateType) {
+        var locateValues = $('#node-input-locateValues-container').editableList('items')
+        node.locateValues = []
+        locateValues.each(function () {
+          var using = $(this).find('.node-input-locateValues-using').val()
+          var value = $(this).find('.node-input-locateValues-value').val()
+          node.locateValues.push({ using, value })
+        })
+      } else {
+        node.locateValues = []
+        node.locateValue = $('#node-input-locateValue').val()
+        node.locateUsing = $('#node-input-locateUsing').val()
+      }
     }
   })
 </script>
 
 <script type="text/x-red" data-template-name="element-action">
   <div class="form-row">
-      <label for="node-input-locateUsing"><i class="fa fa-tasks"></i> Locate Method</label>
-      <select type="text" id="node-input-locateUsing" style="width:70%;">
-          <option value="id">id</option>
-          <option value="name">name</option>
-          <option value="css selector">CSS selector</option>
-          <option value="link text">Link text</option>
-          <option value="partial link text">Partial link text</option>
-          <option value="tag name">Tag name</option>
-          <option value="xpath" selected>XPath</option>
-      </select>
-  </div>
-  <div class="form-row">
-      <label for="node-input-locateValue"><i class="fa fa-tasks"></i> Selector</label>
-      <input id="node-input-locateValue" type="text">
+      <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+      <input id="node-input-name" type="text">
   </div>
-
   <div class="form-row">
       <label for="node-input-action"><i class="fa fa-tasks"></i> Action</label>
       <select type="text" id="node-input-action" style="width:70%;" onchange="setAction()">
@@ -84,9 +140,29 @@
       <input id="node-input-attribute" type="text">
   </div>
   <div class="form-row">
-      <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
-      <input id="node-input-name" type="text">
+      <label for="node-input-locateType"><i class="fa fa-tasks"></i> Multiple Selector?</label>
+      <input id="node-input-locateType" type="checkbox" style="width:30px;" onchange="showSelectors()">
+  </div>
+  <div class="form-row">
+      <label for="node-input-locateUsing"><i class="fa fa-tasks"></i> Locate Using</label>
+      <select type="text" id="node-input-locateUsing" style="width:70%;">
+          <option value="id">id</option>
+          <option value="name">name</option>
+          <option value="css selector">CSS selector</option>
+          <option value="link text">Link text</option>
+          <option value="partial link text">Partial link text</option>
+          <option value="tag name">Tag name</option>
+          <option value="xpath" selected>XPath</option>
+      </select>
+  </div>  
+  <div class="form-row">
+      <label for="node-input-locateValue"><i class="fa fa-tasks"></i> Selector</label>
+      <input id="node-input-locateValue" type="text">
   </div>
+  <div class="form-row node-input-locateValues-container-row" style="position:relative">
+        <h4 style="margin-bottom: 3px;">Selectors :</h4>
+        <ol id="node-input-locateValues-container"></ol>
+  </div>   
 </script>
 
 <script type="text/x-red" data-help-name="element-action">
@@ -130,4 +206,4 @@
         </ul>
    </p>
    <p><b>Text to Send</b> if the Send Keys action is selected, this value would send the text to the selected web element.<br></p>
-</script>
+</script>

package/src/element-action.js

@@ -1,105 +1,134 @@
-const common = require('./wdio-common')
+const common = require("./wdio-common");
 
-module.exports = function(RED) {
+module.exports = function (RED) {
   function elementAction(config) {
-    RED.nodes.createNode(this, config)
-    const node = this
-    const context = node.context()
-    common.clearStatus(node)
+    RED.nodes.createNode(this, config);
+    const node = this;
+    const context = node.context();
+    common.clearStatus(node);
 
     var getTypeInputValue = async (msg, type, value) => {
-      var r = ''
+      var r = "";
       switch (type) {
-        case 'msg':
-          r = RED.util.getMessageProperty(msg, value)
-          break
-        case 'flow':
-          r = context.flow.get(value)
-          break
-        case 'global':
-          r = context.global.get(value)
-          break
-        case 'str':
+        case "msg":
+          r = RED.util.getMessageProperty(msg, value);
+          break;
+        case "flow":
+          r = context.flow.get(value);
+          break;
+        case "global":
+          r = context.global.get(value);
+          break;
+        case "str":
           try {
-            r = unescape(JSON.parse('"' + value + '"'))
+            r = unescape(JSON.parse('"' + value + '"'));
           } catch (e) {
-            r = value
+            r = value;
           }
-          break
-        case 'num':
-          r = parseFloat(value)
-          break
-        case 'json':
-          if (value !== '') {
-            r = JSON.parse(value)
+          break;
+        case "num":
+          r = parseFloat(value);
+          break;
+        case "json":
+          if (value !== "") {
+            r = JSON.parse(value);
           } else {
-            r = undefined
+            r = undefined;
           }
       }
-      return r
-    }
+      return r;
+    };
 
-    node.on('input', async (msg) => {
+    node.on("input", async (msg) => {
       try {
-        let locateUsing = config.locateUsing || msg.locateUsing
-        let locateValue = config.locateValue || msg.locateValue
+        let multiple = config.locateType || msg.locateType;
+        let locateValues = config.locateValues || msg.locateValues;
+        let locateUsing = config.locateUsing || msg.locateUsing;
+        let locateValue = config.locateValue || msg.locateValue;
 
-        let browser = await common.getBrowser(context)
-        let capabilities = browser.capabilities
-        let elementId = await common.getElementId(
-          browser,
-          locateUsing,
-          locateValue
-        )
+        let browser = await common.getBrowser(context);
+        let capabilities = browser.capabilities;
+        let elementId = null;
+        node.log = "";
 
-        let attribute = config.attribute || msg.attribute
+        if (!multiple) {
+          elementId = await common.getElementId(
+            browser,
+            locateUsing,
+            locateValue
+          );
+          if (!elementId) {
+            throw new Error(`Element not found using ${locateUsing}: ${locateValue}`);
+          }
+        } else {
+          for (let i = 0; i < locateValues.length; i++) {
+            const { using, value } = locateValues[i];
+            elementId = await common.getElementId(browser, using, value);
+            if (elementId) {
+              node.log += `Attempt ${i + 1}: Element found using ${using}: ${value}\n`;
+              locateUsing = using
+              locateValue = value
+              break;
+            }
+            else {
+              node.log += `Attempt ${i + 1}: Element not found using ${using}: ${value}\n`;
+              node.warn(`Element not found using ${using}: ${value}`);
+            }
+          }
+          if (!elementId) {
+            throw new Error(`Element not found using all selector values`);
+          }
+        }
+
+        let attribute = config.attribute || msg.attribute;
 
-        if (config.action === 'click') {
-          node.log = `Click on the webelement identified using ${locateUsing}: "${locateValue}".`
-          await browser.elementClick(elementId)
-        } else if (config.action === 'clear') {
-          node.log = `Clear the Value of the webelement identified using ${locateUsing}: "${locateValue}".`
-          await browser.elementClear(elementId)
-        } else if (config.action === 'sendKeys') {
+        if (config.action === "click") {
+          node.log += `Click on the webelement identified using ${locateUsing}: "${locateValue}".`;
+          await browser.elementClick(elementId);
+        } else if (config.action === "clear") {
+          node.log += `Clear the Value of the webelement identified using ${locateUsing}: "${locateValue}".`;
+          await browser.elementClear(elementId);
+        } else if (config.action === "sendKeys") {
           let value = await getTypeInputValue(
             msg,
             config.object,
             config.sendKeys
-          )
-          node.log = `Enter the Value: "${value}" to the webelement identified using ${locateUsing}: "${locateValue}".`
+          );
+          node.log += `Enter the Value: "${value}" to the webelement identified using ${locateUsing}: "${locateValue}".`;
           await browser.elementSendKeys(
             elementId,
             capabilities.version ? Array.from(value) : value
-          )
-        } else if (config.action === 'getValue') {
-          node.log = `Get the Value of webelement identified using ${locateUsing}: "${locateValue}".`
-          msg.payload = await browser.getElementAttribute(elementId, 'value')
-        } else if (config.action === 'getText') {
-          node.log = `Get the Text of webelement identified using ${locateUsing}: "${locateValue}".`
-          msg.payload = await browser.getElementText(elementId)
-        } else if (config.action === 'getAttribute') {
-          node.log = `Get the Attribute: "${attribute}" of webelement identified using ${locateUsing}: "${locateValue}".`
-          msg.payload = await browser.getElementAttribute(elementId, attribute)
-        } else if (config.action === 'takeScreenShot') {
-          node.log = 'Take the screenshot of the webelement.'
-          msg.payload = await browser.takeElementScreenshot(elementId)
-        } else if (config.action === 'hover') {
+          );
+        } else if (config.action === "getValue") {
+          node.log += `Get the Value of webelement identified using ${locateUsing}: "${locateValue}".`;
+          msg.payload = await browser.getElementAttribute(elementId, "value");
+        } else if (config.action === "getText") {
+          node.log += `Get the Text of webelement identified using ${locateUsing}: "${locateValue}".`;
+          msg.payload = await browser.getElementText(elementId);
+        } else if (config.action === "getAttribute") {
+          node.log += `Get the Attribute: "${attribute}" of webelement identified using ${locateUsing}: "${locateValue}".`;
+          msg.payload = await browser.getElementAttribute(elementId, attribute);
+        } else if (config.action === "takeScreenShot") {
+          node.log += "Take the screenshot of the webelement.";
+          msg.payload = await browser.takeElementScreenshot(elementId);
+        } else if (config.action === "hover") {
           let element = await common.getElement(
             browser,
             locateUsing,
             locateValue
-          )
-          node.log = `Hover on the webelement identified using ${locateUsing}: "${locateValue}".`
-          msg.payload = await element.moveTo()
+          );
+          node.log += `Hover on the webelement identified using ${locateUsing}: "${locateValue}".`;
+          msg.payload = await element.moveTo();
         }
-        await common.log(node)
-        common.successStatus(node)
-        node.send(msg)
+        await common.log(node);
+        common.successStatus(node);
+        node.send(msg);
       } catch (e) {
-        await common.log(node)
-        common.handleError(e, node, msg)
+        node.log = `Error: ${e.message}`;
+        await common.log(node);
+        common.handleError(e, node, msg);
       }
-    })
+    });
   }
-  RED.nodes.registerType('element-action', elementAction)
-}
+  RED.nodes.registerType("element-action", elementAction);
+};

package/src/wdio-common.js

@@ -1,13 +1,13 @@
-const wdio = require('webdriverio')
-let newSessionNode
+const wdio = require("webdriverio");
+let newSessionNode;
 
 module.exports.getBrowser = (context) => {
-  let browser = context.flow.get('wdio_browser')
+  let browser = context.flow.get("wdio_browser");
   if (!browser || !browser.sessionId)
-    throw new Error('No session defined - call newSession first')
+    throw new Error("No session defined - call newSession first");
 
-  return browser
-}
+  return browser;
+};
 
 /*
 config = {
@@ -25,139 +25,131 @@ config = {
 }
 */
 module.exports.newSession = async (config, node, context) => {
-  let browser
+  let browser;
   try {
-    browser = await wdio.remote(config)
-    context.flow.set('wdio_browser', browser)
-    newSessionNode = node
+    browser = await wdio.remote(config);
+    context.flow.set("wdio_browser", browser);
+    newSessionNode = node;
   } catch (e) {
-    throw e
+    throw e;
   }
-  return browser
-}
+  return browser;
+};
 
 module.exports.deleteSession = async (context) => {
-  let b
-  let browser = context.flow.get('wdio_browser')
+  let b;
+  let browser = context.flow.get("wdio_browser");
   try {
-    b = { sessionId: browser.sessionId }
-    await browser.closeWindow()
-    await browser.deleteSession()
-    context.flow.set('wdio_browser', null)
-    if (newSessionNode) module.exports.disconnected(newSessionNode)
+    b = { sessionId: browser.sessionId };
+    await browser.closeWindow();
+    await browser.deleteSession();
+    context.flow.set("wdio_browser", null);
+    if (newSessionNode) module.exports.disconnected(newSessionNode);
   } catch (e) {}
-  return b
-}
+  return b;
+};
 
 module.exports.getElementId = async (browser, using, value) => {
-  let elementId
-  try {
-    const element = await browser.findElement(using, value)
-    if (element && Object.keys(element)) {
-      elementId = element[Object.keys(element)[0]]
-    } else {
-      let e
-      if (element && element.message) {
-        e = element.message
-      } else {
-        e = 'Element not found'
-      }
-      throw new Error(e)
-    }
-  } catch (e) {
-    throw e
+  const element = await browser.findElement(using, value);
+  return element.ELEMENT ?? "";
+};
+
+module.exports.getLocator = async (using, value) => {
+  let locator = "";
+  switch (using) {
+    case "id":
+      locator = `#${value}`;
+      break;
+    case "name":
+      locator = `[name='${value}']`;
+      break;
+    case "className":
+      locator = `.${value}`;
+      break;
+    case "tagName":
+      locator = value;
+      break;
+    case "cssSelector":
+      locator = value;
+      break;
+    case "text":
+      locator = `=${value}`;
+      break;
+    case "partialText":
+      locator = `*=${value}`;
+      break;
+    case "xPath":
+      locator = value;
+      break;
+    default:
+      locator = value;
   }
-  return elementId
-}
 
-module.exports.getLocator = async (browser, using, value) => {
-  let locator = ''
-    switch (using) {
-        case 'id':
-            locator = `#${value}`
-            break
-        case 'name':
-            locator = `[name='${value}']`
-            break
-        case 'className':
-            locator = `.${value}`
-            break
-        case 'tagName':
-            locator = value
-            break
-        case 'cssSelector':
-            locator = value
-            break
-        case 'text':
-            locator = `=${value}`
-            break
-        case 'partialText':
-            locator = `*=${value}`
-            break
-        case 'xPath':
-            locator = value
-            break
-        default:
-            locator = value
-    }
-
-  return locator
-}
+  return locator;
+};
 
 module.exports.handleError = (e, node, msg) => {
-  console.log(e)
-  module.exports.errorStatus(node)
-  node.error(e, msg)
-}
+  console.log(e);
+  module.exports.errorStatus(node);
+  node.error(e, msg);
+};
 
 module.exports.clearStatus = (node) => {
-  node.status({})
-}
+  node.status({});
+};
 
 module.exports.connectedStatus = (node) => {
   node.status({
-    fill: 'green',
-    shape: 'dot',
-    text: 'connected'
-  })
-}
+    fill: "green",
+    shape: "dot",
+    text: "connected",
+  });
+};
 
 module.exports.disconnectedStatus = (node) => {
   node.status({
-    fill: 'green',
-    shape: 'ring',
-    text: 'disconnected'
-  })
-}
+    fill: "green",
+    shape: "ring",
+    text: "disconnected",
+  });
+};
 
 module.exports.successStatus = (node) => {
   node.status({
-    fill: 'green',
-    shape: 'ring',
-    text: 'done'
-  })
-}
+    fill: "green",
+    shape: "ring",
+    text: "done",
+  });
+};
 
 module.exports.errorStatus = (node) => {
   node.status({
-    fill: 'red',
-    shape: 'ring',
-    text: 'error'
-  })
-}
+    fill: "red",
+    shape: "ring",
+    text: "error",
+  });
+};
 
 module.exports.log = async (node) => {
-  let context = node.context()
-  let stepCount = await (context.global.get('stepCount') || 0) + 1
-  let document = await context.global.get('document') || ''
-  await context.global.set('document', `${document}${stepCount}. Node: ${node.name} - ${node.log}\n`)
-  await context.global.set('stepCount', stepCount)
-}
+  let context = node.context();
+  let stepCount = (await (context.global.get("stepCount") || 0)) + 1;
+  let document = (await context.global.get("document")) || "";
+  await context.global.set(
+    "document",
+    `${document}${stepCount}. Node (${node.id}): ${node.name} - ${node.log}\n`
+  );
+  await context.global.set("stepCount", stepCount);
+};
 
 module.exports.document = async (node) => {
-  let context = node.context()
-  let document = await context.global.get('document') || ''
-  document = node.line? `${document}\n${node.name}${node.refUrl? `\nRef: ${node.refUrl}`:''}\n\n` : 
-                          `${document}********************\n${node.name}${node.refUrl? `\nRef: ${node.refUrl}`:''}\n********************\n`
-  await context.global.set('document', document.replaceAll('\\n','\n'))
-}
+  let context = node.context();
+  let document = (await context.global.get("document")) || "";
+  document = node.line
+    ? `${document}\n${node.name}${
+        node.refUrl ? `\nRef: ${node.refUrl}` : ""
+      }\n\n`
+    : `${document}********************\n${node.name}${
+        node.refUrl ? `\nRef: ${node.refUrl}` : ""
+      }\n********************\n`;
+  await context.global.set("document", document.replaceAll("\\n", "\n"));
+};