Metrics API about playwright

[pavelfeldman]

This only collected 8 upvotes during the last 18 months, so I'm going to close it and defer to the third parties to resolve this. You can always open a new bug and link to this one with additional information!

[JoelEinbinder]

Maybe we can directly provide some indication whether the rendering is stable? I'm very curious as to how your tool works.

[Quramy]

@JoelEinbinder Thanks for reply.

I'm very curious as to how your tool works

The following figure is a screenshot of Chrome rendering pipeline.

I really want the (A) timing to get stable page.screenshot() result, but, as far as I know, we can't get if painting/composition finished ( if you have some plans to get (A) timing, please tell me).

So we use (B) timing instead of (A). The (B) timing is closer to (A) than JS function call finished timing. The (B) timing means style recalculation and layouting finished and we wait for (B) using code such as:

let recalcStyleCountOfPreviousFrame = -1, layoutCountOfPreviousFrame = -1;
for (let i = 0; i < 100; i++) {
  const { RecalcStyleCount, LayoutCount } = await page.metrics();
  const isStable = 
    recalcStyleCountOfPreviousFrame === RecalcStyleCount &&
    LayoutCount === layoutCountOfPreviousFrame;
  if (isStable) {
    break;
  }
  recalcStyleCountOfPreviousFrame = RecalcStyleCount;
  layoutCountOfPreviousFrame = LayoutCount
  await new Promise(res => setTImeout(res, 16));
}

await page.screenshot();

Of course, I'm sure this logic is not perfect. But it works well to some extent.

Metrics API is not our goal. We really want a method/API to get (A) timing.

[Quo0]

It would be great if we would have the same metrics API that we have in Puppeteer.
JSheap tracking is really important thing and I think that a lot of people would miss it in Playwright =)
It would be great if we would be able to track CPU usage, also.

[JoelEinbinder]

You can measure memory in chromium by evaluating ‘performance.memory.usedJSHeapSize’ within the page.