Squashed commit of the following:

ryanthemanuel · ryanthemanuel · commit 3e294e9fc797 · 2025-10-20T22:47:16.000-05:00
commit 898fbc1 Merge: 00a488f 096b756 Author: mabela416 <mabel@cypress.io> Date: Mon Oct 20 13:48:47 2025 -0400 Merge branch 'develop' into mabel/issue-12026-handle-snapshots-in-studio commit 00a488f Author: Matthew Schile <mschile@cypress.io> Date: Mon Oct 20 11:02:51 2025 -0600 update changelog commit eb13900 Merge: 5b31a06 93375b7 Author: mabela416 <mabel@cypress.io> Date: Mon Oct 20 09:02:03 2025 -0400 Merge branch 'develop' into mabel/issue-12026-handle-snapshots-in-studio commit 5b31a06 Merge: 3b61635 a810356 Author: Mabel Amaya <mabel@cypress.io> Date: Fri Oct 17 14:53:51 2025 -0400 Merge remote-tracking branch 'refs/remotes/origin/mabel/issue-12026-handle-snapshots-in-studio' into mabel/issue-12026-handle-snapshots-in-studio commit 3b61635 Merge: fe5e574 5f756c4 Author: Mabel Amaya <mabel@cypress.io> Date: Fri Oct 17 14:52:46 2025 -0400 Merge remote-tracking branch 'origin/develop' into mabel/issue-12026-handle-snapshots-in-studio commit fe5e574 Author: Mabel Amaya <mabel@cypress.io> Date: Fri Oct 17 12:20:14 2025 -0400 fix changelog link to the ticket commit 25a20d5 Author: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Date: Fri Oct 17 11:27:13 2025 -0400 chore(deps): update dependency @antfu/utils to ^0.7.10 (#32744) * chore(deps): update dependency @antfu/utils to ^0.7.10 * empty commit --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com> commit bda29e2 Author: Cacie Prins <cacieprins@users.noreply.github.com> Date: Fri Oct 17 11:24:34 2025 -0400 chore: Update Chrome (stable) to 141.0.7390.107 and Chrome (beta) to 142.0.7444.34 (#32743) Co-authored-by: cypress-bot[bot] <41898282+cypress-bot[bot]@users.noreply.github.com> Co-authored-by: Jennifer Shehane <jennifer@cypress.io> commit 02050ae Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri Oct 17 11:23:38 2025 -0400 chore: updating v8 snapshot cache (#32751) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> commit 836988b Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri Oct 17 11:23:31 2025 -0400 chore: updating v8 snapshot cache (#32750) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> commit 77d3d85 Author: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri Oct 17 11:23:23 2025 -0400 chore: updating v8 snapshot cache (#32749) Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> commit 367a454 Author: Jennifer Shehane <jennifer@cypress.io> Date: Thu Oct 16 18:27:02 2025 -0400 chore: test against Node.js 25 (#32737) * chore: test against Node.js 25 * also use Node 24 current * and 22 latest * revert the other image updates to just test Node 25 * and binary node versions commit 86e811e Author: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Date: Thu Oct 16 16:11:04 2025 -0400 chore(deps): update dependency devtools-protocol to v0.0.1528500 (#32729) * chore(deps): update dependency devtools-protocol to v0.0.1528500 * empty commit * circle cache --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Jennifer Shehane <shehane.jennifer@gmail.com> Co-authored-by: Jennifer Shehane <jennifer@cypress.io> commit 541f689 Author: Jennifer Shehane <jennifer@cypress.io> Date: Thu Oct 16 15:36:11 2025 -0400 chore: try blobless checkout method (#32738) * chore: try blobless checkout method * update pipeline checkout commit a810356 Author: Mabel Amaya <mabel@cypress.io> Date: Fri Oct 17 12:20:14 2025 -0400 fix changelog link to the ticket commit 832784b Merge: 74fb176 682a11e Author: Mabel Amaya <mabel@cypress.io> Date: Fri Oct 17 12:16:52 2025 -0400 Merge remote-tracking branch 'refs/remotes/origin/mabel/issue-12026-handle-snapshots-in-studio' into mabel/issue-12026-handle-snapshots-in-studio commit 74fb176 Author: Mabel Amaya <mabel@cypress.io> Date: Fri Oct 17 12:16:16 2025 -0400 update changelog commit 682a11e Merge: ab821a5 3f45167 Author: mabela416 <mabel@cypress.io> Date: Fri Oct 17 12:12:27 2025 -0400 Merge branch 'develop' into mabel/issue-12026-handle-snapshots-in-studio commit ab821a5 Author: Mabel Amaya <mabel@cypress.io> Date: Fri Oct 17 12:11:04 2025 -0400 update logic to disable pinning commit 4d17909 Author: Mabel Amaya <mabel@cypress.io> Date: Fri Oct 17 09:36:24 2025 -0400 add tests commit 8414a9a Author: Mabel Amaya <mabel@cypress.io> Date: Thu Oct 16 17:07:03 2025 -0400 update snapshots not available in studio message commit d7426cb Author: Mabel Amaya <mabel@cypress.io> Date: Thu Oct 16 17:06:46 2025 -0400 disable snapshot pinning in studio mode
diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -10,6 +10,7 @@ _Released 10/20/2025 (PENDING)_
 **Misc:**
 
 - Add top padding for command log labels. Addressed in [#32774](https://github.com/cypress-io/cypress/pull/32774).
+- Disable pinning commands within Studio mode and update snapshot message. Addresses [#31273](https://github.com/cypress-io/cypress/issues/31273). Addressed in [#32753](https://github.com/cypress-io/cypress/pull/32753).
 
 ## 15.5.0
 
diff --git a/packages/app/src/runner/SnapshotControls.cy.tsx b/packages/app/src/runner/SnapshotControls.cy.tsx
@@ -110,4 +110,14 @@ describe('SnapshotControls', { viewportHeight: 200, viewportWidth: 500 }, () =>
     .findByText('The snapshot is missing. Displaying current state of the DOM.')
     .should('be.visible')
   })
+
+  it('shows studio active error', () => {
+    mountSnapshotControls()
+    const snapshotStore = useSnapshotStore()
+
+    snapshotStore.setMessage(defaultMessages.runner.snapshot.studioActiveError)
+    cy.get('body')
+    .findByText('Command snapshots are not available while in Studio')
+    .should('be.visible')
+  })
 })
