diff --git a/docs/api/puppeteer.elementhandle.ishidden.md b/docs/api/puppeteer.elementhandle.ishidden.md new file mode 100644 index 00000000000..235b0c6c6b2 --- /dev/null +++ b/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; +} +``` + +**Returns:** + +Promise<boolean> diff --git a/docs/api/puppeteer.elementhandle.isvisible.md b/docs/api/puppeteer.elementhandle.isvisible.md new file mode 100644 index 00000000000..0e79423e195 --- /dev/null +++ b/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; +} +``` + +**Returns:** + +Promise<boolean> diff --git a/docs/api/puppeteer.elementhandle.md b/docs/api/puppeteer.elementhandle.md index 5e2ca202675..68f67ceabf1 100644 --- a/docs/api/puppeteer.elementhandle.md +++ b/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. | diff --git a/packages/puppeteer-core/src/api/ElementHandle.ts b/packages/puppeteer-core/src/api/ElementHandle.ts index 49e5faaa570..85b7c1f508e 100644 --- a/packages/puppeteer-core/src/api/ElementHandle.ts +++ b/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 { + throw new Error('Not implemented.'); + } + + /** + * Checks if an element is hidden using the same mechanism as + * {@link ElementHandle.waitForSelector}. + */ + async isHidden(): Promise { + throw new Error('Not implemented.'); + } + /** * @deprecated Use {@link ElementHandle.waitForSelector} with the `xpath` * prefix. diff --git a/packages/puppeteer-core/src/common/ElementHandle.ts b/packages/puppeteer-core/src/common/ElementHandle.ts index 2a6f1e1e563..bfe92a40539 100644 --- a/packages/puppeteer-core/src/common/ElementHandle.ts +++ b/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 { + 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 { + return this.#checkVisibility(true); + } + + override async isHidden(): Promise { + return this.#checkVisibility(false); + } + override async toElement< K extends keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap >(tagName: K): Promise>> { diff --git a/test/TestExpectations.json b/test/TestExpectations.json index 84c88784e90..6b7fb0353df 100644 --- a/test/TestExpectations.json +++ b/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"], diff --git a/test/src/elementhandle.spec.ts b/test/src/elementhandle.spec.ts index 1e1ff584602..eaf0bfc10a3 100644 --- a/test/src/elementhandle.spec.ts +++ b/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('
text
'); + 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();