topological-nodered-wdio 0.5.4 → 1.1.0

package/src/element-action.html

@@ -1,133 +1,209 @@
-<script type="text/javascript">
-  function setAction() {
-    let action = $('#node-input-action').val()
-    $('#actionSendKeys').hide()
-    $('#getAttribute').hide()
-    if (action == 'sendKeys') {
-      $('#actionSendKeys').show()
-    }
-    if (action == 'getAttribute') {
-      $('#getAttribute').show()
-    }
-  }
-
-  RED.nodes.registerType('element-action', {
-    category: 'Webdriver IO',
-    color: '#a6bbcf',
-    defaults: {
-      name: { value: '' },
-      locateUsing: { value: 'xpath' },
-      locateValue: { value: '' },
-      action: { value: 'click' },
-      sendKeys: {
-        value: '',
-        validate: RED.validators.typedInput('object')
-      },
-      object: { value: '' },
-      attribute: { value: '' }
-    },
-    inputs: 1,
-    outputs: 1,
-    icon: 'white-globe.png',
-    label: function() {
-      return this.name || 'element action'
-    },
-    oneditprepare: function() {
-      setAction()
-      $('#node-input-sendKeys').typedInput({
-        default: 'str',
-        typeField: $('#node-input-object'),
-        types: ['msg', 'flow', 'global', 'str']
-      })
-    }
-  })
-</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">
-  </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()">
-          <option value="click">Click</option>
-          <option value="clear">Clear</option>
-          <option value="sendKeys">Send Keys</option>
-          <option value="getValue">Get Value</option>
-          <option value="getText">Get Text</option>
-          <option value="getAttribute">Get Attribute</option>
-          <option value="takeScreenShot">Element Screenshot</option>
-          <option value="hover">Hover</option>
-      </select>
-  </div>
-  <div class="form-row" id="actionSendKeys">
-      <label for="node-input-sendKeys"><i class="fa fa-tasks"></i> Text to Send</label>
-      <input type="text" id="node-input-sendKeys" style="width:70%">
-      <input type="hidden" id="node-input-object">
-  </div>
-  <div class="form-row" id="getAttribute">
-      <label for="node-input-attribute"><i class="fa fa-tasks"></i>Attribute Name</label>
-      <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">
-  </div>
-</script>
-
-<script type="text/x-red" data-help-name="element-action">
-  <h3>Perform a list of actions on a target web element.</h3>
-  <h3>Inputs</h3>
-        <dl class="message-properties">
-
-          <dt><code>mgs.locateUsing</code>: <span class="property-type">string</span></dt>
-          <dd>specifies the type of web element identifier:
-            <ul>
-                <li>id</li>
-                <li>name</li>
-                <li>CSS selector</li>
-                <li>Link text</li>
-                <li>Partial link text</li>
-                <li>Tag name</li>
-                <li>XPath</li>
-            </ul>
-            <br>
-          </dd>
-          <dt><code>msg.locateValue</code><span class="property-type">string</span></dt>
-          <dd>value passed to the web element identifier (Locate Method)<br></dd>
-
-          <dt><code>msg.value</code><span class="property-type">string</span></dt>
-          <dd>If you elect to SendKeys to the web element, this is the value that would be sent</dd>
-        </dl>
-
-  <h3>Details</h3>
-   <p><b>Locate Method</b> specifies the method used to target the web element. This option can be selected manually from the Properties panel OR it can be received from <code>mgs.locateUsing</code><br></p>
-   <p><b>Selector</b> value used by the Locate Method to target the web element. This option can be selected manually from the Properties panel OR it can be received from <code>mgs.locateValue</code><br></p>
-   <p><b>Action</b> specifies the action to be performed on the target web element. Actions includes:
-        <ul>
-            <li>Click</li>
-            <li>Clear</li>
-            <li>Send Keys</li>
-            <li>Get Value</li>
-            <li>Get Text</li>
-            <li>Get Attribute</li>
-            <li>Element Screenshot</li>
-            <li>Hover</li>
-        </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 type="text/javascript">
+  const setAction = () => {
+    let action = $('#node-input-action').val()
+    $('#actionSendKeys').hide()
+    $('#getAttribute').hide()
+    if (action == 'sendKeys') {
+      $('#actionSendKeys').show()
+    }
+    if (action == 'getAttribute') {
+      $('#getAttribute').show()
+    }
+  }
+
+  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: '',
+        validate: RED.validators.typedInput('object')
+      },
+      object: { value: '' },
+      attribute: { value: '' }
+    },
+    inputs: 1,
+    outputs: 1,
+    icon: 'white-globe.png',
+    label: function () {
+      return this.name || 'element action'
+    },
+    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-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()">
+          <option value="click">Click</option>
+          <option value="clear">Clear</option>
+          <option value="sendKeys">Send Keys</option>
+          <option value="getValue">Get Value</option>
+          <option value="getText">Get Text</option>
+          <option value="getAttribute">Get Attribute</option>
+          <option value="takeScreenShot">Element Screenshot</option>
+          <option value="hover">Hover</option>
+      </select>
+  </div>
+  <div class="form-row" id="actionSendKeys">
+      <label for="node-input-sendKeys"><i class="fa fa-tasks"></i> Text to Send</label>
+      <input type="text" id="node-input-sendKeys" style="width:70%">
+      <input type="hidden" id="node-input-object">
+  </div>
+  <div class="form-row" id="getAttribute">
+      <label for="node-input-attribute"><i class="fa fa-tasks"></i>Attribute Name</label>
+      <input id="node-input-attribute" type="text">
+  </div>
+  <div class="form-row">
+      <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 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">
+  </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">
+  <h3>Perform a list of actions on a target web element.</h3>
+  <h3>Inputs</h3>
+        <dl class="message-properties">
+
+          <dt><code>mgs.locateUsing</code>: <span class="property-type">string</span></dt>
+          <dd>specifies the type of web element identifier:
+            <ul>
+                <li>id</li>
+                <li>name</li>
+                <li>CSS selector</li>
+                <li>Link text</li>
+                <li>Partial link text</li>
+                <li>Tag name</li>
+                <li>XPath</li>
+            </ul>
+            <br>
+          </dd>
+          <dt><code>msg.locateValue</code><span class="property-type">string</span></dt>
+          <dd>value passed to the web element identifier (Locate Method)<br></dd>
+
+          <dt><code>msg.value</code><span class="property-type">string</span></dt>
+          <dd>If you elect to SendKeys to the web element, this is the value that would be sent</dd>
+        </dl>
+
+  <h3>Details</h3>
+   <p><b>Locate Method</b> specifies the method used to target the web element. This option can be selected manually from the Properties panel OR it can be received from <code>mgs.locateUsing</code><br></p>
+   <p><b>Selector</b> value used by the Locate Method to target the web element. This option can be selected manually from the Properties panel OR it can be received from <code>mgs.locateValue</code><br></p>
+   <p><b>Action</b> specifies the action to be performed on the target web element. Actions includes:
+        <ul>
+            <li>Click</li>
+            <li>Clear</li>
+            <li>Send Keys</li>
+            <li>Get Value</li>
+            <li>Get Text</li>
+            <li>Get Attribute</li>
+            <li>Element Screenshot</li>
+            <li>Hover</li>
+        </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>

