Expose command timing

[bahmutov]

What would you like?

I would like to know how long every command took to execute during the test to figure out how to speed things up. Was it the cy.visit? Or cy.request? Or cy.get('selector').should('be.visible')?

We do have this information already - read https://www.cypress.io/blog/2020/05/22/where-does-the-test-spend-its-time/ and could provide it to the user either on demand, or by default

As the first step, I think we could simply add command timing to the DevTools Console output when clicking on the command

We already report duration for some commands, like cy.request, but could report it for all of them.

Second step would show those durations for every command in the reporter, like this

Why is this needed?

People complain about Cypress being slow - https://twitter.com/sunpietro/status/1329545832262152203 is one example, and the first step to answering this question is understanding where the test is spending its time.

[ayshiff]

@bahmutov Can I work on this ? 👍

[bahmutov]

Sure, start with something simple like printing the command duration when clicked

[bahmutov]

For command log properties, we could use log:changed event https://on.cypress.io/catalog-of-events to add duration to every command

Cypress.on('log:changed', options => {
  if (options.instrument === 'command' && options.consoleProps) {
    options.wallClockStoppedAt = Date.now()
    options.duration = +options.wallClockStoppedAt - (+ new Date(options.wallClockStartedAt))
    options.consoleProps.Duration = options.duration
  }
})

[bahmutov]

Made my code into a tiny plugin https://github.com/bahmutov/cypress-timings and wrote a blog post https://glebbahmutov.com/blog/cypress-timings/

[ayshiff]

@bahmutov Do I have to close my Draft PR then ?

[bahmutov]

No, let it stay @ayshiff - no harm, and we are thinking about how to better grab those numbers and how to show them in the GUI

[AndreyYevtukhov]

Any updates on this? :)