how to have nested log groups?

Question

I can structure logs into a collapsible group using groupStart and groupEnd (see e. g. github).

Cypress.log({name,
             message,
             groupStart: true,
            })

Is there a way to nest such groups into a collapsible super group?

Answer 1

You will notice there's also a groupEnd property which is implicit at the end of the test.

Using groupEnd explicitly, it's fairly trivial to nest groups.

It behaves identically to console.group

it('log nesting', () => {
  Cypress.log({ name: 'level1', message: '+ grouping', groupStart: true })
  Cypress.log({ name: 'level2', message: '+ grouping', groupStart: true })
  Cypress.log({ name: 'level3', message: '+ grouping', groupStart: true })

  Cypress.log({ name: 'inner', message: 'inside nested groups'})

  Cypress.log({ name: 'level3', message: '- grouping', groupEnd: true })
  Cypress.log({ name: 'level2', message: '- grouping', groupEnd: true })
  Cypress.log({ name: 'level1', message: '- grouping', groupEnd: true })
})

---

Without the un-nesting log entries

Call the .endGroup() method on the saved log variable to reduce the nesting level.

it('log nesting', () => {
  const level1Log = Cypress.log({ name: 'level1', message: '+ grouping', groupStart: true })
  const level2Log = Cypress.log({ name: 'level2', message: '+ grouping', groupStart: true })
  const level3Log = Cypress.log({ name: 'level3', message: '+ grouping', groupStart: true })

  Cypress.log({ name: 'inner', message: 'inside nested groups'})

  level3Log.endGroup()
  Cypress.log({ name: 'outer2', message: 'outside level 3'})

  const level3aLog = Cypress.log({ name: 'level3a', message: '+ grouping', groupStart: true })

  Cypress.log({ name: 'inner', message: 'inside level 3a group'})
  level3aLog.endGroup()

  level2Log.endGroup()
  Cypress.log({ name: 'outer1', message: 'outside level 2'})

  level1Log.endGroup()
  Cypress.log({ name: 'outer', message: 'outside all nested groups'})
})

---

Typescript

If you are concerned about these options being omitted from the type definition, add a .d.ts file to the project to make them publicly available.

declare namespace Cypress {
  interface LogConfig {
    groupStart: Boolean
    groupEnd: Boolean
  }

  interface Log { 
    endGroup(): void
  }
}