Timeout on CLS evaluation

[MehseinJohan]

Hello team,

When trying to create a PerformanceObserver to log layout-shift entries to the console, as is :

export async function checkCLS2(page, maxLCP=ConstUtils.maxLCP) {
const CLS = await page.evaluate(() => {
return new Promise((resolve) => {
new PerformanceObserver(entryList => {
console.log(entryList.getEntries());
}).observe({ type: "layout-shift", buffered: true });
})
})
expect(CLS).toBeLessThanOrEqual(ConstUtils.maxLCP)
}

I get a timeout. Please note that I'm using the Playwright framework. Do you spot anything I did wrong ?

Many thanks in advance,

Regards,

Johan

[MehseinJohan]

Hello team,

Could you please provide follow-up on this issue ?

Thank you in advance,

Regards,

Johan

[clelland]

Hi Johan,

I don't know anything about the framework that you're using (for example, what page.evaluate is expected to do, but it appears that you're creating a promise that never resolves. At least in the section

return new Promise((resolve) => {
    new PerformanceObserver(entryList => {
        console.log(entryList.getEntries());
    }).observe({ type: "layout-shift", buffered: true });
})

I can see that the resolve callback is never going to be called. So even if you do get layout shift entries logged to the console, you will probably get a timeout in your test framework. (That said, I don't know what page.evaluate does, so it's possible that your observer is never even being created. I'd suggest removing that and just trying the PerformanceObserver on its own to start with. Ultimately, anything past that is probably a debugging problem that I can't really help with)