feat(elementhandle): introduce elementHandle.isIntersectingViewport()…

… method. (#2673) This patch introduces `elementHandle.isIntersectingViewport()` method returns true if element is visible in the viewport. Fixes #2629.
puppeteer · Jul 12, 2018 · 96c558d · 96c558d
1 parent 4f8d00e
commit 96c558d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 0 deletions.
diff --git a/docs/api.md b/docs/api.md
@@ -220,6 +220,7 @@
   * [elementHandle.getProperties()](#elementhandlegetproperties)
   * [elementHandle.getProperty(propertyName)](#elementhandlegetpropertypropertyname)
   * [elementHandle.hover()](#elementhandlehover)
+  * [elementHandle.isIntersectingViewport()](#elementhandleisintersectingviewport)
   * [elementHandle.jsonValue()](#elementhandlejsonvalue)
   * [elementHandle.press(key[, options])](#elementhandlepresskey-options)
   * [elementHandle.screenshot([options])](#elementhandlescreenshotoptions)
@@ -2548,6 +2549,9 @@ Fetches a single property from the objectHandle.
 This method scrolls element into view if needed, and then uses [page.mouse](#pagemouse) to hover over the center of the element.
 If the element is detached from DOM, the method throws an error.
 
+#### elementHandle.isIntersectingViewport()
+- returns: <[Promise]<[boolean]>> Resolves to true if the element is visible in the current viewport.
+
 #### elementHandle.jsonValue()
 - returns: <[Promise]<[Object]>>
 

diff --git a/lib/ElementHandle.js b/lib/ElementHandle.js
@@ -354,6 +354,24 @@ class ElementHandle extends JSHandle {
     }
     return result;
   }
+
+  /**
+   * @returns {!Promise<boolean>}
+   */
+  isIntersectingViewport() {
+    return this.executionContext().evaluate(
+        node => new Promise(resolve => {
+          const callback = entries => {
+            resolve(entries[0].isIntersecting);
+            observer.disconnect();
+          };
+          const observer = new IntersectionObserver(callback);
+
+          observer.observe(node);
+        }),
+        this
+    );
+  }
 }
 
 function computeQuadArea(quad) {

diff --git a/test/elementhandle.spec.js b/test/elementhandle.spec.js
@@ -198,6 +198,55 @@ module.exports.addTests = function({testRunner, expect}) {
     });
   });
 
+  describe('ElementHandle.isVisible', function() {
+    it('should return false if element is not visible in viewport', async({page, server}) => {
+      await page.setViewport({ width: 1000, height: 400 });
+      await page.setContent(`
+        <html>
+          <head>
+            <style>
+              .scroll-container {
+                position: relative;
+                width: 600px;
+                background: green;
+                height: 150px;
+                overflow: hidden;
+              }
+              .red {
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 150px;
+                width: 150px;
+                background: red;
+              }
+              .blue {
+                position: absolute;
+                top: 0;
+                right: -160px;
+                height: 150px;
+                width: 150px;
+                background: blue;
+              }
+            </style>
+          </head>
+          <body>
+            <div class="scroll-container">
+                <div class="red"></div>
+                <div class="blue"></div>
+              </div>
+          </body>
+        </html>
+      `);
+
+      const box = await page.$('.red');
+      const blue = await page.$('.blue');
+
+      expect(await box.isIntersectingViewport()).toBe(true);
+      expect(await blue.isIntersectingViewport()).toBe(false);
+    });
+  });
+
   describe('ElementHandle.screenshot', function() {
     it('should work', async({page, server}) => {
       await page.setViewport({width: 500, height: 500});