feat: add ElementHandle.isVisible and ElementHandle.isHidden (#10007)

docs/api/puppeteer.elementhandle.ishidden.md

@@ -0,0 +1,19 @@
+---
+sidebar_label: ElementHandle.isHidden
+---
+
+# ElementHandle.isHidden() method
+
+Checks if an element is hidden using the same mechanism as [ElementHandle.waitForSelector()](./puppeteer.elementhandle.waitforselector.md).
+
+#### Signature:
+
+```typescript
+class ElementHandle {
+  isHidden(): Promise<boolean>;
+}
+```
+
+**Returns:**
+
+Promise&lt;boolean&gt;

docs/api/puppeteer.elementhandle.isvisible.md

@@ -0,0 +1,19 @@
+---
+sidebar_label: ElementHandle.isVisible
+---
+
+# ElementHandle.isVisible() method
+
+Checks if an element is visible using the same mechanism as [ElementHandle.waitForSelector()](./puppeteer.elementhandle.waitforselector.md).
+
+#### Signature:
+
+```typescript
+class ElementHandle {
+  isVisible(): Promise<boolean>;
+}
+```
+
+**Returns:**
+
+Promise&lt;boolean&gt;

docs/api/puppeteer.elementhandle.md

@@ -67,7 +67,9 @@ The constructor for this class is marked as internal. Third-party code should no
 | [drop(this, data)](./puppeteer.elementhandle.drop.md)                                        |           | This method triggers a drop on the element.                                                                                                                                                                                                                                                                                   |
 | [focus()](./puppeteer.elementhandle.focus.md)                                                |           | Calls [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus) on the element.                                                                                                                                                                                                                             |
 | [hover(this)](./puppeteer.elementhandle.hover.md)                                            |           | This method scrolls element into view if needed, and then uses [Page](./puppeteer.page.md) to hover over the center of the element. If the element is detached from DOM, the method throws an error.                                                                                                                          |
+| [isHidden()](./puppeteer.elementhandle.ishidden.md)                                          |           | Checks if an element is hidden using the same mechanism as [ElementHandle.waitForSelector()](./puppeteer.elementhandle.waitforselector.md).                                                                                                                                                                                   |
 | [isIntersectingViewport(this, options)](./puppeteer.elementhandle.isintersectingviewport.md) |           | Resolves to true if the element is visible in the current viewport. If an element is an SVG, we check if the svg owner element is in the viewport instead. See https://crbug.com/963246.                                                                                                                                      |
+| [isVisible()](./puppeteer.elementhandle.isvisible.md)                                        |           | Checks if an element is visible using the same mechanism as [ElementHandle.waitForSelector()](./puppeteer.elementhandle.waitforselector.md).                                                                                                                                                                                  |
 | [press(key, options)](./puppeteer.elementhandle.press.md)                                    |           | Focuses the element, and then uses [Keyboard.down()](./puppeteer.keyboard.down.md) and [Keyboard.up()](./puppeteer.keyboard.up.md).                                                                                                                                                                                           |
 | [screenshot(this, options)](./puppeteer.elementhandle.screenshot.md)                         |           | This method scrolls element into view if needed, and then uses [Page.screenshot()](./puppeteer.page.screenshot_2.md) to take a screenshot of the element. If the element is detached from DOM, the method throws an error.                                                                                                    |
 | [scrollIntoView(this)](./puppeteer.elementhandle.scrollintoview.md)                          |           | Scrolls the element into view using either the automation protocol client or by calling element.scrollIntoView.                                                                                                                                                                                                               |

packages/puppeteer-core/src/api/ElementHandle.ts

@@ -468,6 +468,22 @@ export class ElementHandle<
     throw new Error('Not implemented');
   }
 
+  /**
+   * Checks if an element is visible using the same mechanism as
+   * {@link ElementHandle.waitForSelector}.
+   */
+  async isVisible(): Promise<boolean> {
+    throw new Error('Not implemented.');
+  }
+
+  /**
+   * Checks if an element is hidden using the same mechanism as
+   * {@link ElementHandle.waitForSelector}.
+   */
+  async isHidden(): Promise<boolean> {
+    throw new Error('Not implemented.');
+  }
+
   /**
    * @deprecated Use {@link ElementHandle.waitForSelector} with the `xpath`
    * prefix.

packages/puppeteer-core/src/common/ElementHandle.ts

@@ -35,7 +35,9 @@ import {Frame} from './Frame.js';
 import {FrameManager} from './FrameManager.js';
 import {getQueryHandlerAndSelector} from './GetQueryHandler.js';
 import {WaitForSelectorOptions} from './IsolatedWorld.js';
+import {PUPPETEER_WORLD} from './IsolatedWorlds.js';
 import {CDPJSHandle} from './JSHandle.js';
+import {LazyArg} from './LazyArg.js';
 import {CDPPage} from './Page.js';
 import {ElementFor, EvaluateFuncWith, HandleFor, NodeFor} from './types.js';
 import {KeyInput} from './USKeyboardLayout.js';
@@ -209,6 +211,32 @@ export class CDPElementHandle<
     return this.waitForSelector(`xpath/${xpath}`, options);
   }
 
+  async #checkVisibility(visibility: boolean): Promise<boolean> {
+    const element = await this.frame.worlds[PUPPETEER_WORLD].adoptHandle(this);
+    try {
+      return await this.frame.worlds[PUPPETEER_WORLD].evaluate(
+        async (PuppeteerUtil, element, visibility) => {
+          return Boolean(PuppeteerUtil.checkVisibility(element, visibility));
+        },
+        LazyArg.create(context => {
+          return context.puppeteerUtil;
+        }),
+        element,
+        visibility
+      );
+    } finally {
+      await element.dispose();
+    }
+  }
+
+  override async isVisible(): Promise<boolean> {
+    return this.#checkVisibility(true);
+  }
+
+  override async isHidden(): Promise<boolean> {
+    return this.#checkVisibility(false);
+  }
+
   override async toElement<
     K extends keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap
   >(tagName: K): Promise<HandleFor<ElementFor<K>>> {

test/TestExpectations.json

@@ -113,6 +113,12 @@
     "parameters": ["cdp", "firefox"],
     "expectations": ["SKIP"]
   },
+  {
+    "testIdPattern": "[elementhandle.spec] ElementHandle specs ElementHandle.isVisible and ElementHandle.isHidden should work",
+    "platforms": ["darwin", "linux", "win32"],
+    "parameters": ["webDriverBiDi"],
+    "expectations": ["FAIL"]
+  },
   {
     "testIdPattern": "[emulation.spec] Emulation Page.viewport should detect touch when applying viewport with touches",
     "platforms": ["darwin", "linux", "win32"],

test/src/elementhandle.spec.ts

@@ -173,6 +173,21 @@ describe('ElementHandle specs', function () {
     });
   });
 
+  describe('ElementHandle.isVisible and ElementHandle.isHidden', function () {
+    it('should work', async () => {
+      const {page} = getTestState();
+      await page.setContent('<div style="display: none">text</div>');
+      const element = (await page.waitForSelector('div'))!;
+      await expect(element.isVisible()).resolves.toBeFalsy();
+      await expect(element.isHidden()).resolves.toBeTruthy();
+      await element.evaluate(e => {
+        e.style.removeProperty('display');
+      });
+      await expect(element.isVisible()).resolves.toBeTruthy();
+      await expect(element.isHidden()).resolves.toBeFalsy();
+    });
+  });
+
   describe('ElementHandle.click', function () {
     it('should work', async () => {
       const {page, server} = getTestState();