Added new feature waitForTextToAppear (#6)

mohithg · Aug 22, 2018 · 2dee6ae · 2dee6ae
1 parent ff7539e
commit 2dee6ae
Show file tree

Hide file tree

Showing 6 changed files with 232 additions and 18 deletions.
diff --git a/build/helpers.js b/build/helpers.js
@@ -79,13 +79,32 @@ var click = exports.click = function click(selector) {
  * @param {string} selector - The Selector element.
  */
 var waitForVisible = exports.waitForVisible = function waitForVisible(selector) {
-  browser.waitForExist(selector);
-  browser.scroll(selector);
+  wait(selector);
   browser.waitUntil(function () {
     return $(selector).isVisible();
   }, 100000, 'Selector is not visible');
 };
 
+/**
+ * @function waitForTextToAppear
+ * @desc Accepts selector and the text of the selector to wait for the element with that text to appear in the DOM and scroll the page to that element in the screen
+ * and waits until the selector with text is visible
+ * @param {string} selector - The Selector element.
+ * @param {string} textToSearch - Text to search in the selectors.
+ */
+var waitForTextToAppear = function waitForTextToAppear(selector, textToSearch) {
+  wait(selector);
+  var group = $$(selector);
+  browser.waitUntil(function () {
+    for (var i = 0; i < group.length; i++) {
+      var element = group[i];
+      if (element.getText().includes(textToSearch)) {
+        return true;
+      }
+    }
+  }, 100000, selector + ' with ' + textToSearch + ' is not visible');
+};
+
 /**
  * @function clickWithText
  * @desc finds the selector with text and clicks and if there are multiple elememts with the same text, it will click based on the index. Note that it waits until selector appears in the DOM.

diff --git a/docs/global.html b/docs/global.html
@@ -22,7 +22,7 @@
 <label for="nav-trigger" class="overlay"></label>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#click">click</a></li><li><a href="global.html#clickWithText">clickWithText</a></li><li><a href="global.html#findElementFromGroupWithText()">findElementFromGroupWithText()</a></li><li><a href="global.html#load">load</a></li><li><a href="global.html#logConsoleOutputtype">logConsoleOutput</a></li><li><a href="global.html#setValue">setValue</a></li><li><a href="global.html#wait">wait</a></li><li><a href="global.html#waitForElementToGo">waitForElementToGo</a></li><li><a href="global.html#waitForUrl">waitForUrl</a></li><li><a href="global.html#waitForVisible">waitForVisible</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#click">click</a></li><li><a href="global.html#clickWithText">clickWithText</a></li><li><a href="global.html#findElementFromGroupWithText()">findElementFromGroupWithText()</a></li><li><a href="global.html#load">load</a></li><li><a href="global.html#logConsoleOutputtype">logConsoleOutput</a></li><li><a href="global.html#setValue">setValue</a></li><li><a href="global.html#wait">wait</a></li><li><a href="global.html#waitForElementToGo">waitForElementToGo</a></li><li><a href="global.html#waitForTextToAppear">waitForTextToAppear</a></li><li><a href="global.html#waitForUrl">waitForUrl</a></li><li><a href="global.html#waitForVisible">waitForVisible</a></li></ul>
 </nav>
 
 <div id="main">
@@ -384,7 +384,7 @@ <h4 class="name" id="clickWithText"><span class="type-signature"></span>clickWit
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line76">line 76</a>
+        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line95">line 95</a>
     </li></ul></dd>
 
 
@@ -607,7 +607,7 @@ <h4 class="name" id="findElementFromGroupWithText()"><span class="type-signature
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line122">line 122</a>
+        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line141">line 141</a>
     </li></ul></dd>
 
 
@@ -985,7 +985,7 @@ <h4 class="name" id="logConsoleOutputtype"><span class="type-signature"></span>l
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line146">line 146</a>
+        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line165">line 165</a>
     </li></ul></dd>
 
 
@@ -1140,7 +1140,7 @@ <h4 class="name" id="setValue"><span class="type-signature"></span>setValue<span
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line92">line 92</a>
+        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line111">line 111</a>
     </li></ul></dd>
 
 
@@ -1500,7 +1500,7 @@ <h4 class="name" id="waitForElementToGo"><span class="type-signature"></span>wai
 
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line105">line 105</a>
+        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line124">line 124</a>
     </li></ul></dd>
 
 
@@ -1675,6 +1675,163 @@ <h5>Parameters:</h5>
 
 
 
+
+    <h4 class="name" id="waitForTextToAppear"><span class="type-signature"></span>waitForTextToAppear<span class="signature">(selector, textToSearch)</span><span class="type-signature"></span></h4>
+
+
+
+
+
+
+<dl class="details">
+
+
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="helpers.js.html">helpers.js</a>, <a href="helpers.js.html#line75">line 75</a>
+    </li></ul></dd>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</dl>
+
+
+
+
+
+<div class="description">
+    Accepts selector and the text of the selector to wait for the element with that text to appear in the DOM and scroll the page to that element in the screen
+and waits until the selector with text is visible
+</div>
+
+
+
+
+
+
+
+
+
+
+
+    <h5>Parameters:</h5>
+
+
+<table class="params">
+    <thead>
+    <tr>
+
+        <th>Name</th>
+
+
+        <th>Type</th>
+
+
+
+
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+
+
+        <tr>
+
+                <td class="name"><code>selector</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+            </td>
+
+
+
+
+
+            <td class="description last">The Selector element.</td>
+        </tr>
+
+
+
+        <tr>
+
+                <td class="name"><code>textToSearch</code></td>
+
+
+            <td class="type">
+
+
+<span class="param-type">string</span>
+
+
+
+            </td>
+
+
+
+
+
+            <td class="description last">Text to search in the selectors.</td>
+        </tr>
+
+
+    </tbody>
+</table>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
     <h4 class="name" id="waitForUrl"><span class="type-signature"></span>waitForUrl<span class="signature">(url)</span><span class="type-signature"></span></h4>
 
@@ -1956,7 +2113,7 @@ <h5>Parameters:</h5>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Aug 21 2018 16:29:37 GMT+0530 (IST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Aug 22 2018 12:16:35 GMT+0530 (IST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

diff --git a/docs/helpers.js.html b/docs/helpers.js.html
@@ -22,7 +22,7 @@
 <label for="nav-trigger" class="overlay"></label>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#click">click</a></li><li><a href="global.html#clickWithText">clickWithText</a></li><li><a href="global.html#findElementFromGroupWithText()">findElementFromGroupWithText()</a></li><li><a href="global.html#load">load</a></li><li><a href="global.html#logConsoleOutputtype">logConsoleOutput</a></li><li><a href="global.html#setValue">setValue</a></li><li><a href="global.html#wait">wait</a></li><li><a href="global.html#waitForElementToGo">waitForElementToGo</a></li><li><a href="global.html#waitForUrl">waitForUrl</a></li><li><a href="global.html#waitForVisible">waitForVisible</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#click">click</a></li><li><a href="global.html#clickWithText">clickWithText</a></li><li><a href="global.html#findElementFromGroupWithText()">findElementFromGroupWithText()</a></li><li><a href="global.html#load">load</a></li><li><a href="global.html#logConsoleOutputtype">logConsoleOutput</a></li><li><a href="global.html#setValue">setValue</a></li><li><a href="global.html#wait">wait</a></li><li><a href="global.html#waitForElementToGo">waitForElementToGo</a></li><li><a href="global.html#waitForTextToAppear">waitForTextToAppear</a></li><li><a href="global.html#waitForUrl">waitForUrl</a></li><li><a href="global.html#waitForVisible">waitForVisible</a></li></ul>
 </nav>
 
 <div id="main">
@@ -105,13 +105,32 @@ <h1 class="page-title">helpers.js</h1>
  * @param {string} selector - The Selector element.
  */
 export const waitForVisible = (selector) => {
-  browser.waitForExist(selector);
-  browser.scroll(selector);
+  wait(selector);
   browser.waitUntil(function() {
     return $(selector).isVisible();
   }, 100000, 'Selector is not visible');
 };
 
+/**
+ * @function waitForTextToAppear
+ * @desc Accepts selector and the text of the selector to wait for the element with that text to appear in the DOM and scroll the page to that element in the screen
+ * and waits until the selector with text is visible
+ * @param {string} selector - The Selector element.
+ * @param {string} textToSearch - Text to search in the selectors.
+ */
+const waitForTextToAppear = (selector, textToSearch) => {
+  wait(selector);
+  const group = $$(selector);
+  browser.waitUntil(function() {
+    for (let i = 0; i &lt; group.length; i++) {
+      const element = group[i];
+      if (element.getText().includes(textToSearch)) {
+        return true;
+      }
+    }
+  }, 100000, `${selector} with ${textToSearch} is not visible`);
+};
+
 /**
  * @function clickWithText
  * @desc finds the selector with text and clicks and if there are multiple elememts with the same text, it will click based on the index. Note that it waits until selector appears in the DOM.
@@ -221,7 +240,7 @@ <h1 class="page-title">helpers.js</h1>
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Aug 21 2018 16:29:37 GMT+0530 (IST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Aug 22 2018 12:16:35 GMT+0530 (IST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

diff --git a/docs/index.html b/docs/index.html
@@ -22,7 +22,7 @@
 <label for="nav-trigger" class="overlay"></label>
 
 <nav>
-    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#click">click</a></li><li><a href="global.html#clickWithText">clickWithText</a></li><li><a href="global.html#findElementFromGroupWithText()">findElementFromGroupWithText()</a></li><li><a href="global.html#load">load</a></li><li><a href="global.html#logConsoleOutputtype">logConsoleOutput</a></li><li><a href="global.html#setValue">setValue</a></li><li><a href="global.html#wait">wait</a></li><li><a href="global.html#waitForElementToGo">waitForElementToGo</a></li><li><a href="global.html#waitForUrl">waitForUrl</a></li><li><a href="global.html#waitForVisible">waitForVisible</a></li></ul>
+    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#click">click</a></li><li><a href="global.html#clickWithText">clickWithText</a></li><li><a href="global.html#findElementFromGroupWithText()">findElementFromGroupWithText()</a></li><li><a href="global.html#load">load</a></li><li><a href="global.html#logConsoleOutputtype">logConsoleOutput</a></li><li><a href="global.html#setValue">setValue</a></li><li><a href="global.html#wait">wait</a></li><li><a href="global.html#waitForElementToGo">waitForElementToGo</a></li><li><a href="global.html#waitForTextToAppear">waitForTextToAppear</a></li><li><a href="global.html#waitForUrl">waitForUrl</a></li><li><a href="global.html#waitForVisible">waitForVisible</a></li></ul>
 </nav>
 
 <div id="main">
@@ -85,7 +85,7 @@ <h2>Contributions</h2><p>There are lot of helpers to be written. Feel free to co
 <br class="clear">
 
 <footer>
-    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Tue Aug 21 2018 16:29:37 GMT+0530 (IST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Aug 22 2018 12:16:35 GMT+0530 (IST) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
 </footer>
 
 <script>prettyPrint();</script>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wdio-helpers",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Webdriver IO helper functions",
   "main": "build/helpers.js",
   "scripts": {

diff --git a/src/helpers.js b/src/helpers.js
@@ -66,13 +66,32 @@ export const click = (selector, index = 0) => {
  * @param {string} selector - The Selector element.
  */
 export const waitForVisible = (selector) => {
-  browser.waitForExist(selector);
-  browser.scroll(selector);
+  wait(selector);
   browser.waitUntil(function() {
     return $(selector).isVisible();
   }, 100000, 'Selector is not visible');
 };
 
+/**
+ * @function waitForTextToAppear
+ * @desc Accepts selector and the text of the selector to wait for the element with that text to appear in the DOM and scroll the page to that element in the screen
+ * and waits until the selector with text is visible
+ * @param {string} selector - The Selector element.
+ * @param {string} textToSearch - Text to search in the selectors.
+ */
+const waitForTextToAppear = (selector, textToSearch) => {
+  wait(selector);
+  const group = $$(selector);
+  browser.waitUntil(function() {
+    for (let i = 0; i < group.length; i++) {
+      const element = group[i];
+      if (element.getText().includes(textToSearch)) {
+        return true;
+      }
+    }
+  }, 100000, `${selector} with ${textToSearch} is not visible`);
+};
+
 /**
  * @function clickWithText
  * @desc finds the selector with text and clicks and if there are multiple elememts with the same text, it will click based on the index. Note that it waits until selector appears in the DOM.