From 21f6811cd7a7d69debd87a46f380a34ff4f4f016 Mon Sep 17 00:00:00 2001
From: rdruzhinin <r.druzhinin@tinkoff.ru>
Date: Wed, 11 Mar 2020 20:35:43 +0700
Subject: [PATCH 1/5] fix: change overlapping logic

---
 lib/helper/scripts/isElementClickable.js | 71 +++++++++++++++++++-----
 package.json                             |  1 +
 2 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/lib/helper/scripts/isElementClickable.js b/lib/helper/scripts/isElementClickable.js
index 49e5d3f44..e63442f89 100644
--- a/lib/helper/scripts/isElementClickable.js
+++ b/lib/helper/scripts/isElementClickable.js
@@ -1,24 +1,67 @@
-function isElementClickable(elem) {
-  if (!elem.getBoundingClientRect || !elem.scrollIntoView || !document.elementFromPoint) {
+const flatten = require('lodash.flatten');
+
+function isElementClickable(element) {
+  if (!element.getBoundingClientRect || !element.scrollIntoView || !element.contains || !element.getClientRects || !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, context = document) => {
+    const elemDimension = elem.getBoundingClientRect();
+    const x = elemDimension.left + (elem.clientWidth / 2);
+    const y = elemDimension.top + (elem.clientHeight / 2);
+
+    return context.elementFromPoint(x, y);
+  };
+
+  const getOverlappingRects = (element, context = document) => {
+    const rects = element.getClientRects();
+    const rect = rects[0];
+    const x = rect.left + (rect.width / 2);
+    const y = rect.top + (rect.height / 2);
+
+    return context.elementFromPoint(x, y);
   };
 
-  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 getOverlappingElements = (element, context) => {
+    return [getOverlappingElement(element, context), getOverlappingRects(element, context)];
+  };
+
+  const isOverlappingElementMatch = (elementsFromPoint, elem) => {
+    if (elementsFromPoint.some(elementFromPoint => elementFromPoint === elem || elem.contains(elementFromPoint))) {
+      return true;
+    }
+
+    let elementsWithShadowRoot = [...new Set(elementsFromPoint)];
+    elementsWithShadowRoot = elementsWithShadowRoot.filter(elem => elem && elem.shadowRoot && elem.shadowRoot.elementFromPoint);
+
+    let shadowElementsFromPoint = elementsWithShadowRoot.map(shadowElement => flatten(getOverlappingElements(elem, shadowElement.shadowRoot)));
+    shadowElementsFromPoint = [...new Set(shadowElementsFromPoint)];
+    shadowElementsFromPoint = shadowElementsFromPoint.filter(element => !elementsFromPoint.includes(element));
+
+    if (shadowElementsFromPoint.length === 0) {
+      return false;
+    }
+
+    return isOverlappingElementMatch(shadowElementsFromPoint, elem);
+  };
+
+  const isElementInViewport = (element) => {
+    if (!element.getBoundingClientRect) {
+      return false;
+    }
+
+    const rect = element.getBoundingClientRect();
+
+    const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
+    const windowWidth = (window.innerWidth || document.documentElement.clientWidth);
+
+    const vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) > 0);
+    const horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) > 0);
+
+    return (vertInView && horInView);
   };
 
-  const isClickable = elem => elem.disabled !== true && isElementInViewport(elem) && getOverlappingElement(elem) === elem;
-  return isClickable(elem);
+  return isElementInViewport(element) && element.disabled !== true && isOverlappingElementMatch(getOverlappingElements(element), element);
 }
 
 module.exports = isElementClickable;
diff --git a/package.json b/package.json
index bb3c725f9..9c6402df4 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "inquirer": "^6.5.2",
     "js-beautify": "^1.10.2",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.flatten": "^4.4.0",
     "lodash.merge": "^4.6.2",
     "mkdirp": "^0.5.1",
     "mocha": "^6.2.2",

