diff --git a/docs/api.md b/docs/api.md index 9edfecd6b67..c996ff7c53c 100644 --- a/docs/api.md +++ b/docs/api.md @@ -322,7 +322,7 @@ * [elementHandle.getProperties()](#elementhandlegetproperties) * [elementHandle.getProperty(propertyName)](#elementhandlegetpropertypropertyname) * [elementHandle.hover()](#elementhandlehover) - * [elementHandle.isIntersectingViewport()](#elementhandleisintersectingviewport) + * [elementHandle.isIntersectingViewport([options])](#elementhandleisintersectingviewportoptions) * [elementHandle.jsonValue()](#elementhandlejsonvalue) * [elementHandle.press(key[, options])](#elementhandlepresskey-options) * [elementHandle.screenshot([options])](#elementhandlescreenshotoptions) @@ -4574,8 +4574,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() - +#### elementHandle.isIntersectingViewport([options]) +- `options` <[Object]> + - `threshold` <[number]> threshold for the intersection between 0 (no intersection) and 1 (full intersection). Defaults to 1. - returns: <[Promise]<[boolean]>> Resolves to true if the element is visible in the current viewport. #### elementHandle.jsonValue() diff --git a/src/common/JSHandle.ts b/src/common/JSHandle.ts index adeb960576c..2e138c514e8 100644 --- a/src/common/JSHandle.ts +++ b/src/common/JSHandle.ts @@ -994,19 +994,20 @@ export class ElementHandle< /** * Resolves to true if the element is visible in the current viewport. */ - async isIntersectingViewport(): Promise { - return await this.evaluate<(element: Element) => Promise>( - async (element) => { - const visibleRatio = await new Promise((resolve) => { - const observer = new IntersectionObserver((entries) => { - resolve(entries[0].intersectionRatio); - observer.disconnect(); - }); - observer.observe(element); + async isIntersectingViewport(options?: { + threshold?: number; + }): Promise { + const { threshold = 0 } = options || {}; + return await this.evaluate(async (element: Element, threshold: number) => { + const visibleRatio = await new Promise((resolve) => { + const observer = new IntersectionObserver((entries) => { + resolve(entries[0].intersectionRatio); + observer.disconnect(); }); - return visibleRatio > 0; - } - ); + observer.observe(element); + }); + return threshold === 1 ? visibleRatio === 1 : visibleRatio > threshold; + }, threshold); } } diff --git a/test/assets/offscreenbuttons.html b/test/assets/offscreenbuttons.html index 005d465cbd9..e487caf4d35 100644 --- a/test/assets/offscreenbuttons.html +++ b/test/assets/offscreenbuttons.html @@ -17,6 +17,7 @@ #btn8 { right: -80px; top: 200px; } #btn9 { right: -90px; top: 225px; } #btn10 { right: -100px; top: 250px; } + #btn11 { right: -99.999px; top: 275px; } @@ -29,6 +30,7 @@ +