From 656b562c7488d4976a7a53264feef508c6b629dd Mon Sep 17 00:00:00 2001 From: Alex Rudenko Date: Tue, 11 Apr 2023 16:05:10 +0200 Subject: [PATCH] fix: make isIntersectingViewport work with SVG elements (#10004) --- ...er.elementhandle.isintersectingviewport.md | 2 +- docs/api/puppeteer.elementhandle.md | 2 +- .../puppeteer-core/src/api/ElementHandle.ts | 60 +++++++++++++++++-- .../src/common/ElementHandle.ts | 19 ------ test/assets/inline-svg.html | 14 +++++ test/src/elementhandle.spec.ts | 50 ++++++++++++++++ 6 files changed, 122 insertions(+), 25 deletions(-) create mode 100644 test/assets/inline-svg.html diff --git a/docs/api/puppeteer.elementhandle.isintersectingviewport.md b/docs/api/puppeteer.elementhandle.isintersectingviewport.md index de11847e..c7d0861e 100644 --- a/docs/api/puppeteer.elementhandle.isintersectingviewport.md +++ b/docs/api/puppeteer.elementhandle.isintersectingviewport.md @@ -4,7 +4,7 @@ sidebar_label: ElementHandle.isIntersectingViewport # ElementHandle.isIntersectingViewport() method -Resolves to true if the element is visible in the current viewport. +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. #### Signature: diff --git a/docs/api/puppeteer.elementhandle.md b/docs/api/puppeteer.elementhandle.md index 995bf355..1cb28118 100644 --- a/docs/api/puppeteer.elementhandle.md +++ b/docs/api/puppeteer.elementhandle.md @@ -67,7 +67,7 @@ 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. | -| [isIntersectingViewport(this, options)](./puppeteer.elementhandle.isintersectingviewport.md) | | Resolves to true if the element is visible in the current viewport. | +| [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. | | [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. | | [select(values)](./puppeteer.elementhandle.select.md) | | Triggers a change and input event once all the provided options have been selected. If there's no <select> element matching selector, the method throws an error. | diff --git a/packages/puppeteer-core/src/api/ElementHandle.ts b/packages/puppeteer-core/src/api/ElementHandle.ts index 9d151a10..454be0f9 100644 --- a/packages/puppeteer-core/src/api/ElementHandle.ts +++ b/packages/puppeteer-core/src/api/ElementHandle.ts @@ -812,15 +812,67 @@ export class ElementHandle< } /** - * Resolves to true if the element is visible in the current viewport. + * 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. */ async isIntersectingViewport( this: ElementHandle, options?: { threshold?: number; } - ): Promise; - async isIntersectingViewport(): Promise { - throw new Error('Not implemented'); + ): Promise { + const {threshold = 0} = options ?? {}; + const svgHandle = await this.#asSVGElementHandle(this); + const intersectionTarget: ElementHandle = svgHandle + ? await this.#getOwnerSVGElement(svgHandle) + : this; + + try { + return await intersectionTarget.evaluate(async (element, threshold) => { + const visibleRatio = await new Promise(resolve => { + const observer = new IntersectionObserver(entries => { + resolve(entries[0]!.intersectionRatio); + observer.disconnect(); + }); + observer.observe(element); + }); + return threshold === 1 ? visibleRatio === 1 : visibleRatio > threshold; + }, threshold); + } finally { + if (intersectionTarget !== this) { + await intersectionTarget.dispose(); + } + } + } + + /** + * Returns true if an element is an SVGElement (included svg, path, rect + * etc.). + */ + async #asSVGElementHandle( + handle: ElementHandle + ): Promise | null> { + if ( + await handle.evaluate(element => { + return element instanceof SVGElement; + }) + ) { + return handle as ElementHandle; + } else { + return null; + } + } + + async #getOwnerSVGElement( + handle: ElementHandle + ): Promise> { + // SVGSVGElement.ownerSVGElement === null. + return await handle.evaluateHandle(element => { + if (element instanceof SVGSVGElement) { + return element; + } + return element.ownerSVGElement!; + }); } } diff --git a/packages/puppeteer-core/src/common/ElementHandle.ts b/packages/puppeteer-core/src/common/ElementHandle.ts index 43313c93..9407ba0e 100644 --- a/packages/puppeteer-core/src/common/ElementHandle.ts +++ b/packages/puppeteer-core/src/common/ElementHandle.ts @@ -747,25 +747,6 @@ export class CDPElementHandle< return imageData; } - - override async isIntersectingViewport( - this: CDPElementHandle, - options?: { - threshold?: number; - } - ): Promise { - const {threshold = 0} = options ?? {}; - return await this.evaluate(async (element, threshold) => { - const visibleRatio = await new Promise(resolve => { - const observer = new IntersectionObserver(entries => { - resolve(entries[0]!.intersectionRatio); - observer.disconnect(); - }); - observer.observe(element); - }); - return threshold === 1 ? visibleRatio === 1 : visibleRatio > threshold; - }, threshold); - } } function computeQuadArea(quad: Point[]): number { diff --git a/test/assets/inline-svg.html b/test/assets/inline-svg.html new file mode 100644 index 00000000..20023ecc --- /dev/null +++ b/test/assets/inline-svg.html @@ -0,0 +1,14 @@ + + + + + + + +
+ + + +
+ + diff --git a/test/src/elementhandle.spec.ts b/test/src/elementhandle.spec.ts index 27436537..1e1ff584 100644 --- a/test/src/elementhandle.spec.ts +++ b/test/src/elementhandle.spec.ts @@ -486,6 +486,56 @@ describe('ElementHandle specs', function () { }) ).toBe(true); }); + it('should work with svg elements', async () => { + const {page, server} = getTestState(); + + await page.goto(server.PREFIX + '/inline-svg.html'); + const visibleCircle = await page.$('circle'); + const visibleSvg = await page.$('svg'); + expect( + await visibleCircle!.isIntersectingViewport({ + threshold: 1, + }) + ).toBe(true); + expect( + await visibleCircle!.isIntersectingViewport({ + threshold: 0, + }) + ).toBe(true); + expect( + await visibleSvg!.isIntersectingViewport({ + threshold: 1, + }) + ).toBe(true); + expect( + await visibleSvg!.isIntersectingViewport({ + threshold: 0, + }) + ).toBe(true); + + const invisibleCircle = await page.$('div circle'); + const invisibleSvg = await page.$('div svg'); + expect( + await invisibleCircle!.isIntersectingViewport({ + threshold: 1, + }) + ).toBe(false); + expect( + await invisibleCircle!.isIntersectingViewport({ + threshold: 0, + }) + ).toBe(false); + expect( + await invisibleSvg!.isIntersectingViewport({ + threshold: 1, + }) + ).toBe(false); + expect( + await invisibleSvg!.isIntersectingViewport({ + threshold: 0, + }) + ).toBe(false); + }); }); describe('Custom queries', function () {