Measure the response time of the page display (waitForLoadState)

[LBouet]

Hi Everyone,

The goal is to measure the response time of the page display.
All the requests (56 in my case) making up the page must be completed.

I tried the methods “page.waitForLoadState(‘networkidle’);” and page.waitForLoadState(‘domcontentloaded’);"

Here is the result: 0 ms → Between t1 and t0

RUN :
var src=page.goto(‘http:// MY URL’, { waitUntil: ‘networkidle’ });
sleep(0.3);
var t0 = Date.now();
page.waitForLoadState(‘networkidle’);
var t1 = Date.now();
console.log("------------------------------->>>>>>>>>>>>>>>>>>>>>>>>>" + t1);
console.log((t1-t0));
console.log("------------------------------->>>>>>>>>>>>>>>>>>>>>>>>>" + t0);

CONSOLE.LOG:
INFO[0010] ------------------------------->>>>>>>>>>>>>>>>>>>>>>>>>1642091416660 source=console
INFO[0010] 0 source=console
INFO[0010] ------------------------------->>>>>>>>>>>>>>>>>>>>>>>>>1642091416660 source=console

It seems that these two methods do not work!
Is there another way to do it?

thanks
Regards
LBouet

[imiric]

Hi there! Thanks for creating this issue. We were aware of issues with page.waitForLoadState() (see the fillform.js example), but haven't created a GH issue to track it.

Though is there a reason you're not measuring the time between the page.goto() call?

For example, this works as expected from my tests:

let t0 = Date.now();
page.goto('https://test.k6.io/', { waitUntil: 'networkidle' });
let t1 = Date.now();

console.log(t1);
console.log(t1-t0);
console.log(t0);

Which prints:

INFO[0002] 1642152808355                                 source=console
INFO[0002] 2028                                          source=console
INFO[0002] 1642152806327                                 source=console

If the page is not dynamic and you're not performing any actions on it (e.g. clicking on a form and expecting navigation), then the page.waitForLoadState() call would return quickly, since the page is already loaded.

But as you can see from the fillform.js example, there are issues with this and we use sleep() as a workaround, though in general, we don't advise using k6's sleep() since it can cause issues with browser events, and suggest using page.waitForLoadState() or page.waitForSelector() instead.

That said, I tested by removing the sleep() from fillform.js and the example passes, so this might've been fixed in the many changes done recently.

In the future, we might want to expose page metrics similar to Puppeteer's, so that you can get this internally instead of relying on custom time measurements, but we haven't discussed or planned this feature yet.