misc: Update nested groups design

cli/CHANGELOG.md

@@ -3,6 +3,10 @@
 
 _Released 6/3/2025 (PENDING)_
 
+**Misc:**
+
+- The design of commands that display as grouped (such as `.within()` and `cy.session()`) has been updated to provide better clarity when collapsing groups. Addressed in [#31739](https://github.com/cypress-io/cypress/pull/31739).
+
 **Dependency Updates:**
 
 - Updated `@sinonjs/fake-timers` from `10.3.0` to `11.3.1`. Addressed in [#31746](https://github.com/cypress-io/cypress/pull/31746).

packages/app/cypress/e2e/runner/support/snapshot-reporter.ts

@@ -1,26 +1,37 @@
 // Takes percy snapshot with navigation/AUT/reporter hidden
 export const snapshotReporter = () => {
-  cy.percySnapshot({
-    width: 450,
-    elementOverrides: {
-      '.cy-tooltip': true,
-      '[data-cy=sidebar]': ($el) => {
-        $el.attr('style', 'display: none !important')
-      },
-      '[data-cy=aut-panel]': ($el) => {
-        $el.attr('style', 'display: none !important')
-      },
-      '[data-cy=reporter-panel]': ($el) => {
-        $el.attr('style', 'width: 450px !important')
-      },
-      '[data-cy=reporter-running-icon]': ($el) => {
-        // remove 'fa-spin' class so that the icon is not animated
-        $el.attr('class', '')
-      },
-      '.command-progress': ($el) => {
-        // don't display command progress bar in snapshot
-        $el.attr('style', 'display: none !important')
+  let sidebarWidth = 0
+
+  cy.get('[data-cy=sidebar]')
+  .invoke('width')
+  .then((w) => {
+    if (w) {
+      sidebarWidth = w
+    }
+  }).then(() => {
+    cy.get('[data-cy=reporter-panel]')
+  })
+  .invoke('width')
+  .then((w) => {
+    cy.percySnapshot({
+      width: w + sidebarWidth,
+      elementOverrides: {
+        '.cy-tooltip': true,
+        '[data-cy=sidebar]': ($el) => {
+          $el.attr('style', 'display: none !important')
+        },
+        '[data-cy=aut-panel]': ($el) => {
+          $el.attr('style', 'display: none !important')
+        },
+        '[data-cy=reporter-running-icon]': ($el) => {
+          // remove 'fa-spin' class so that the icon is not animated
+          $el.attr('class', '')
+        },
+        '.command-progress': ($el) => {
+          // don't display command progress bar in snapshot
+          $el.attr('style', 'display: none !important')
+        },
       },
-    },
+    })
   })
 }

packages/app/cypress/e2e/runner/ui-states.cy.ts

@@ -1,3 +1,4 @@
+import { snapshotReporter } from './support/snapshot-reporter'
 import { loadSpec } from './support/spec-loader'
 
 describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 600000 }, () => {
@@ -12,7 +13,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('test hooks').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   it('nested tests', () => {
@@ -22,7 +23,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('Nested Tests').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   describe('commands', () => {
@@ -33,7 +34,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('part 1 - basic commands').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('part 2 - traversal and navigation', () => {
@@ -45,7 +46,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('part 2 - traversal and navigation').should('be.visible')
       .click()
 
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('part 3 - element manipulation', () => {
@@ -57,7 +58,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('part 3 - element manipulation').should('be.visible')
       .click()
 
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('part 4 - advanced interactions', () => {
@@ -69,7 +70,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       cy.contains('part 4 - advanced interactions').should('be.visible')
       .click()
 
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('commands that do not appear in command log', () => {
@@ -79,7 +80,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('commands that do not appear in command log').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('form interaction command options', () => {
@@ -89,7 +90,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('form interaction command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('DOM traversal command options', () => {
@@ -99,7 +100,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('DOM traversal command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('element state and navigation command options', () => {
@@ -109,7 +110,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('element state and navigation command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('element traversal and file operations command options', () => {
@@ -119,7 +120,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('element traversal and file operations command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('scrolling and form interaction command options', () => {
@@ -129,7 +130,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('scrolling and form interaction command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('user interaction and window command options', () => {
@@ -139,7 +140,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('user interaction and window command options').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('verify element visibility state', () => {
@@ -149,7 +150,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('verify element visibility state').should('be.visible').click()
-      cy.percySnapshot()
+      snapshotReporter()
     })
   })
 
@@ -160,7 +161,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('Request Statuses').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   it('page events', () => {
@@ -170,7 +171,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
     })
 
     cy.contains('events - page events').should('be.visible')
-    cy.percySnapshot()
+    snapshotReporter()
   })
 
   describe('errors', () => {
@@ -181,7 +182,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
       })
 
       cy.contains('simple error with docs link').should('be.visible')
-      cy.percySnapshot()
+      snapshotReporter()
     })
 
     it('long error', () => {
@@ -192,7 +193,7 @@ describe('src/cypress/runner ui states', { retries: 0, defaultCommandTimeout: 60
 
       cy.contains('simple error with docs link').click()
       cy.contains('long error').should('be.visible')
-      cy.percySnapshot()
+      snapshotReporter()
     })
   })
 })

packages/reporter/src/commands/command.tsx

@@ -124,7 +124,7 @@ const NavColumns: React.FC<NavColumnsProps> = observer(({ model, isPinned, toggl
       {(!model._isPending() && isPinned) && <PinIcon className='command-pin' />}
       {(!model._isPending() && !isPinned) && model.number}
     </div>
-    {model.hasChildren && (
+    {model.hasChildren && !model.group && (
       <div className='command-expander-column' onClick={() => model.toggleOpen()}>
         <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
       </div>
@@ -326,7 +326,7 @@ interface CommandProps {
 
 const CommandDetails: React.FC<CommandDetailsProps> = observer(({ model, groupId, aliasesWithDuplicates }) => (
   <span className={cs('command-info')}>
-    <span className='command-method'>
+    <span className={cs('command-method', { 'command-method-child': !model.hasChildren })}>
       <span>
         {model.event && model.type !== 'system' ? `(${displayName(model)})` : displayName(model)}
       </span>
@@ -432,7 +432,10 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
     groupLevel = model.groupLevel < 6 ? model.groupLevel : 5
 
     for (let i = 1; i < groupLevel; i++) {
-      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' />)
+      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' onClick={(e) => {
+        e.stopPropagation()
+        model.toggleOpen()
+      }} />)
     }
   }
 
@@ -520,14 +523,26 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
             message='Printed output to your console'
             onClick={_toggleColumnPin}
             shouldShowMessage={_shouldShowClickMessage}
-            wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId })}
+            wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId, 'command-group-no-children': !model.hasChildren && model.group })}
           >
             <div
-              className='command-wrapper-text'
+              className={cs('command-wrapper-text', {
+                'command-wrapper-text-group': model.hasChildren && groupId,
+                'command-wrapper-text-group-parent': model.hasChildren && !groupId,
+              })}
               onMouseEnter={() => _snapshot(true)}
               onMouseLeave={() => _snapshot(false)}
             >
               {groupPlaceholder}
+
+              {model.hasChildren && groupId && (
+                <div className={cs('command-expander-column-group', { 'nested-group-expander': model.groupLevel })} onClick={(e) => {
+                  e.stopPropagation()
+                  model.toggleOpen()
+                }}>
+                  <ChevronIcon className={cs('command-expander', { 'command-expander-is-open': model.hasChildren && !!model.isOpen })} />
+                </div>
+              )}
               <CommandDetails model={model} groupId={groupId} aliasesWithDuplicates={aliasesWithDuplicates} />
               <CommandControls model={model} commandName={commandName} events={events} />
             </div>