0

I am new to Cypress, but wanted to capture the time from visiting a page, up until the page is fully rendered and available to use.

I understand I can use the Window: load event to identify when the whole page has loaded, so I could possibly take timestamps in some way from the initial visit/click of the URL/page etc and when the 'load' event has completed, giving me the entire page load/render time.

Is this the best way to go about it and the most reliable method of identifying when a page has fully loaded i.e. all HTML, CSS, JS files etc etc.

UPDATE: I've just seen that cy.visit() resolves when the page fires its load event.

So am I correct in understanding that once cy.visit() resolves, all elements of my page would have been loaded & rendered and I don't need to manually measure time of the load event itself?

Thanks!

3
  • Depends on why you need this? Load event is the latest event a browser fires when assembling a page, but it's not a metric particularly useful to end users. If you want to improve web performance, have a look at (Core) Web Vitals metrics (FCP, LCP, CLS, FID). But it's not the best idea to measure these using Cypress that itself runs in a browser, thus affecting these metrics.
    – pavelsaman
    Feb 10, 2022 at 10:57
  • Hi @pavelsaman Thanks for the answer. I want to measure the time in an actual browser to get as real a render time for an end user as possible. Would it be best to measure this then via assertions across 1 or many elements of a page?
    – Mike
    Feb 10, 2022 at 11:14
  • Hm, as I said, end users are mostly insterested in Web Vitals metrics (there's a reason why Web Vitals get heavily promoted and measured by Google), so I'd not measure it using load event.
    – pavelsaman
    Feb 10, 2022 at 12:48

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.