Is there a way to auto-collapse groups in the runner log?

[j1000]

I've been utilizing Cypress's groupStart/groupEnd feature for a while now and I reaaaaally like the way it organizes the test.

I have a question though. Is there a way to have the groups auto-collapse after the test run? The default is for everything to be exploded when the test is finished, which is not ideal. I typically click through the steps one at a time to collapse them before I begin sifting through the command log.

Alternatively, a collapse/expand all button for command groups would be a nice feature.

[jchatard]

Hi @j1000

Could you tell how you use groupStart/groupEnd feature you mentioned? I'm very much interested.

Thank you!
Cheers,

[j1000]

I don't know why it took me 2 months to notice your question. I'll put something together and share it 👍

[j1000]

OK! Here's a write-up on how this is done. By the way, I figured out a way to autoclose the groups. (It would still be nice if this were all built-in.)

[jchatard]

Awesome! Thank you so much!

[adamscybot]

In my case I wanted them to be closed already when printed. Probably a rare use case. The reason is im just grouping together a bunch of supplementary info that is printed all in one go sequentially. So its not hiding actively processing commands.

Going to hell for an impl this dirty but...it works. This goes in the support file.

const style = window!.top!.document.createElement('style')
style.textContent = `
.command:not([data-open-override]) .command-child-container { display: none; }
.command:not([data-open-override]) .command-expander-is-open { transform: rotate(-90deg) !important; -webkit-transform: rotate(-90deg) }
`
window!.top!.document.head.appendChild(style)

window!.top!.document.addEventListener('click', function (event) {
  let target = event.target
  let parent = target?.closest('.command')

  if (parent) {
    parent.setAttribute('data-open-override', true)
  }
})

You can even target certain groups:

const GROUP_NAME = 'EXAMPLE-NAME'
const style = window!.top!.document.createElement('style')
style.textContent = `
.command-name-${GROUP_NAME}:not([data-open-override]) .command-child-container { display: none; }
.command-name-${GROUP_NAME}:not([data-open-override]) .command-expander-is-open { transform: rotate(-90deg) !important; -webkit-transform: rotate(-90deg) }
`
window!.top!.document.head.appendChild(style)

window!.top!.document.addEventListener('click', function (event) {
  let target = event.target
  let parent = target?.closest('.command-name-${GROUP_NAME}')

  if (parent) {
    parent.setAttribute('data-open-override', true)
  }
})