From e7a182265386308c7ef71b117721eb731d610d16 Mon Sep 17 00:00:00 2001
From: rdruzhinin <r.druzhinin@tinkoff.ru>
Date: Thu, 12 Mar 2020 11:45:55 +0700
Subject: [PATCH 2/5] test: added tests

---
 .../data/app/view/form/wait_for_clickable.php | 16 ++++
 test/helper/Puppeteer_test.js                 | 16 ++++
 test/helper/WebDriverIO_test.js               | 91 +++++++++++++++++++
 3 files changed, 123 insertions(+)

diff --git a/test/data/app/view/form/wait_for_clickable.php b/test/data/app/view/form/wait_for_clickable.php
index 4ca55095a..1ae830fce 100644
--- a/test/data/app/view/form/wait_for_clickable.php
+++ b/test/data/app/view/form/wait_for_clickable.php
@@ -1,4 +1,12 @@
 <html>
+<head>
+<script>
+ function setTimeout(() => {
+  const button = document.getElementById('publish_button');
+  button.removeAttribute('disabled');
+ }, 100)
+</script>
+</head>
 <body>
 <style>
 #notInViewportTop {
@@ -30,5 +38,13 @@
   <button id="div2_button" type="button" name="button1" value="first">Second Button</button>
 </div>
 
+<div id="save_button" style="position:absolute; top:300; left:0;">
+  <button id="div2_button" type="button" name="button_save" value="first" onclick="setTimeout()">SAVE</button>
+</div>
+
+<div id="publish_button" style="position:absolute; top:400; left:0;">
+  <button id="div2_button" type="button" name="button_publish" value="first">PUBLISH</button>
+</div>
+
 </body>
 </html>
diff --git a/test/helper/Puppeteer_test.js b/test/helper/Puppeteer_test.js
index 9f1f29aec..9e61d9980 100644
--- a/test/helper/Puppeteer_test.js
+++ b/test/helper/Puppeteer_test.js
@@ -921,6 +921,22 @@ describe('Puppeteer', function () {
         e.message.should.include('element {css: #div1_button} still not clickable after 0.1 sec');
       });
     });
+
+    it('should pass if element change class', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.click('button_save');
+      await I.waitForClickable('//button[@name="button_publish"]');
+    });
+
+    it('should fail if element change class and not clickable', async () => {
+      await I.amOnPage('/form/wait_for_clickable');
+      await I.click('button_save');
+      I.waitForClickable('//button[@name="button_publish"]', 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element //button[@name="button_publish"] still not clickable after 0.1 sec');
+      });
+    });
   });
 });
 
diff --git a/test/helper/WebDriverIO_test.js b/test/helper/WebDriverIO_test.js
index 7aedfb940..4877ad85d 100644
--- a/test/helper/WebDriverIO_test.js
+++ b/test/helper/WebDriverIO_test.js
@@ -624,4 +624,95 @@ describe('WebDriverIO', function () {
       .then(() => wd.see('Information', 'h1'))
       .then(() => wd.dontSee('Iframe test', 'h1')));
   });
+  describe('#waitForClickable', () => {
+    it('should wait for clickable', async () => {
+      await wb.amOnPage('/form/wait_for_clickable');
+      await wb.waitForClickable({ css: 'input#text' });
+    });
+
+    it('should wait for clickable by XPath', async () => {
+      await wb.amOnPage('/form/wait_for_clickable');
+      await wb.waitForClickable({ xpath: './/input[@id="text"]' });
+    });
+
+    it('should fail for disabled element', async () => {
+      await wb.amOnPage('/form/wait_for_clickable');
+      await wb.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 wb.amOnPage('/form/wait_for_clickable');
+      await wb.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 wb.amOnPage('/form/wait_for_clickable');
+      await wb.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 wb.amOnPage('/form/wait_for_clickable');
+      await wb.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 wb.amOnPage('/form/wait_for_clickable');
+      await wb.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 wb.amOnPage('/form/wait_for_clickable');
+      await wb.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 wb.amOnPage('/form/wait_for_clickable');
+      await wb.waitForClickable({ css: '#div2_button' }, 0.1);
+      await wb.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');
+      });
+    });
+
+    it('should pass if element change class', async () => {
+      await wb.amOnPage('/form/wait_for_clickable');
+      await wb.click('button_save');
+      await wb.waitForClickable('//button[@name="button_publish"]');
+    });
+
+    it('should fail if element change class and not clickable', async () => {
+      await wb.amOnPage('/form/wait_for_clickable');
+      await wb.click('button_save');
+      wb.waitForClickable('//button[@name="button_publish"]', 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element //button[@name="button_publish"] still not clickable after 0.1 sec');
+      });
+    });
+  });
 });