diff --git a/packages/frontend-shared/src/locales/en-US.json b/packages/frontend-shared/src/locales/en-US.json
@@ -962,7 +962,7 @@
       "snapshotMissingError": "The snapshot is missing. Displaying current state of the DOM.",
       "defaultTitle": "DOM snapshot",
       "pinnedTitle": "Pinned",
-      "studioActiveError": "Cannot show snapshot while creating commands in Studio"
+      "studioActiveError": "Command snapshots are not available while in Studio"
     },
     "selectorPlayground": {
       "matches": "No matches | {n} match | {n} matches",
diff --git a/packages/reporter/src/commands/command.cy.tsx b/packages/reporter/src/commands/command.cy.tsx
@@ -3,6 +3,7 @@ import Command from './command'
 import CommandModel from './command-model'
 import type { SessionStatus } from '../sessions/utils'
 import type { TestState } from '@packages/types'
+import appState from '../lib/app-state'
 
 describe('commands', () => {
   describe('test states', () => {
@@ -232,4 +233,50 @@ describe('commands', () => {
       cy.get('.command-prompt-get-code-indicator').should('not.exist')
     })
   })
+
+  describe('studio active state', () => {
+    beforeEach(() => {
+      appState.reset()
+
+      cy.mount(
+        <div>
+          <Command
+            model={
+              new CommandModel({
+                name: 'get',
+                message: '.foo',
+                state: 'passed',
+                hasConsoleProps: true,
+                number: 1,
+                type: 'parent',
+                hookId: '1',
+                testId: '1',
+                id: 1,
+                numElements: 1,
+              })
+            }
+            scrollIntoView={() => {}}
+            aliasesWithDuplicates={[]}
+          />
+        </div>,
+      )
+    })
+
+    it('allows pinning command when studio is not active', () => {
+      appState.studioActive = false
+      cy.get('.command-pin-target').should('exist')
+
+      cy.get('.command-pin-target').click()
+
+      cy.contains('Printed output to your console').should('be.visible')
+    })
+
+    it('does not allow pinning when studio is active', () => {
+      appState.studioActive = true
+
+      cy.get('.command-pin-target').should('not.exist')
+
+      cy.get('.command-wrapper-container').should('exist')
+    })
+  })
 })
diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
@@ -495,6 +495,48 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
     return null
   }
 
+  const commandContent = (<div className='command-wrapper-container'>
+    <div
+      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} />
+    </div>
+    {model.isCyPrompt && model.state === 'passed' && (
+      <Button
+        variant="indigo-dark-mode"
+        size="20"
+        onClick={(e) => {
+          e.stopPropagation()
+          events.emit('prompt:get-code', { testId: model.testId, logId: model.id })
+        }}
+        className="command-prompt-get-code mr-1 whitespace-nowrap"
+      >
+        <IconTechnologyAngleBrackets
+          className='command-prompt-get-code-indicator pr-1'
+          size='16'
+          strokeColor='white'
+        />
+        <span>Code</span>
+      </Button>
+    )}
+  </div>)
+
   return (
     <>
       <li className={cs('command', `command-name-${commandName}`)}>
@@ -511,54 +553,15 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
           )}
         >
           <NavColumns model={model} isPinned={_isPinned()} toggleColumnPin={_toggleColumnPin} />
-          <FlashOnClick
+          {appState.studioActive ? commandContent : <FlashOnClick
             message='Printed output to your console'
             onClick={_toggleColumnPin}
             shouldShowMessage={_shouldShowClickMessage}
             wrapperClassName={cs('command-pin-target', { 'command-group': !!groupId, 'command-group-no-children': !model.hasChildren && model.group })}
           >
-            <div className='command-wrapper-container'>
-              <div
-                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} />
-              </div>
-              {model.isCyPrompt && model.state === 'passed' && (
-                <Button
-                  variant="indigo-dark-mode"
-                  size="20"
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    events.emit('prompt:get-code', { testId: model.testId, logId: model.id })
-                  }}
-                  className="command-prompt-get-code mr-1 whitespace-nowrap"
-                >
-                  <IconTechnologyAngleBrackets
-                    className='command-prompt-get-code-indicator pr-1'
-                    size='16'
-                    strokeColor='white'
-                  />
-                  <span>Code</span>
-                </Button>
-              )}
-            </div>
+            {commandContent}
           </FlashOnClick>
+          }
         </div>
         <Progress model={model} />
         {model.hasChildren && model.isOpen && (
