fix: update stop button to immediately update UI (#31984)

Author: mschile

cli/CHANGELOG.md

@@ -1,4 +1,12 @@
 <!-- See the ../guides/writing-the-cypress-changelog.md for details on writing the changelog. -->
+## 14.5.2
+
+_Released 7/15/2025 (PENDING)_
+
+**Bugfixes:**
+
+- Fixed a regression introduced in [`14.5.0`](https://docs.cypress.io/guides/references/changelog#14-5-0) where the Stop button would not immediately stop the spec timer. Addresses [#31920](https://github.com/cypress-io/cypress/issues/31920).
+
 ## 14.5.1
 
 _Released 7/01/2025_

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

@@ -289,10 +289,15 @@ describe('src/cypress/runner', () => {
     it('user can stop test execution', () => {
       loadSpec({
         filePath: 'runner/stop-execution.runner.cy.js',
-        passCount: 0,
-        failCount: 1,
       })
 
+      // Click the stop button to stop execution
+      cy.get('.stop').click()
+
+      // Verify the UI updates immediately - stop button disappears, restart appears
+      cy.get('.stop', { timeout: 100 }).should('not.exist')
+      cy.get('.restart', { timeout: 100 }).should('be.visible')
+
       cy.get('.runnable-err-message').should('not.contain', 'ran afterEach even though specs were stopped')
       cy.get('.runnable-err-message').should('contain', 'Cypress test was stopped while running this command.')
     })

packages/driver/src/cypress/runner.ts

@@ -393,7 +393,7 @@ const isRootSuite = (suite) => {
   return suite && suite.root
 }
 
-const overrideRunnerHook = (Cypress, _runner, getTestById, getTest, setTest, getTests, cy) => {
+const overrideRunnerHook = (Cypress, _runner, getTestById, getTest, setTest, getTests, cy, abort) => {
   // bail if our _runner doesn't have a hook.
   // useful in tests
   if (!_runner.hook) {
@@ -557,22 +557,11 @@ const overrideRunnerHook = (Cypress, _runner, getTestById, getTest, setTest, get
         testAfterRun(test, Cypress)
         await testAfterRunAsync(test, Cypress)
 
-        // if the user has stopped the run, we need to abort,
+        // if the user has stopped the run and we are in run mode, we need to abort,
         // this needs to happen after the test:after:run events have fired
         // to ensure protocol can properly handle the abort
-        if (_runner.stopped) {
-          // abort the run
-          _runner.abort()
-
-          // emit the final 'end' event
-          // since our reporter depends on this event
-          // and mocha may never fire this because our
-          // runnable may never finish
-          _runner.emit('end')
-
-          // remove all the listeners
-          // so no more events fire
-          _runner.removeAllListeners()
+        if (_runner.stopped && isRunMode) {
+          abort()
         }
       })]
 
@@ -1407,7 +1396,22 @@ export default {
 
     const getOnlySuiteId = () => _onlySuiteId
 
-    overrideRunnerHook(Cypress, _runner, getTestById, getTest, setTest, getTests, cy)
+    const abort = () => {
+      // abort the run
+      _runner.abort()
+
+      // emit the final 'end' event
+      // since our reporter depends on this event
+      // and mocha may never fire this because our
+      // runnable may never finish
+      _runner.emit('end')
+
+      // remove all the listeners
+      // so no more events fire
+      _runner.removeAllListeners()
+    }
+
+    overrideRunnerHook(Cypress, _runner, getTestById, getTest, setTest, getTests, cy, abort)
 
     // this forces mocha to enqueue a duplicate test in the case of test retries
     const replacePreviousAttemptWith = (test) => {
@@ -1934,6 +1938,12 @@ export default {
         }
 
         _runner.stopped = true
+
+        // if we are in open mode, abort the run immediately
+        // since we want the user feedback to be immediate
+        if (Cypress.config('isInteractive')) {
+          abort()
+        }
       },
 
       getDisplayPropsForLog: LogUtils.getDisplayProps,

system-tests/project-fixtures/runner-specs/cypress/e2e/runner/stop-execution.runner.cy.js

@@ -1,10 +1,9 @@
 describe('stop execution', () => {
   it('test stops while running', () => {
-    cy.timeout(200)
+    // ensure the timeout is long enough so we can verify the
+    // UI changes but not too long so we can verify the error message
+    cy.timeout(2000)
     cy.get('.not-exist')
-    setTimeout(() => {
-      cy.$$('button.stop', parent.document).click()
-    }, 100)
   })
 
   afterEach(function () {