improvement: filter element is not visible

Author: smildlzj

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/selenium-ide",
-  "version": "4.0.0-alpha.11",
+  "version": "4.0.0-alpha.12",
   "private": true,
   "description": "Selenium IDE electron app",
   "author": "Todd <[email protected]>",

packages/selenium-ide/src/browser/windows/PlaybackWindow/preload/locator-builders.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { parse_locator } from './utils'
+import { parse_locator, isVisible } from './utils'
 import finder from '@medv/finder'
 
 const findElement = require('./third-party/find-element')
@@ -58,6 +58,18 @@ export default class LocatorBuilders {
   buildAll(el: HTMLElement): [string, string][] {
     let locator
     let locators: [string, string][] = []
+
+    let root = document.body
+    let loopEl: HTMLElement | null = el
+    while (loopEl && loopEl != root) {
+      if (isVisible(loopEl)) {
+        el = loopEl
+        break
+      } else {
+        loopEl = loopEl.parentElement
+      }
+    }
+    
     for (let i = 0; i < LocatorBuilders.order.length; i++) {
       let finderName = LocatorBuilders.order[i]
       try {

packages/selenium-ide/src/browser/windows/PlaybackWindow/preload/utils.ts

@@ -51,3 +51,35 @@ export function getTagName(element: HTMLElement) {
   }
   return tagName
 }
+
+
+/**
+ * Return element is visible
+ *
+ * https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
+ * 
+ * @param element  an HTMLElement
+ */
+export function isVisible(elem: HTMLElement) {
+    const style = getComputedStyle(elem);
+    if (style.display === 'none') return false;
+    if (style.visibility !== 'visible') return false;
+    if (parseFloat(style.opacity) < 0.1) return false;
+    if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
+        elem.getBoundingClientRect().width === 0) {
+        return false;
+    }
+    const elemCenter   = {
+        x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
+        y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
+    };
+    if (elemCenter.x < 0) return false;
+    if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
+    if (elemCenter.y < 0) return false;
+    if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
+    let pointContainer: any = document.elementFromPoint(elemCenter.x, elemCenter.y);
+    do {
+        if (pointContainer === elem) return true;
+    } while ((pointContainer = pointContainer!.parentNode));
+    return false;
+}