add new method waitForClickable (#2022)

* add new method waitForClickable

* Fix comments

* Add waitForClickable for webdriver

* Fix comments

* fix Puppeteer tests

Author: Vorobeyko

Diff for: docs/helpers/Puppeteer.md

@@ -1684,6 +1684,24 @@ I.wait(2); // wait 2 secs
     
 
 
+### waitForClickable
+
+Waits for element to be clickable (by default waits for 1sec).
+Element can be located by CSS or XPath.
+
+```js
+I.waitForClickable('.btn.continue');
+I.waitForClickable('.btn.continue', 5); // wait for 5 secs
+```
+
+#### Parameters
+
+-   `locator` CodeceptJS.LocatorOrString element located by CSS|XPath|strict locator.
+-   `waitTimeout`  
+-   `sec` [number][9]? (optional, `1` by default) time in seconds to wait
+    
+
+
 ### waitForDetached
 
 Waits for an element to become not attached to the DOM on a page (by default waits for 1sec).

Diff for: docs/helpers/WebDriver.md

@@ -1836,6 +1836,24 @@ I.wait(2); // wait 2 secs
     
 
 
+### waitForClickable
+
+Waits for element to be clickable (by default waits for 1sec).
+Element can be located by CSS or XPath.
+
+```js
+I.waitForClickable('.btn.continue');
+I.waitForClickable('.btn.continue', 5); // wait for 5 secs
+```
+
+#### Parameters
+
+-   `locator` CodeceptJS.LocatorOrString element located by CSS|XPath|strict locator.
+-   `waitTimeout`  
+-   `sec` [number][22]? (optional, `1` by default) time in seconds to wait
+    
+
+
 ### waitForDetached
 
 Waits for an element to become not attached to the DOM on a page (by default waits for 1sec).

Diff for: docs/webapi/waitForClickable.mustache

@@ -0,0 +1,10 @@
+Waits for element to be clickable (by default waits for 1sec).
+Element can be located by CSS or XPath.
+
+```js
+I.waitForClickable('.btn.continue');
+I.waitForClickable('.btn.continue', 5); // wait for 5 secs
+```
+
+@param {CodeceptJS.LocatorOrString} locator element located by CSS|XPath|strict locator.
+@param {number} [sec] (optional, `1` by default) time in seconds to wait

Diff for: lib/helper/Puppeteer.js

@@ -7,6 +7,7 @@ const { urlEquals } = require('../assert/equal');
 const { equals } = require('../assert/equal');
 const { empty } = require('../assert/empty');
 const { truth } = require('../assert/truth');
+const isElementClickable = require('./scripts/isElementClickable');
 const {
   xpathLocator,
   ucfirst,
@@ -1694,6 +1695,22 @@ class Puppeteer extends Helper {
     });
   }
 
