fix(core): handle visible for height > innerHeight

ulixee · Jan 4, 2021 · b7a1e65 · b7a1e65
1 parent 7eb5132
commit b7a1e65
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 13 deletions.
diff --git a/core/test/tab.test.ts b/core/test/tab.test.ts
@@ -75,6 +75,54 @@ describe('basic Tab tests', () => {
     ).resolves.toBe(true);
   });
 
+  it('will wait for an element above the fold to be on screen', async () => {
+    koaServer.get('/testOnScreen', ctx => {
+      ctx.body = `<body>
+    <a id="waitToShow" href="/anywhere" style="display:block; position: absolute; top: -100px">Link</a>
+<script>
+    setTimeout(function() {
+      document.querySelector('a#waitToShow').style.top = 0;
+    }, 150);
+</script>
+</body>`;
+    });
+    const meta = await connection.createSession();
+    const tab = Session.getTab(meta);
+    Helpers.needsClosing.push(tab.session);
+    await tab.goto(`${koaServer.baseUrl}/testOnScreen`);
+
+    await expect(
+      tab.waitForElement(['document', ['querySelector', 'a#waitToShow']], {
+        waitForVisible: true,
+      }),
+    ).resolves.toBe(true);
+  });
+
+  it('will wait until an element off the bottom of the page', async () => {
+    koaServer.get('/testOffBottom', ctx => {
+      ctx.body = `<body>
+<div style="height: 2000px; position: relative">
+    <a id="waitToShow" href="/anywhere" style="position: relative; top: 1990px">Link</a>
+ </div>
+<script>
+    setTimeout(function() {
+      document.querySelector('a#waitToShow').scrollIntoView({ behavior: 'smooth'})
+    }, 150);
+</script>
+</body>`;
+    });
+    const meta = await connection.createSession();
+    const tab = Session.getTab(meta);
+    Helpers.needsClosing.push(tab.session);
+    await tab.goto(`${koaServer.baseUrl}/testOffBottom`);
+
+    await expect(
+      tab.waitForElement(['document', ['querySelector', 'a#waitToShow']], {
+        waitForVisible: true,
+      }),
+    ).resolves.toBe(true);
+  });
+
   it('can wait for another tab', async () => {
     let userAgentString1: string;
     let userAgentString2: string;

diff --git a/injected-scripts/scripts/jsPath.ts b/injected-scripts/scripts/jsPath.ts
@@ -201,9 +201,11 @@ class JsPath {
           // eslint-disable-next-line promise/param-names
           await new Promise(resolve1 => setTimeout(resolve1, 20));
         }
+
         resolve(<IExecJsPathResult>{
           attachedState: objectAtPath.extractAttachedState(),
           overlappingElementId: objectAtPath.overlappingElementId,
+          ...objectAtPath.visibilityParts,
           value: false,
         });
       });
@@ -296,25 +298,37 @@ class ObjectAtPath {
 
   public get isVisible() {
     const element = this.closestElement;
+    if (element) {
+      const { isHiddenStyle, onScreen, hasDimensions, isBehindOtherElement } = this.visibilityParts;
+
+      const isOnScreen = onScreen.vertical && onScreen.horizontal;
+      const isVisible = !isHiddenStyle && !isBehindOtherElement && hasDimensions && isOnScreen;
+
+      return isVisible;
+    }
+    return false;
+  }
+
+  public get visibilityParts() {
+    const element = this.closestElement;
+    const visibility: any = {
+      hasElement: !!element,
+    };
     if (element) {
       const style = getComputedStyle(element);
-      if (style?.visibility === 'hidden' || style?.display === 'none' || style?.opacity === '0') {
-        return false;
-      }
+      visibility.isHiddenStyle =
+        style?.visibility === 'hidden' || style?.display === 'none' || style?.opacity === '0';
 
-      if (this.isBehindOtherElement) return false;
+      visibility.isBehindOtherElement = this.isBehindOtherElement;
 
       const rect = this.boundingClientRect;
-      const hasDimensions = rect.width && rect.height;
-      if (!hasDimensions) return false;
-      return (
-        rect.top > 0 &&
-        rect.bottom < window.innerHeight &&
-        rect.left > 0 &&
-        rect.right < window.innerWidth
-      );
+      visibility.hasDimensions = rect.width && rect.height;
+      visibility.onScreen = {
+        vertical: rect.top + rect.height > 0 && rect.top < window.innerHeight,
+        horizontal: rect.left + rect.width > 0 && rect.left < window.innerWidth,
+      };
     }
-    return false;
+    return visibility;
   }
 
   public get overlappingElement() {