From db49c443c0d8de3c0e0af702c8c717155e15786f Mon Sep 17 00:00:00 2001 From: eriei013 Date: Fri, 19 Sep 2025 13:32:55 +0200 Subject: [PATCH 1/9] fix: Next button visibility and behaviour during stepping. Fixes #32476 --- packages/reporter/src/header/controls.tsx | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/packages/reporter/src/header/controls.tsx b/packages/reporter/src/header/controls.tsx index 3754bf074f0..264d063727f 100755 --- a/packages/reporter/src/header/controls.tsx +++ b/packages/reporter/src/header/controls.tsx @@ -78,11 +78,26 @@ const Controls: React.FC = observer(({ events = defaultEvents, appState, )} - {!!appState.nextCommandName && ( - Next [N]:{appState.nextCommandName}

} className='cy-tooltip'> + {(!!appState.nextCommandName || (appState.isRunning && !appState.nextCommandName)) && ( + Next [N]:{appState.nextCommandName}

:

Step (not available)

} + className='cy-tooltip' + >
-
From 51cbcd03d190f84f0d58f8c56882e029468a8fc7 Mon Sep 17 00:00:00 2001 From: eriei013 Date: Fri, 19 Sep 2025 14:58:53 +0200 Subject: [PATCH 2/9] docs: add changelog entry for Next button fix --- cli/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 599e0aca9b3..6861960950c 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -6,6 +6,7 @@ _Released 9/23/2025 (PENDING)_ **Bugfixes:** - In development mode, Electron `stderr` is piped directly to Cypress' `stderr` to make it clear why Electron failed to start, if it fails to start. Fixes [#32358](https://github.com/cypress-io/cypress/issues/32358). Addressed in [32468](https://github.com/cypress-io/cypress/pull/32468). +- Fixed Next button placement and behavior during test stepping workflow. The button now maintains consistent visibility during stepping sessions, staying visible but disabled when no immediate next command is available, providing clear visual feedback to users about stepping state. Fixes [#32476](https://github.com/cypress-io/cypress/issues/32476). **Misc:** From 6f7d229e3a075c7538ac9b9e21d7e4ce8e39fd95 Mon Sep 17 00:00:00 2001 From: eriei013 Date: Tue, 23 Sep 2025 11:44:49 +0200 Subject: [PATCH 3/9] test: update header tests for Next button visibility testing --- packages/reporter/cypress/e2e/header.cy.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/reporter/cypress/e2e/header.cy.ts b/packages/reporter/cypress/e2e/header.cy.ts index 36c50ff21d4..0a1e9981fe5 100755 --- a/packages/reporter/cypress/e2e/header.cy.ts +++ b/packages/reporter/cypress/e2e/header.cy.ts @@ -171,8 +171,19 @@ describe('header', () => { cy.get('.restart').should('not.exist') }) - it('does not display next button', () => { - cy.get('.next').should('not.exist') + it('displays the next button but disabled', () => { + cy.get('.next').should('be.visible').and('be.disabled') + }) + + it('shows "Step (not available)" tooltip when next button is disabled', () => { + cy.get('.next').trigger('mouseover', { force: true }) + cy.get('.cy-tooltip').should('have.text', 'Step (not available)') + }) + + it('does not emit runner:next when disabled next button is clicked', () => { + cy.spy(runner, 'emit') + cy.get('.next').click({ force: true }) + cy.wrap(runner.emit).should('not.be.calledWith', 'runner:next') }) }) }) From c91570bbb6a9649802762f8d72b3bc777a307141 Mon Sep 17 00:00:00 2001 From: eriei013 Date: Mon, 29 Sep 2025 13:20:44 +0200 Subject: [PATCH 4/9] fix: updated next button behaviour and testing --- packages/reporter/cypress/e2e/header.cy.ts | 78 +++++++++++++++++++--- packages/reporter/src/header/controls.tsx | 4 +- packages/reporter/src/lib/app-state.ts | 5 ++ 3 files changed, 74 insertions(+), 13 deletions(-) diff --git a/packages/reporter/cypress/e2e/header.cy.ts b/packages/reporter/cypress/e2e/header.cy.ts index 0a1e9981fe5..e65cc2b5f7a 100755 --- a/packages/reporter/cypress/e2e/header.cy.ts +++ b/packages/reporter/cypress/e2e/header.cy.ts @@ -171,20 +171,76 @@ describe('header', () => { cy.get('.restart').should('not.exist') }) - it('displays the next button but disabled', () => { - cy.get('.next').should('be.visible').and('be.disabled') + it('does not displays the next button', () => { + cy.get('.next').should('not.exist') }) + }) + }) - it('shows "Step (not available)" tooltip when next button is disabled', () => { - cy.get('.next').trigger('mouseover', { force: true }) - cy.get('.cy-tooltip').should('have.text', 'Step (not available)') - }) + describe('when running after resume', () => { + beforeEach(() => { + runner.emit('run:start') + runner.emit('paused') + cy.get('.play').click() + }) - it('does not emit runner:next when disabled next button is clicked', () => { - cy.spy(runner, 'emit') - cy.get('.next').click({ force: true }) - cy.wrap(runner.emit).should('not.be.calledWith', 'runner:next') - }) + it('displays next button as disabled when running after resume', () => { + cy.get('.next').should('be.visible').and('be.disabled') + }) + + it('shows "Step (not available)" tooltip when running after resume', () => { + cy.get('.next').trigger('mouseover', { force: true }) + cy.get('.cy-tooltip').should('have.text', 'Step (not available)') + }) + + it('does not emit runner:next when disabled button is clicked', () => { + cy.spy(runner, 'emit') + cy.get('.next').click({ force: true }) + cy.wrap(runner.emit).should('not.be.calledWith', 'runner:next') + }) + + it('displays stop button when running after resume', () => { + cy.get('.stop').should('be.visible') + }) + }) + + describe('when paused without next command', () => { + beforeEach(() => { + runner.emit('paused') + }) + + it('displays play button', () => { + cy.get('.play').should('be.visible') + }) + + it('displays tooltip for play button', () => { + cy.get('.play').trigger('mouseover') + cy.get('.cy-tooltip').should('have.text', 'Resume C') + }) + + it('emits runner:resume when play button is clicked', () => { + cy.spy(runner, 'emit') + cy.get('.play').click() + cy.wrap(runner.emit).should('be.calledWith', 'runner:resume') + }) + + it('displays next button', () => { + cy.get('.next').should('be.visible').and('be.disabled') + }) + + it('shows "Step (not available)" tooltip when next button is disabled', () => { + cy.get('.next').trigger('mouseover', { force: true }) + cy.get('.cy-tooltip').should('have.text', 'Step (not available)') + }) + + it('does not emit runner:next when disabled next button is clicked', () => { + cy.spy(runner, 'emit') + cy.get('.next').click({ force: true }) + cy.wrap(runner.emit).should('not.be.calledWith', 'runner:next') + }) + + it('does not display stop button', () => { + cy.get('.stop').should('not.exist') }) }) diff --git a/packages/reporter/src/header/controls.tsx b/packages/reporter/src/header/controls.tsx index 264d063727f..540238f7739 100755 --- a/packages/reporter/src/header/controls.tsx +++ b/packages/reporter/src/header/controls.tsx @@ -78,7 +78,7 @@ const Controls: React.FC = observer(({ events = defaultEvents, appState, )} - {(!!appState.nextCommandName || (appState.isRunning && !appState.nextCommandName)) && ( + {(appState.isPaused || (appState.isRunning && appState.isResumed)) && ( Next [N]:{appState.nextCommandName}

:

Step (not available)

} @@ -89,7 +89,7 @@ const Controls: React.FC = observer(({ events = defaultEvents, appState, size='20' variant='outline-dark' aria-label={appState.nextCommandName ? `Next '${appState.nextCommandName}'` : 'Next (not available)'} - className='next' + className='next disabled:hover:border-white/20 disabled:focus:border-white/20' disabled={!appState.nextCommandName} onClick={appState.nextCommandName ? emit('next') : () => { }} > diff --git a/packages/reporter/src/lib/app-state.ts b/packages/reporter/src/lib/app-state.ts index 5ee77c5b79e..f0ebb452e0d 100644 --- a/packages/reporter/src/lib/app-state.ts +++ b/packages/reporter/src/lib/app-state.ts @@ -9,6 +9,7 @@ interface DefaultAppState { pinnedSnapshotId: number | string | null studioActive: boolean studioSingleTestActive: boolean + isResumed: boolean } // these are used for the `reset` method @@ -21,6 +22,7 @@ const defaults: DefaultAppState = { pinnedSnapshotId: null, studioActive: false, studioSingleTestActive: false, + isResumed: false, } class AppState { @@ -35,6 +37,7 @@ class AppState { studioActive = defaults.studioActive studioSingleTestActive = defaults.studioSingleTestActive isStopped = false + isResumed = defaults.isResumed _resetAutoScrollingEnabledTo = true; [key: string]: any @@ -50,6 +53,7 @@ class AppState { pinnedSnapshotId: observable, studioActive: observable, studioSingleTestActive: observable, + isResumed: observable, }) } @@ -66,6 +70,7 @@ class AppState { resume () { this.isPaused = false this.nextCommandName = null + this.isResumed = true } stop () { From 7c66f9ec69eb4cead223a73bcbd4a551a9358c79 Mon Sep 17 00:00:00 2001 From: eriei013 Date: Mon, 29 Sep 2025 14:47:59 +0200 Subject: [PATCH 5/9] docs: add PR reference to changelog entry for #32476 --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 994cecd1cb2..cd5cad566ba 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -18,7 +18,7 @@ _Released 9/23/2025_ **Bugfixes:** - In development mode, Electron `stderr` is piped directly to Cypress' `stderr` to make it clear why Electron failed to start, if it fails to start. Fixes [#32358](https://github.com/cypress-io/cypress/issues/32358). Addressed in [32468](https://github.com/cypress-io/cypress/pull/32468). -- Fixed Next button placement and behavior during test stepping workflow. The button now maintains consistent visibility during stepping sessions, staying visible but disabled when no immediate next command is available, providing clear visual feedback to users about stepping state. Fixes [#32476](https://github.com/cypress-io/cypress/issues/32476). +- Fixed Next button placement and behavior during test stepping workflow. The button now maintains consistent visibility during stepping sessions, staying visible but disabled when no immediate next command is available, providing clear visual feedback to users about stepping state. Fixes [#32476](https://github.com/cypress-io/cypress/issues/32476). Fixed in [#32536](https://github.com/cypress-io/cypress/pull/32536). - Fixed an issue where ESM Cypress configurations were not being interpreted correctly. Fixes [#32493](https://github.com/cypress-io/cypress/issues/32493). Fixed in [#32515](https://github.com/cypress-io/cypress/pull/32515). **Misc:** From d6f1fe9b6e48fa2976fb2ba6bdc1f61e0dea0367 Mon Sep 17 00:00:00 2001 From: eriei013 Date: Mon, 6 Oct 2025 12:39:28 +0200 Subject: [PATCH 6/9] docs: update changelog entryfor #32476 --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index cd5cad566ba..6c2149adf88 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -6,6 +6,7 @@ _Released 10/07/2025 (PENDING)_ **Bugfixes:** - Fixed a regression introduced in [`15.0.0`](https://docs.cypress.io/guides/references/changelog#15-0-0) where `dbus` connection error messages appear in docker containers when launching Cypress. Fixes [#32290](https://github.com/cypress-io/cypress/issues/32290). +- Fixed Next button placement and behavior during test stepping workflow. The button now maintains consistent visibility during stepping sessions, staying visible but disabled when no immediate next command is available, providing clear visual feedback to users about stepping state. Fixes [#32476](https://github.com/cypress-io/cypress/issues/32476). Fixed in [#32536](https://github.com/cypress-io/cypress/pull/32536). ## 15.3.0 @@ -18,7 +19,6 @@ _Released 9/23/2025_ **Bugfixes:** - In development mode, Electron `stderr` is piped directly to Cypress' `stderr` to make it clear why Electron failed to start, if it fails to start. Fixes [#32358](https://github.com/cypress-io/cypress/issues/32358). Addressed in [32468](https://github.com/cypress-io/cypress/pull/32468). -- Fixed Next button placement and behavior during test stepping workflow. The button now maintains consistent visibility during stepping sessions, staying visible but disabled when no immediate next command is available, providing clear visual feedback to users about stepping state. Fixes [#32476](https://github.com/cypress-io/cypress/issues/32476). Fixed in [#32536](https://github.com/cypress-io/cypress/pull/32536). - Fixed an issue where ESM Cypress configurations were not being interpreted correctly. Fixes [#32493](https://github.com/cypress-io/cypress/issues/32493). Fixed in [#32515](https://github.com/cypress-io/cypress/pull/32515). **Misc:** From 39048cd164d0c62597d38de94259ca53d39f62dc Mon Sep 17 00:00:00 2001 From: eriei013 Date: Mon, 6 Oct 2025 13:47:54 +0200 Subject: [PATCH 7/9] fix: reset hasBeenPaused on run:start; replace isResumed with hasBeenPaused; update controls --- packages/reporter/src/header/controls.tsx | 2 +- packages/reporter/src/lib/app-state.ts | 10 +++++----- packages/reporter/src/lib/events.ts | 1 + 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/reporter/src/header/controls.tsx b/packages/reporter/src/header/controls.tsx index 540238f7739..3c8d5f15a7f 100755 --- a/packages/reporter/src/header/controls.tsx +++ b/packages/reporter/src/header/controls.tsx @@ -78,7 +78,7 @@ const Controls: React.FC = observer(({ events = defaultEvents, appState, )} - {(appState.isPaused || (appState.isRunning && appState.isResumed)) && ( + {(appState.isPaused || (appState.isRunning && appState.hasBeenPaused)) && ( Next [N]:{appState.nextCommandName}

:

Step (not available)

} diff --git a/packages/reporter/src/lib/app-state.ts b/packages/reporter/src/lib/app-state.ts index f0ebb452e0d..e9d3fe9b5ad 100644 --- a/packages/reporter/src/lib/app-state.ts +++ b/packages/reporter/src/lib/app-state.ts @@ -9,7 +9,7 @@ interface DefaultAppState { pinnedSnapshotId: number | string | null studioActive: boolean studioSingleTestActive: boolean - isResumed: boolean + hasBeenPaused: boolean } // these are used for the `reset` method @@ -22,7 +22,7 @@ const defaults: DefaultAppState = { pinnedSnapshotId: null, studioActive: false, studioSingleTestActive: false, - isResumed: false, + hasBeenPaused: false, } class AppState { @@ -37,7 +37,7 @@ class AppState { studioActive = defaults.studioActive studioSingleTestActive = defaults.studioSingleTestActive isStopped = false - isResumed = defaults.isResumed + hasBeenPaused = defaults.hasBeenPaused _resetAutoScrollingEnabledTo = true; [key: string]: any @@ -53,7 +53,7 @@ class AppState { pinnedSnapshotId: observable, studioActive: observable, studioSingleTestActive: observable, - isResumed: observable, + hasBeenPaused: observable, }) } @@ -65,12 +65,12 @@ class AppState { pause (nextCommandName?: string) { this.isPaused = true this.nextCommandName = nextCommandName + this.hasBeenPaused = true } resume () { this.isPaused = false this.nextCommandName = null - this.isResumed = true } stop () { diff --git a/packages/reporter/src/lib/events.ts b/packages/reporter/src/lib/events.ts index e47f7fca219..36a238c5ca0 100644 --- a/packages/reporter/src/lib/events.ts +++ b/packages/reporter/src/lib/events.ts @@ -79,6 +79,7 @@ const events: Events = { runner.on('run:start', action('run:start', () => { if (runnablesStore.hasTests) { appState.startRunning() + appState.hasBeenPaused = false } })) From d6e0c2dc52fe3ff0c1a7cafb27715e4613407c9c Mon Sep 17 00:00:00 2001 From: Jennifer Shehane Date: Mon, 6 Oct 2025 10:17:30 -0400 Subject: [PATCH 8/9] Update changelog entry --- cli/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md index 50210140543..64c396650a3 100644 --- a/cli/CHANGELOG.md +++ b/cli/CHANGELOG.md @@ -12,7 +12,6 @@ _Released 10/7/2025 (PENDING)_ **Bugfixes:** - Fixed a regression introduced in [`15.0.0`](https://docs.cypress.io/guides/references/changelog#15-0-0) where `dbus` connection error messages appear in docker containers when launching Cypress. Fixes [#32290](https://github.com/cypress-io/cypress/issues/32290). -- Fixed Next button placement and behavior during test stepping workflow. The button now maintains consistent visibility during stepping sessions, staying visible but disabled when no immediate next command is available, providing clear visual feedback to users about stepping state. Fixes [#32476](https://github.com/cypress-io/cypress/issues/32476). Fixed in [#32536](https://github.com/cypress-io/cypress/pull/32536). - Fixed code frames in `cy.origin` so that failed commands will show the correct line/column within the corresponding spec file. Addressed in [#32597](https://github.com/cypress-io/cypress/pull/32597). - Fixed Cypress cloud requests so that they properly verify SSL certificates. Addressed in [#32629](https://github.com/cypress-io/cypress/pull/32629). @@ -21,6 +20,7 @@ _Released 10/7/2025 (PENDING)_ - Added a dropdown menu in the Command Log that includes actions like Open in IDE and Add New Test in Studio, along with test preferences such as Auto-Scroll. Addresses [#32556](https://github.com/cypress-io/cypress/issues/32556) and [#32558](https://github.com/cypress-io/cypress/issues/32558). Addressed in [#32611](https://github.com/cypress-io/cypress/pull/32611). - Updated the Studio test editing header to include a Back button. This change ensures the Specs button remains functional for expanding or collapsing the specs panel. Addresses [#32556](https://github.com/cypress-io/cypress/issues/32556) and [#32558](https://github.com/cypress-io/cypress/issues/32558). Addressed in [#32611](https://github.com/cypress-io/cypress/pull/32611). - Fixed the Studio panel resizing when dragging. Addressed in [#32584](https://github.com/cypress-io/cypress/pull/32584). +- The Next button now maintains consistent visibility during stepping sessions when using `cy.pause`, staying visible but disabled when no immediate next command is available, providing clear visual feedback to users about stepping state. Addresses [#32476](https://github.com/cypress-io/cypress/issues/32476). Addressed in [#32536](https://github.com/cypress-io/cypress/pull/32536). **Dependency Updates:** From 315977b17794ae2dcda62cfd6f2708196304b9b0 Mon Sep 17 00:00:00 2001 From: Jennifer Shehane Date: Mon, 6 Oct 2025 10:17:51 -0400 Subject: [PATCH 9/9] Update packages/reporter/cypress/e2e/header.cy.ts Co-authored-by: mabela416 --- packages/reporter/cypress/e2e/header.cy.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/reporter/cypress/e2e/header.cy.ts b/packages/reporter/cypress/e2e/header.cy.ts index ec8f8f052d9..fd4f05fde47 100755 --- a/packages/reporter/cypress/e2e/header.cy.ts +++ b/packages/reporter/cypress/e2e/header.cy.ts @@ -200,7 +200,7 @@ describe('header', () => { cy.get('.restart').should('not.exist') }) - it('does not displays the next button', () => { + it('does not display the next button', () => { cy.get('.next').should('not.exist') }) })