Added helpers.clickHiddenElement method to click elements not visible in the DOM (hover menu items for example)

Author: John Doherty

runtime/helpers.js

@@ -40,7 +40,8 @@ module.exports = {
     },
 
     /**
-     * returns list of elements matching a query selector who's inner text mathes param
+     * returns list of elements matching a query selector who's inner text mathes param.
+     * WARNING: The element returned might not be visible in the DOM and will therefore have restricted interactions
      * @param {string} css selector used to get list of elements
      * @param {string} inner text to match (does not have to be visible)
      * @returns {Promise}
@@ -82,9 +83,48 @@ module.exports = {
      *      helpers.getFirstElementContainingText('nav[role="navigation"] ul li a', 'Safety Boots').click();
      */
     getFirstElementContainingText: function(cssSelector, textToMatch){
+
         return helpers.getElementsContainingText(cssSelector, textToMatch).then(function(elements){
             return elements[0];
         });
+    },
+
+    /**
+     * clicks an element (or multiple if present) that is not visible, useful in situations where a menu needs a hover before a child link appears
+     * @param {string} css selector used to locate the elements
+     * @param {string} text to match inner content (if present)
+     * @example
+     *      helpers.clickHiddenElement('nav[role="navigation"] ul li a','Safety Boots');
+     */
+    clickHiddenElement: function(cssSelector, textToMatch) {
+
+        // method to execute within the DOM to find elements containing text
+        function clickElementInDom(query, content) {
+
+            // get the list of elements to inspect
+            var elements = document.querySelectorAll(query);
+
+            // workout which property to use to get inner text
+            var txtProp = ('textContent' in document) ? 'textContent' : 'innerText';
+
+            for (var i=0, l=elements.length; i<l; i++) {
+
+                // if we have content, only click items matching the content
+                if (content) {
+
+                    if (elements[i][txtProp] === content){
+                        elements[i].click();
+                    }
+                }
+                // otherwise click all
+                else {
+                    elements[i].click();
+                }
+            }
+        };
+
+        // grab matching elements
+        return driver.findElements(by.js(clickElementInDom, cssSelector, textToMatch));
     }
 
 };