Estoy usando Titiritero para crear un flujo de usuario. Estoy tratando de medir el tiempo desde que se hace click hasta que se muestra el resultado en la página. Quiero medir la duración total de la tubería de procesamiento con:

JavaScript > Estilo > Diseño > Pintura > Compuesto

No estoy navegando a otra página al hacer clic o mostrar otro botón, solo estoy actualizando elementos.

¿Cómo puedo detectar el final de la tubería de procesamiento?

Probé muchos enfoques diferentes, como esperar un selector, MutationObserver o escuchar eventos, pero nada funcionó correctamente. También traté de extraer las tareas importantes de un resultado de page.tracing, pero eso era demasiado complicado y no puedo encontrar una API para extraer eso.

Encontré artículos como medir el tiempo de pintura , donde se usa requestAnimationFrame para medir esto. Pero, en mi caso, combinado con Puppeteer requestAnimationFrame , siempre es demasiado tarde.

Por ejemplo, aquí está la parte del Código donde mido el tiempo con requestAnimationFrame , pero cuando genero un informe de seguimiento sobre ese tiempo, puedo ver que el tiempo registrado es demasiado largo.

 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); }) }) }));

¿Hay una manera fácil o más fácil de medir ese tiempo, o alguien puede explicarme por qué no funcionará o cuál podría ser el mejor enfoque para intentarlo?