Using cypress, measure page load time

Question

Im using cypress to test a website, I need a way to measure the amount of time that it takes to load or execute certain cypress commands. For example:

//var startTime = SomeStopwatchFunction();
cy.visit("/a website");
cy.get("Some item");
//cy.log(SomeStopwatchFunction - startTime);

I've tried using the cy.clock() but that returns 0. So I might be doing something wrong there. I've used performance.now() which kinda works but always returns the same value regardless of the load time. I've used Date.getTime() but that also returns 0. Its got to have something to do with how cypress executes the code but nothing seems to work.

Answer 1

You are measuring things that happen asynchronously on the Cypress queue, so you need to insert your timing commands in the queue as well, using cy.wrap().

Otherwise they will execute before the page loads and give you a very small diff.

const t0 = performance.now()
cy.visit("/a website");
cy.get("Some item");
cy.wrap(performance.now()).then(t1 => {   // this is now a queued command which will 
                                          // only run after the previous command
  cy.log(`Page load took ${t1 - t0} milliseconds.`);
})