package/src/element-action.js

@@ -1,105 +1,107 @@
-const common = require('./wdio-common')
-
-module.exports = function(RED) {
-  function elementAction(config) {
-    RED.nodes.createNode(this, config)
-    const node = this
-    const context = node.context()
-    common.clearStatus(node)
-
-    var getTypeInputValue = async (msg, type, value) => {
-      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':
-          try {
-            r = unescape(JSON.parse('"' + value + '"'))
-          } catch (e) {
-            r = value
-          }
-          break
-        case 'num':
-          r = parseFloat(value)
-          break
-        case 'json':
-          if (value !== '') {
-            r = JSON.parse(value)
-          } else {
-            r = undefined
-          }
-      }
-      return r
-    }
-
-    node.on('input', async (msg) => {
-      try {
-        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 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') {
-          let value = await getTypeInputValue(
-            msg,
-            config.object,
-            config.sendKeys
-          )
-          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') {
-          let element = await common.getElement(
-            browser,
-            locateUsing,
-            locateValue
-          )
-          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)
-      } catch (e) {
-        await common.log(node)
-        common.handleError(e, node, msg)
-      }
-    })
-  }
-  RED.nodes.registerType('element-action', elementAction)
-}
+const common = require('./wdio-common')
+
+module.exports = function(RED) {
+  function elementAction(config) {
+    RED.nodes.createNode(this, config)
+    const node = this
+    const context = node.context()
+    common.clearStatus(node)
+
+    var getTypeInputValue = async (msg, type, value) => {
+      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':
+          try {
+            r = unescape(JSON.parse('"' + value + '"'))
+          } catch (e) {
+            r = value
+          }
+          break
+        case 'num':
+          r = parseFloat(value)
+          break
+        case 'json':
+          if (value !== '') {
+            r = JSON.parse(value)
+          } else {
+            r = undefined
+          }
+      }
+      return r
+    }
+
+    node.on('input', async (msg) => {
+      try {
+        let multiple = config.locateType || msg.locateType
+        let locateValues = config.locateValues || msg.locateValues
+        let locateUsing = multiple ? locateValues[0].using : config.locateUsing || msg.locateUsing
+        let locateValue = multiple ? locateValues[0].value : config.locateValue || msg.locateValue
+        
+        let browser = await common.getBrowser(context)
+        let capabilities = browser.capabilities
+        let elementId = await common.getElementId(
+          browser,
+          locateUsing,
+          locateValue
+        )
+
+        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') {
+          let value = await getTypeInputValue(
+            msg,
+            config.object,
+            config.sendKeys
+          )
+          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') {
+          let element = await common.getElement(
+            browser,
+            locateUsing,
+            locateValue
+          )
+          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)
+      } catch (e) {
+        await common.log(node)
+        common.handleError(e, node, msg)
+      }
+    })
+  }
+  RED.nodes.registerType('element-action', elementAction)
+}