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.

cy.clock is used to control the system’s time and date. Take a look at this blog post as it may help you out: https://www.cypress.io/blog/2020/05/22/where-does-the-test-spend-its-time/ — Shafiq Jetha, Mar 22 '21 at 20:21

score 3 · Accepted Answer · answered Mar 23 '21 at 09:22

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.`);
})

Marcus · Answer 2 · 2022-07-14T18:15:26.337

The accepted answer (from user9161752) may lead to strange results. In my case the duration is about 5 seconds too high. It seems to me that const t0 = performance.now() is called before stuff in beforeEach runs, so the result contained the duration of the login process in my case.

So you also have to set the start time asynchronously. This works for me:

var start = 0;
cy.then(() => {
    start = performance.now();
});
cy.visit("/a website");
cy.get("Some item").then(() => {
    cy.log(`duration: ${performance.now() - start} ms`);
});

score 0 · Answer 3 · edited Jan 17 '22 at 20:31

In my case I had a need to measure a page load time exactly after click, so I wrote the following code:

cy.get(loginLoginBtn).should('exist').then(() => {
        const t0 = performance.now();

        cy.get(loginLoginBtn)
        .click()
        .location('pathname').should('eq', '/package_selection')
        .wait('@recentProfiles').its('response.statusCode')
        .should('eq', 200)
        .then(() => {
            const t1 = performance.now();
            const packagePageLoadTime = ((t1 - t0) / 1000);
            cy.log(`Page load took ${packagePageLoadTime} seconds.`)
            cy.writeFile(packagePageLoadFile, '[]', {flag: 'w+'});
            cy.readFile(packagePageLoadFile).then((writeTimeToFile) => {
                writeTimeToFile.push({dateOfExecution: executionDate, timeInSeconds: packagePageLoadTime});
                cy.writeFile(packagePageLoadFile, writeTimeToFile);
            });
            expect(packagePageLoadTime).to.be.lessThan(5);
        })
    });

score 0 · Answer 4 · answered Jan 14 '22 at 00:37

0

There is a cypress-timings that gives a general timing of each cypress commands. It's as easy a installing and adding the following into your support/index.js

import { commandTimings } from 'cypress-timings'
commandTimings()

answered Jan 14 '22 at 00:37

jjhelguero

2,281
5
13

Using cypress, measure page load time

4 Answers4