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?

For example, login() is being called by loginCM().

Cypress.Commands.add('loginCM', (username = Cypress.env("CM_USERNAME"), password = Cypress.env("CM_PASSWORD")) => {

    loginCM()

    function loginCM() {
        
        eval(Cypress.logStep)
        Logger.logBegin(`loginCM`, `username = ${username}, password = ${password}`)

        cy.clearAllLocalStorage()

        cy.intercept('POST', '*login*').as('login')
        cy.visit(getCMUrl())
        cy.login(username, password)
        cy.wait('@login').then((interception) => {
            const token = interception.response.body.token
            Cypress.env('ACCESS_CODE', token)
        })

        Logger.logEnd(`loginCM`)
    }
})

However, in log they look one after the other instead of one under the other:

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?