From 74e158b7d3d9c752d277b1085767f507e735aec3 Mon Sep 17 00:00:00 2001
From: rdruzhinin <r.druzhinin@tinkoff.ru>
Date: Thu, 12 Mar 2020 12:05:52 +0700
Subject: [PATCH 3/5] refactor: remove lodash.flatten, change map to for of

---
 lib/helper/scripts/isElementClickable.js |  13 +-
 package.json                             |   1 -
 test/helper/WebDriverIO_test.js          | 184 +++++++++++------------
 3 files changed, 97 insertions(+), 101 deletions(-)

diff --git a/lib/helper/scripts/isElementClickable.js b/lib/helper/scripts/isElementClickable.js
index e63442f89..f514b3e95 100644
--- a/lib/helper/scripts/isElementClickable.js
+++ b/lib/helper/scripts/isElementClickable.js
@@ -1,5 +1,3 @@
-const flatten = require('lodash.flatten');
-
 function isElementClickable(element) {
   if (!element.getBoundingClientRect || !element.scrollIntoView || !element.contains || !element.getClientRects || !document.elementFromPoint) {
     return false;
@@ -34,7 +32,10 @@ function isElementClickable(element) {
     let elementsWithShadowRoot = [...new Set(elementsFromPoint)];
     elementsWithShadowRoot = elementsWithShadowRoot.filter(elem => elem && elem.shadowRoot && elem.shadowRoot.elementFromPoint);
 
-    let shadowElementsFromPoint = elementsWithShadowRoot.map(shadowElement => flatten(getOverlappingElements(elem, shadowElement.shadowRoot)));
+    let shadowElementsFromPoint = [];
+    for (const shadowElement of elementsWithShadowRoot) {
+      shadowElementsFromPoint.push(...getOverlappingElements(elem, shadowElement.shadowRoot));
+    }
     shadowElementsFromPoint = [...new Set(shadowElementsFromPoint)];
     shadowElementsFromPoint = shadowElementsFromPoint.filter(element => !elementsFromPoint.includes(element));
 
@@ -46,10 +47,6 @@ function isElementClickable(element) {
   };
 
   const isElementInViewport = (element) => {
-    if (!element.getBoundingClientRect) {
-      return false;
-    }
-
     const rect = element.getBoundingClientRect();
 
     const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
@@ -61,7 +58,7 @@ function isElementClickable(element) {
     return (vertInView && horInView);
   };
 
-  return isElementInViewport(element) && element.disabled !== true && isOverlappingElementMatch(getOverlappingElements(element), element);
+  return element.disabled !== true && isElementInViewport(element) && isOverlappingElementMatch(getOverlappingElements(element), element);
 }
 
 module.exports = isElementClickable;
diff --git a/package.json b/package.json
index 9c6402df4..bb3c725f9 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,6 @@
     "inquirer": "^6.5.2",
     "js-beautify": "^1.10.2",
     "lodash.clonedeep": "^4.5.0",
-    "lodash.flatten": "^4.4.0",
     "lodash.merge": "^4.6.2",
     "mkdirp": "^0.5.1",
     "mocha": "^6.2.2",
diff --git a/test/helper/WebDriverIO_test.js b/test/helper/WebDriverIO_test.js
index 4877ad85d..631691da2 100644
--- a/test/helper/WebDriverIO_test.js
+++ b/test/helper/WebDriverIO_test.js
@@ -7,7 +7,6 @@ const WebDriverIO = require('../../lib/helper/WebDriverIO');
 
 let wd;
 const siteUrl = TestHelper.siteUrl();
-const fileExists = require('../../lib/utils').fileExists;
 const AssertionFailedError = require('../../lib/assert/error');
 const webApiTests = require('./webapi');
 
@@ -145,6 +144,98 @@ describe('WebDriverIO', 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 {css: #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');
+      });
+    });
+
+    it('should pass if element change class', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.click('button_save');
+      await wd.waitForClickable('//button[@name="button_publish"]');
+    });
+
+    it('should fail if element change class and not clickable', async () => {
+      await wd.amOnPage('/form/wait_for_clickable');
+      await wd.click('button_save');
+      wd.waitForClickable('//button[@name="button_publish"]', 0.1).then((isClickable) => {
+        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
+      }).catch((e) => {
+        e.message.should.include('element //button[@name="button_publish"] still not clickable after 0.1 sec');
+      });
+    });
+  });
+
   describe('#seeInSource, #grabSource', () => {
     it('should check for text to be in HTML source', () => wd.amOnPage('/')
       .then(() => wd.seeInSource('<title>TestEd Beta 2.0</title>'))
@@ -624,95 +715,4 @@ describe('WebDriverIO', function () {
       .then(() => wd.see('Information', 'h1'))
       .then(() => wd.dontSee('Iframe test', 'h1')));
   });
-  describe('#waitForClickable', () => {
-    it('should wait for clickable', async () => {
-      await wb.amOnPage('/form/wait_for_clickable');
-      await wb.waitForClickable({ css: 'input#text' });
-    });
-
-    it('should wait for clickable by XPath', async () => {
-      await wb.amOnPage('/form/wait_for_clickable');
-      await wb.waitForClickable({ xpath: './/input[@id="text"]' });
-    });
-
-    it('should fail for disabled element', async () => {
-      await wb.amOnPage('/form/wait_for_clickable');
-      await wb.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 wb.amOnPage('/form/wait_for_clickable');
-      await wb.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 wb.amOnPage('/form/wait_for_clickable');
-      await wb.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 wb.amOnPage('/form/wait_for_clickable');
-      await wb.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 wb.amOnPage('/form/wait_for_clickable');
-      await wb.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 wb.amOnPage('/form/wait_for_clickable');
-      await wb.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 wb.amOnPage('/form/wait_for_clickable');
-      await wb.waitForClickable({ css: '#div2_button' }, 0.1);
-      await wb.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');
-      });
-    });
-
-    it('should pass if element change class', async () => {
-      await wb.amOnPage('/form/wait_for_clickable');
-      await wb.click('button_save');
-      await wb.waitForClickable('//button[@name="button_publish"]');
-    });
-
-    it('should fail if element change class and not clickable', async () => {
-      await wb.amOnPage('/form/wait_for_clickable');
-      await wb.click('button_save');
-      wb.waitForClickable('//button[@name="button_publish"]', 0.1).then((isClickable) => {
-        if (isClickable) throw new Error('Element is clickable, but must be unclickable');
-      }).catch((e) => {
-        e.message.should.include('element //button[@name="button_publish"] still not clickable after 0.1 sec');
-      });
-    });
-  });
 });