+  /**
+   * {{> waitForClickable }}
+   */
+  async waitForClickable(locator, waitTimeout) {
+    const els = await this._locate(locator);
+    assertElementExists(els, locator);
+
+    return this.waitForFunction(isElementClickable, [els[0]], waitTimeout).catch(async (e) => {
+      if (/failed: timeout/i.test(e.message)) {
+        throw new Error(`element ${new Locator(locator).toString()} still not clickable after ${waitTimeout || this.options.waitForTimeout / 1000} sec`);
+      } else {
+        throw e;
+      }
+    });
+  }
+
   /**
    * {{> waitForElement }}
    * {{ react }}

Diff for: lib/helper/WebDriver.js

@@ -1738,6 +1738,21 @@ class WebDriver extends Helper {
     }, aSec * 1000, `element (${locator}) still not present on page after ${aSec} sec`);
   }
 
+  /**
+   * {{> waitForClickable }}
+   */
+  async waitForClickable(locator, waitTimeout) {
+    waitTimeout = waitTimeout || this.options.waitForTimeout;
+    let res = await this._locate(locator);
+    res = usingFirstElement(res);
+    assertElementExists(res, locator);
+
+    return res.waitForClickable({
+      timeout: waitTimeout,
+      timeoutMsg: `element ${res.selector} still not clickable after ${waitTimeout} sec`,
+    });
+  }
+
   async waitUntilExists(locator, sec = null) {
     console.log(`waitUntilExists deprecated:
     * use 'waitForElement' to wait for element to be attached

Diff for: lib/helper/scripts/isElementClickable.js

@@ -0,0 +1,24 @@
+function isElementClickable(elem) {
+  if (!elem.getBoundingClientRect || !elem.scrollIntoView || !document.elementFromPoint) {
+    return false;
+  }
+
+  const isElementInViewport = (elem) => {
+    const rect = elem.getBoundingClientRect();
+    const verticleInView = (rect.top <= window.innerHeight) && ((rect.top + rect.height) > 0);
+    const horizontalInView = (rect.left <= window.innerWidth) && ((rect.left + rect.width) > 0);
+    return horizontalInView && verticleInView;
+  };
+
+  const getOverlappingElement = (elem) => {
+    const rect = elem.getBoundingClientRect();
+    const x = rect.left + (elem.clientWidth / 2);
+    const y = rect.top + (elem.clientHeight / 2);
+    return document.elementFromPoint(x, y);
+  };
+
+  const isClickable = elem => elem.disabled !== true && isElementInViewport(elem) && getOverlappingElement(elem) === elem;
+  return isClickable(elem);
+}
+
+module.exports = isElementClickable;

Diff for: package.json

@@ -106,7 +106,7 @@
     "tsd-jsdoc": "^2.3.0",
     "typescript": "^2.9.2",
     "wdio-docker-service": "^1.5.0",
-    "webdriverio": "^5.13.2",
+    "webdriverio": "^5.16.6",
     "xmldom": "^0.1.27",
     "xpath": "0.0.27"
   },

Diff for: test/data/app/view/form/wait_for_clickable.php

@@ -0,0 +1,34 @@
+<html>
+<body>
+<style>
+#notInViewportTop {
+  margin-top: -9999999px
+}
+#notInViewportBottom {
+  margin-bottom: -9999999px
+}
+#notInViewportLeft {
+  margin-left: -9999999px
+}
+#notInViewportRight {
+  margin-right: -9999999px
+}
+</style>
+<input id="text" type="text" name="test" value="some text">
+
+<button id="button" type="button" name="button1" disabled value="first">A Button</button>
+
+<div id="notInViewportTop">Div not in viewport by top</div>
+<div id="notInViewportBottom">Div not in viewport by bottom</div>
+<div id="notInViewportLeft">Div not in viewport by left</div>
+<div id="notInViewportRight">Div not in viewport by right</div>
+
+<div id="div1" style="position:absolute; top:100; left:0;">
+  <button id="div1_button" type="button" name="button1" value="first">First Button</button>
+</div>
+<div id="div2" style="position:absolute; top:100; left:0;">
+  <button id="div2_button" type="button" name="button1" value="first">Second Button</button>
+</div>
+
+</body>
+</html>

Diff for: test/helper/Puppeteer_test.js

@@ -1,15 +1,10 @@
 const TestHelper = require('../support/TestHelper');
 const Puppeteer = require('../../lib/helper/Puppeteer');
 const puppeteer = require('puppeteer');
-const should = require('chai').should();
 const expect = require('chai').expect;
 const assert = require('assert');
 const path = require('path');
-const fs = require('fs');
-const fileExists = require('../../lib/utils').fileExists;
 const AssertionFailedError = require('../../lib/assert/error');
-const formContents = require('../../lib/utils').test.submittedData(path.join(__dirname, '/../data/app/db'));
-const expectError = require('../../lib/utils').test.expectError;
 const webApiTests = require('./webapi');
 const FileSystem = require('../../lib/helper/FileSystem');
 
@@ -773,6 +768,82 @@ describe('Puppeteer', function () {
       await FS.seeFile('downloads/avatar.jpg');
     });
   });
+
+  describe('#waitForClickable', () => {
+    it('should wait for clickable', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.waitForClickable({ css: 'input#text' });
+    });
+
+    it('should wait for clickable by XPath', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.waitForClickable({ xpath: './/input[@id="text"]' });
+    });
+
+    it('should fail for disabled element', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.waitForClickable({ css: '#button' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element {css: #button} still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for disabled element by XPath', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.waitForClickable({ xpath: './/button[@id="button"]' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element {xpath: .//button[@id="button"]} still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for element not in viewport by top', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.waitForClickable({ css: '#notInViewportTop' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element {css: #notInViewportTop} still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for element not in viewport by bottom', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.waitForClickable({ css: '#notInViewportBottom' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element {css: #notInViewportBottom} still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for element not in viewport by left', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.waitForClickable({ css: '#notInViewportLeft' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element {css: #notInViewportLeft} still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for element not in viewport by right', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.waitForClickable({ css: '#notInViewportRight' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element {css: #notInViewportRight} still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for overlapping element', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.waitForClickable({ css: '#div2_button' }, 0.1);
+      await I.waitForClickable({ css: '#div1_button' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element {css: #div1_button} still not clickable after 0.1 sec');
+      });
+    });
+  });
 });
 
 let remoteBrowser;

Diff for: test/helper/WebDriver_test.js

@@ -1022,6 +1022,82 @@ describe('WebDriver', function () {
     });
   });
 
+  describe('#waitForClickable', () => {
+    it('should wait for clickable', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.waitForClickable({ css: 'input#text' });
+    });
+
+    it('should wait for clickable by XPath', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.waitForClickable({ xpath: './/input[@id="text"]' });
+    });
+
+    it('should fail for disabled element', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.waitForClickable({ css: '#button' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element #button still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for disabled element by XPath', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.waitForClickable({ xpath: './/button[@id="button"]' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element .//button[@id="button"] still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for element not in viewport by top', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.waitForClickable({ css: '#notInViewportTop' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element #notInViewportTop still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for element not in viewport by bottom', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.waitForClickable({ css: '#notInViewportBottom' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element #notInViewportBottom still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for element not in viewport by left', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.waitForClickable({ css: '#notInViewportLeft' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element #notInViewportLeft still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for element not in viewport by right', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.waitForClickable({ css: '#notInViewportRight' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element #notInViewportRight still not clickable after 0.1 sec');
+      });
+    });
+
+    it('should fail for overlapping element', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.waitForClickable({ css: '#div2_button' }, 0.1);
+      await wd.waitForClickable({ css: '#div1_button' }, 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element #div1_button still not clickable after 0.1 sec');
+      });
+    });
+  });
+
   describe('GeoLocation', () => {
     it('should set the geoLocation', async () => {
       await wd.setGeoLocation(37.4043, -122.0748);