fix: only adjust autoscrolling in interactive mode

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

@@ -26,8 +26,9 @@ describe('runnables', () => {
 
     runner = new EventEmitter()
 
-    render = (renderProps: Partial<BaseReporterProps> = {}) => {
+    render = (renderProps: Partial<BaseReporterProps> = {}, cypressMode = 'open') => {
       cy.visit('/').then((win: Cypress.AUTWindow) => {
+        win.__CYPRESS_MODE__ = cypressMode
         win.render({
           runner,
           studioEnabled: renderProps.studioEnabled || false,
@@ -201,5 +202,14 @@ describe('runnables', () => {
         expect(runner.emit).to.be.calledWith('open:file:unified')
       })
     })
+
+    it('adds a scroll listener in open mode', () => {
+      cy.get('[data-cy-scroll-listen]').should('have.attr', 'data-cy-scroll-listen', 'true')
+    })
+
+    it('does not add a scroll listener in run mode', () => {
+      render({}, 'run')
+      cy.get('[data-cy-scroll-listen]').should('have.attr', 'data-cy-scroll-listen', 'false')
+    })
   })
 })

packages/reporter/src/lib/scroller.ts

@@ -15,7 +15,7 @@
 
 import { TimeoutID } from './types'
 
-type UserScrollCallback = () => void
+export type UserScrollCallback = () => void
 
 const PADDING = 100
 

packages/reporter/src/main.tsx

@@ -144,6 +144,7 @@ declare global {
     Cypress: any
     state: AppState
     render: ((props: Partial<BaseReporterProps>) => void)
+    __CYPRESS_MODE__: 'run' | 'open'
   }
 }
 

packages/reporter/src/runnables/runnables.tsx

@@ -9,7 +9,7 @@ import Runnable from './runnable-and-suite'
 import RunnableHeader from './runnable-header'
 import { RunnablesStore, RunnableArray } from './runnables-store'
 import statsStore, { StatsStore } from '../header/stats-store'
-import { Scroller } from '../lib/scroller'
+import { Scroller, UserScrollCallback } from '../lib/scroller'
 import type { AppState } from '../lib/app-state'
 import OpenFileInIDE from '../lib/open-file-in-ide'
 
@@ -176,11 +176,31 @@ class Runnables extends Component<RunnablesProps> {
   componentDidMount () {
     const { scroller, appState } = this.props
 
-    scroller.setContainer(this.refs.container as Element, action('user:scroll:detected', () => {
-      if (appState && appState.isRunning) {
-        appState.temporarilySetAutoScrolling(false)
-      }
-    }))
+    let maybeHandleScroll: UserScrollCallback | undefined = undefined
+
+    const containerEl = this.refs.container as HTMLElement
+
+    if (window.__CYPRESS_MODE__ === 'open') {
+      // in open mode, listen for scroll events so that users can pause the command log auto-scroll
+      // by manually scrolling the command log
+      containerEl.setAttribute('data-cy-scroll-listen', 'true')
+      maybeHandleScroll = action('user:scroll:detected', () => {
+        if (appState && appState.isRunning) {
+          appState.temporarilySetAutoScrolling(false)
+        }
+      })
+    } else {
+      // in run mode, still add the data attribute so the tests have an explicit test locator,
+      // but do not do any scroll handling. No user is scrolling in run mode and it can
+      // cause problems in video recordings by incorrectly turning off autoscrolling,
+      // see issue https://github.com/cypress-io/cypress/issues/16098
+      containerEl.setAttribute('data-cy-scroll-listen', 'false')
+    }
+
+    // we need to always call scroller.setContainer, but the callback can be undefined
+    // so we pass maybeHandleScroll. If we don't, Cypress blows up with an error like
+    // `A container must be set on the scroller with scroller.setContainer(container)`
+    scroller.setContainer(this.refs.container as Element, maybeHandleScroll)
   }
 }