From 41785dab373dcd6d11cb38fa258fa02843c67ddc Mon Sep 17 00:00:00 2001
From: rdruzhinin <r.druzhinin@tinkoff.ru>
Date: Thu, 12 Mar 2020 19:09:13 +0700
Subject: [PATCH 4/5] fix: fix data for tests

---
 test/data/app/view/form/wait_for_clickable.php | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/test/data/app/view/form/wait_for_clickable.php b/test/data/app/view/form/wait_for_clickable.php
index 1ae830fce..a22d16b78 100644
--- a/test/data/app/view/form/wait_for_clickable.php
+++ b/test/data/app/view/form/wait_for_clickable.php
@@ -1,10 +1,13 @@
 <html>
 <head>
 <script>
- function setTimeout(() => {
-  const button = document.getElementById('publish_button');
-  button.removeAttribute('disabled');
- }, 100)
+ function delay() {
+  setTimeout(() => {
+      const button = document.getElementById('publish_button');
+      button.removeAttribute('disabled');
+      button.classList.add('ooops');
+      }, 500);
+ }
 </script>
 </head>
 <body>
@@ -39,11 +42,11 @@ function setTimeout(() => {
 </div>
 
 <div id="save_button" style="position:absolute; top:300; left:0;">
-  <button id="div2_button" type="button" name="button_save" value="first" onclick="setTimeout()">SAVE</button>
+  <button id="div2_button" type="button" name="button_save" value="first" onclick="delay()">SAVE</button>
 </div>
 
-<div id="publish_button" style="position:absolute; top:400; left:0;">
-  <button id="div2_button" type="button" name="button_publish" value="first">PUBLISH</button>
+<div id="some" style="position:absolute; top:400; left:0;">
+  <button class="some" id="publish_button" type="button" name="button_publish" disabled value="first">PUBLISH</button>
 </div>
 
 </body>

From bf34a04d257f89d05c8743b3224a832cda12b8d8 Mon Sep 17 00:00:00 2001
From: rdruzhinin <r.druzhinin@tinkoff.ru>
Date: Fri, 20 Mar 2020 17:33:39 +0700
Subject: [PATCH 5/5] fix: rename variable elem -> element

---
 lib/helper/scripts/isElementClickable.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/helper/scripts/isElementClickable.js b/lib/helper/scripts/isElementClickable.js
index f514b3e95..811f9da1f 100644
--- a/lib/helper/scripts/isElementClickable.js
+++ b/lib/helper/scripts/isElementClickable.js
@@ -3,10 +3,10 @@ function isElementClickable(element) {
     return false;
   }
 
-  const getOverlappingElement = (elem, context = document) => {
-    const elemDimension = elem.getBoundingClientRect();
-    const x = elemDimension.left + (elem.clientWidth / 2);
-    const y = elemDimension.top + (elem.clientHeight / 2);
+  const getOverlappingElement = (element, context = document) => {
+    const elemDimension = element.getBoundingClientRect();
+    const x = elemDimension.left + (element.clientWidth / 2);
+    const y = elemDimension.top + (element.clientHeight / 2);
 
     return context.elementFromPoint(x, y);
   };
@@ -24,8 +24,8 @@ function isElementClickable(element) {
     return [getOverlappingElement(element, context), getOverlappingRects(element, context)];
   };
 
-  const isOverlappingElementMatch = (elementsFromPoint, elem) => {
-    if (elementsFromPoint.some(elementFromPoint => elementFromPoint === elem || elem.contains(elementFromPoint))) {
+  const isOverlappingElementMatch = (elementsFromPoint, element) => {
+    if (elementsFromPoint.some(elementFromPoint => elementFromPoint === element || element.contains(elementFromPoint))) {
       return true;
     }
 
@@ -34,7 +34,7 @@ function isElementClickable(element) {
 
     let shadowElementsFromPoint = [];
     for (const shadowElement of elementsWithShadowRoot) {
-      shadowElementsFromPoint.push(...getOverlappingElements(elem, shadowElement.shadowRoot));
+      shadowElementsFromPoint.push(...getOverlappingElements(element, shadowElement.shadowRoot));
     }
     shadowElementsFromPoint = [...new Set(shadowElementsFromPoint)];
     shadowElementsFromPoint = shadowElementsFromPoint.filter(element => !elementsFromPoint.includes(element));
@@ -43,7 +43,7 @@ function isElementClickable(element) {
       return false;
     }
 
-    return isOverlappingElementMatch(shadowElementsFromPoint, elem);
+    return isOverlappingElementMatch(shadowElementsFromPoint, element);
   };
 
   const isElementInViewport = (element) => {