I followed this article and reached the state in which my Cypress logs looks like in the last image of the article.

The method presented is based on logging function names.

However, I still have 2 questions:

1. As much as I managed to achieve, nested functions are not displayed nested on the Cypress log, but they follow their caller. Does someone know how can I make the logSteps indenting according to their order?

2. As I said, this is based on functions, and so I find myself wrapping the content of each custom command in order to “logStep” their name.

For example:

Cypress.Commands.add('login', (username, password) => {

    login()

    function login() {

        eval(Cypress.logStep)

        cy.get('[data-test="username"]').type(username, { force: true })
        cy.get('[data-test="password"]').type(password, { force: true })
        cy.get('[type="submit"]').click({ force: true })
        elements.loader().should('not.exist')
    }
})

Is there a better way?