fix: Next button visibility and behaviour during stepping. Fixes #32476

[erikeichmuller]

• Closes Placement of "Stop Running" button in UI mode #32476

Additional details

This change fixes the Next button placement and behavior during test stepping workflow. The issue was that the Next button would appear and disappear inconsistently during stepping, causing poor UX when debugging tests with cy.pause() and cy.debug() commands.

Why was this change necessary?

• Users experienced inconsistent button placement during test stepping
• The Next button would disappear when resuming from pause, causing inconsistent positioning

What is affected by this change?

• AppState: Added isResumed property to track resume status
• Controls component: Updated Next button visibility logic
• Test coverage: Added tests for next button states
• Button styling: Fixed disabled hover effects to prevent highlights

Implementation details:

• New visibility condition: Shows button when isPaused OR (isRunning && isResumed)
• Added isResumed state: Tracks when tests have been resumed from pause
• Test coverage: Tests scenarios including "running after resume"
• Disabled styling: Prevents border highlights on disabled button hover

Button Behavior:

• When paused with next command: Visible and enabled ✅
• When paused without next command: Visible but disabled ✅
• When running after resume: Visible but disabled ✅
• When running (never paused): Hidden ✅

Testing

Added two new test scenarios:

• "when running after resume" - validates the button stays visible but disabled after resuming from pause
• "when paused without next command" - ensures proper disabled state when no next step is available

How has the user experience changed?

Before: Next button would appear and disappear unpredictably during stepping making it difficult to maintain debugging flow.

After: Next button maintains consistent visibility during stepping sessions, staying visible but appropriately disabled when no immediate next command is available, providing clear visual feedback to users about stepping state.

1. Before tests start:

No Next button visible, clean interface

2. Test started (before the first cy.pause):

3. When paused with next command (enabled state):

Next button appears and is clickable when paused with available next command

4. When paused without next command (disabled state):

5. During test continued running after resume (disabled state) - NEW:

Next button stays visible but disabled (gray) during running states, maintaining consistent placement

The same scenario as the image above but when hovered

PR Tasks

• ✅ Have tests been added/updated?
  Yes - Added test coverage in packages/reporter/cypress/e2e/header.cy.ts including two new scenarios: "when running after resume" and "when paused without next command".

• [na] Has a PR for user-facing changes been opened in cypress-documentation?
  This is a bug fix that improves existing functionality rather than adding new features requiring documentation.

• [na] Have API changes been updated in the type definitions?
  No API changes - this is a UI component behavior fix.

---

Note

Makes the reporter Next button consistently visible during stepping (paused or running-after-resume), disabled when no next command exists, with appropriate tooltip and no-op clicks.

• Reporter UI:
  • Controls (packages/reporter/src/header/controls.tsx): Show Next when appState.isPaused or (appState.isRunning && appState.isResumed); disable when no nextCommandName; update aria-label, tooltip to "Step (not available)", and prevent emitting when disabled; adjust disabled hover/focus styles; gray icon when disabled.
  • AppState (packages/reporter/src/lib/app-state.ts): Add isResumed state (default false), make observable; set isResumed=true on resume().
• Tests (packages/reporter/cypress/e2e/header.cy.ts):
  • Add scenarios for "running after resume" and "paused without next command" validating visibility, disabled state, tooltip, and no-op clicks; minor wording tweak.
• Changelog (cli/CHANGELOG.md): Add bugfix entry describing Next button placement/behavior during stepping.

^{Written by Cursor Bugbot for commit 7c66f9e. This will update automatically on new commits. Configure here.}

[CLAassistant]

All committers have signed the CLA.

[cypress-app-bot]

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.

[jennifer-shehane]

@erikeichmuller Thanks! I'm running the tests. It'd be great to have tests around this new behavior. They would be updated here:

cypress/packages/reporter/cypress/e2e/header.cy.ts

Line 165 in 113425c

describe('pause controls', () => {

[erikeichmuller]

@jennifer-shehane Thank you for your comment! I've added and updated tests for the "pause controls", which I believe cover the new behavior. Please let me know if you'd like me to make any further adjustments.

[mabela416]

The next button is always showing when the tests are running but it should only show when the test is paused

Screen.Recording.2025-09-23.at.3.57.43.PM.mov

Also, when the next button is disabled, on hover, the border color changes but it shouldn't

[erikeichmuller]

@mabela416 I understand, but the issue presented this scenario:

As of my understanding the test is running here, but this scenario is not to be implemented then?
The only scenario where the Next button should be shown and disabled is when the test is paused and we don't have a next command, is that correct?

[mabela416]

• Placement of "Stop Running" button in UI mode Placement of "Stop Running" button in UI mode #32476

Yeah that is correct. The scenario on the screenshot is when the test had paused and then you resume so the test continues running which is different from when the tests are running and never paused.

[erikeichmuller]

@mabela416 Thank you for the clarification! I've implemented the changes and also updated the description of the PR.

[mabela416]

Suggested change

	it('does not displays the next button', () => {
	it('does not display the next button', () => {

[mabela416]

@erikeichmuller Can you fix the changelog entry. Other than that, it looks good!