|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright 2025 Google LLC |
| 4 | + * SPDX-License-Identifier: Apache-2.0 |
| 5 | + */ |
| 6 | +import type {CdpPage} from 'puppeteer-core/internal/cdp/Page.js'; |
| 7 | +import {Page, Protocol} from 'puppeteer-core'; |
| 8 | +import {logger} from './logger.js'; |
| 9 | + |
| 10 | +export class WaitForHelper { |
| 11 | + #abortController = new AbortController(); |
| 12 | + #genericTimeout: number; |
| 13 | + #stableDomFor: number; |
| 14 | + #expectNavigationIn: number; |
| 15 | + #page: CdpPage; |
| 16 | + |
| 17 | + constructor(page: Page) { |
| 18 | + this.#genericTimeout = 3000; |
| 19 | + this.#stableDomFor = 100; |
| 20 | + this.#expectNavigationIn = 100; |
| 21 | + this.#page = page as unknown as CdpPage; |
| 22 | + } |
| 23 | + |
| 24 | + /** |
| 25 | + * A wrapper that executes a action and waits for |
| 26 | + * a potential navigation, after which it waits |
| 27 | + * for the DOM to be stable before returning. |
| 28 | + */ |
| 29 | + async waitForStableDom(): Promise<void> { |
| 30 | + const stableDomObserver = await this.#page.evaluateHandle(timeout => { |
| 31 | + let timeoutId: ReturnType<typeof setTimeout>; |
| 32 | + function callback() { |
| 33 | + clearTimeout(timeoutId); |
| 34 | + timeoutId = setTimeout(() => { |
| 35 | + domObserver.resolver.resolve(); |
| 36 | + domObserver.observer.disconnect(); |
| 37 | + }, timeout); |
| 38 | + } |
| 39 | + const domObserver = { |
| 40 | + resolver: Promise.withResolvers<void>(), |
| 41 | + observer: new MutationObserver(callback), |
| 42 | + }; |
| 43 | + // It's possible that the DOM is not gonna change so we |
| 44 | + // need to start the timeout initially. |
| 45 | + callback(); |
| 46 | + |
| 47 | + domObserver.observer.observe(document.body, { |
| 48 | + childList: true, |
| 49 | + subtree: true, |
| 50 | + attributes: true, |
| 51 | + }); |
| 52 | + |
| 53 | + return domObserver; |
| 54 | + }, this.#stableDomFor); |
| 55 | + |
| 56 | + this.#abortController.signal.addEventListener('abort', async () => { |
| 57 | + try { |
| 58 | + await stableDomObserver.evaluate(observer => { |
| 59 | + observer.observer.disconnect(); |
| 60 | + observer.resolver.resolve(); |
| 61 | + }); |
| 62 | + await stableDomObserver.dispose(); |
| 63 | + } catch { |
| 64 | + // Ignored cleanup errors |
| 65 | + } |
| 66 | + }); |
| 67 | + |
| 68 | + return Promise.race([ |
| 69 | + stableDomObserver.evaluate(async observer => { |
| 70 | + return await observer.resolver.promise; |
| 71 | + }), |
| 72 | + this.timeout(this.#genericTimeout).then(() => { |
| 73 | + throw new Error('Timeout'); |
| 74 | + }), |
| 75 | + ]); |
| 76 | + } |
| 77 | + |
| 78 | + async waitForNavigationStarted() { |
| 79 | + // Currently Puppeteer does not have API |
| 80 | + // For when a navigation is about to start |
| 81 | + const navigationStartedPromise = new Promise<boolean>(resolve => { |
| 82 | + const listener = (event: Protocol.Page.FrameStartedNavigatingEvent) => { |
| 83 | + if ( |
| 84 | + [ |
| 85 | + 'historySameDocument', |
| 86 | + 'historyDifferentDocument', |
| 87 | + 'sameDocument', |
| 88 | + ].includes(event.navigationType) |
| 89 | + ) { |
| 90 | + resolve(false); |
| 91 | + return; |
| 92 | + } |
| 93 | + |
| 94 | + resolve(true); |
| 95 | + }; |
| 96 | + |
| 97 | + this.#page._client().on('Page.frameStartedNavigating', listener); |
| 98 | + this.#abortController.signal.addEventListener('abort', () => { |
| 99 | + resolve(false); |
| 100 | + this.#page._client().off('Page.frameStartedNavigating', listener); |
| 101 | + }); |
| 102 | + }); |
| 103 | + |
| 104 | + return await Promise.race([ |
| 105 | + navigationStartedPromise, |
| 106 | + this.timeout(this.#expectNavigationIn).then(() => false), |
| 107 | + ]); |
| 108 | + } |
| 109 | + |
| 110 | + timeout(time: number): Promise<void> { |
| 111 | + return new Promise<void>(res => { |
| 112 | + const id = setTimeout(res, time); |
| 113 | + this.#abortController.signal.addEventListener('abort', () => { |
| 114 | + res(); |
| 115 | + clearTimeout(id); |
| 116 | + }); |
| 117 | + }); |
| 118 | + } |
| 119 | + |
| 120 | + async waitForEventsAfterAction( |
| 121 | + action: () => Promise<unknown>, |
| 122 | + ): Promise<void> { |
| 123 | + const navigationStartedPromise = this.waitForNavigationStarted(); |
| 124 | + |
| 125 | + await action(); |
| 126 | + |
| 127 | + try { |
| 128 | + const navigationStated = await navigationStartedPromise; |
| 129 | + if (navigationStated) { |
| 130 | + await this.#page.waitForNavigation({ |
| 131 | + timeout: this.#genericTimeout, |
| 132 | + signal: this.#abortController.signal, |
| 133 | + }); |
| 134 | + } |
| 135 | + |
| 136 | + // Wait for stable dom after navigation so we execute in |
| 137 | + // the correct context |
| 138 | + await this.waitForStableDom(); |
| 139 | + } catch (error) { |
| 140 | + logger(error); |
| 141 | + } finally { |
| 142 | + this.#abortController.abort(); |
| 143 | + } |
| 144 | + } |
| 145 | +} |
0 commit comments