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!

Improve this question
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

Reset to default

Your Answer

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