I'm using Puppeteer to create a user flow. I'm trying to measure the time from click to the rendered result on the page. I want to measure the whole duration of the render pipeline with:

JavaScript > Style > Layout > Paint > Composite

I'm not navigating to another page on click or displaying another button, I'm only updating elements.

How can I detect the end of the render pipeline?

I tried many different approaches, such as waiting for a selector, MutationObserver, or listening on events, but nothing worked properly. I also tried to extract the important tasks from a page.tracing result, but that was too complicated, and I can't find an API to extract that.

I found articles like measuring paint time, where requestAnimationFrame is used to measure this. But, in my case, combined with Puppeteer requestAnimationFrame, it's always too late.

For example, here is the part of the Code where I'm measuring the time with requestAnimationFrame, but when I'm generating a tracing report over that time I can see that the logged time is much too long.

await page.evaluate(() => window.performance.mark('test_start'));

await page.click(selectorSort);
 
const measureFrame = await page.evaluate(() => new Promise((resolve) => {
    window.requestAnimationFrame(() => {
        setTimeout(() => {
            performance.mark('test_end')
            const measure = performance.measure('FrameTime', 'test_start', 'test_end');
            resolve(measure.duration);
        })
    })
}));

Is there an easy or easier way to measure that time, or can someone explain to me why it won't work or what might be the best approach to try?