Playwright: how to wait until there is no animation on the page?

Question

I'm trying to figure out how to check whether the page has fully loaded in Playwright. await page.waitForLoadState('networkidle'); doesn't always work for me on Javascript-heavy sites. I've resorted to taking a screenshot base64, waiting 100 ms, taking a new screenshot, and comparing whether those are the same. However this doesn't seem ideal, is there any way to ask Playwright when the last animation frame was redrawn?

Answer 1

There are several options that may help you.

1. Solution 1:

First, you can maybe determine which element is loading last, and then go with

page.waitForSelector('yourselector')

or even wait for multiple selectors to appear

page.waitForSelector('yourselector1','yourselector2')

2. Solution 2

page.waitForLoadState('domcontentloaded')

Because

page.waitForLoadState('networkidle') 

by default will wait for network event and if 0.5 seconds nothing is network trafficking it will say, I am no longer need to wait. And that is why you maybe have stohastic beh.

Answer 2

Typescript version based on @lonix answer. Also I've used a general approach polling whole document.body instead of particular DOM node, as in my case it wasn't working - markupCurrent was stable starting with page load while the animations continued to perform.

    async debounceDom(pollDelay = 50, stableDelay = 350) {
        let markupPrevious = '';
        const timerStart = new Date();
        let isStable = false;
        while (!isStable) {
            const markupCurrent = await this.page.evaluate(() => document.body.innerHTML);
            if (markupCurrent == markupPrevious) {
                const elapsed = new Date().getTime() - timerStart.getTime();
                isStable = stableDelay <= elapsed;
            } else {
                markupPrevious = markupCurrent;
            }
            if (!isStable) await new Promise(resolve => setTimeout(resolve, pollDelay));
        }
    }

Self-explaining method for those want to check what is going on with the page

    async debounceDomLog(pollDelay = 50, stableDelay = 350) {
        let markupPrevious = '';
        const timerStart = new Date();
        let isStable = false;
        let counter = 0;
        while (!isStable) {
            ++counter;
            console.log('-----\nattempt: ', counter);
            const markupCurrent = await this.page.evaluate(() => document.body.innerHTML);
            const elapsed = new Date().getTime() - timerStart.getTime();
            if (markupCurrent == markupPrevious) {
                isStable = stableDelay <= elapsed;
                if (!isStable) {
                    console.log('size is stable! Still polling... (Reason: delay not elapsed yet)');
                    console.log('this attempt size: ', markupCurrent.length);
                } else {
                    console.log('size settled and time elapsed');
                    console.log('this attempt size: ', markupCurrent.length);
                }
            } else {
                console.log('this attempt size: ', markupPrevious.length);
                markupPrevious = markupCurrent;
            }
            if (!isStable) {
                console.log('waiting for poll delay: ', pollDelay);
                await new Promise(resolve => setTimeout(resolve, pollDelay));
            }
            console.log('elapsed: ', elapsed)
        }
    }

and the resulting output:

-----
attempt:  1
this attempt size:  0
waiting for poll delay:  25
elapsed:  113
-----
attempt:  2
this attempt size:  1612125
waiting for poll delay:  25
elapsed:  208
-----
attempt:  3
size is stable! Still polling... (Reason: delay not elapsed yet)
this attempt size:  1608951
waiting for poll delay:  25
elapsed:  304
-----
attempt:  4
size settled and time elapsed
this attempt size:  1608951
elapsed:  400
  1 passed (11.5s)