From 840ae620aad71c99eb4653499811dd3a7da996a6 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Mon, 7 Jul 2025 17:01:05 -0400
Subject: [PATCH 01/12] perf: updates for potential reporter rendering
 performance

---
 .../app/src/settings/SettingsContainer.vue    |  2 +-
 .../frontend-shared/src/styles/shared.scss    |  9 -----
 .../reporter/src/collapsible/collapsible.tsx  |  2 +-
 packages/reporter/src/commands/commands.scss  |  9 -----
 .../reporter/src/runnables/runnables.scss     | 26 +++++++-------
 packages/runner/src/lib/base.scss             |  4 ---
 patches/prismjs+1.27.0.dev.patch              | 35 +++++++++----------
 7 files changed, 31 insertions(+), 56 deletions(-)

diff --git a/packages/app/src/settings/SettingsContainer.vue b/packages/app/src/settings/SettingsContainer.vue
index db6d98cde1ac..03cd3a07c2c5 100644
--- a/packages/app/src/settings/SettingsContainer.vue
+++ b/packages/app/src/settings/SettingsContainer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="space-y-[32px] h-[calc(100vh-[64px])] p-[32px] overflow-auto"
+    class="space-y-[32px] h-[calc(100vh-64px)] p-[32px] overflow-auto"
     data-cy="settings"
   >
     <div class="space-y-[24px]">
diff --git a/packages/frontend-shared/src/styles/shared.scss b/packages/frontend-shared/src/styles/shared.scss
index c60c88b0946b..2b214adf38ee 100644
--- a/packages/frontend-shared/src/styles/shared.scss
+++ b/packages/frontend-shared/src/styles/shared.scss
@@ -51,13 +51,4 @@ body {
 // Light scrollbars, anything with light:
 .force-light {
   color-scheme: light;
-}
-
-/**
- * Common theming
- * -------------------------
- */
-
-::selection {
-  @apply bg-gray-200 bg-opacity-30;
 }
\ No newline at end of file
diff --git a/packages/reporter/src/collapsible/collapsible.tsx b/packages/reporter/src/collapsible/collapsible.tsx
index 287a5b768dac..b0810476831b 100644
--- a/packages/reporter/src/collapsible/collapsible.tsx
+++ b/packages/reporter/src/collapsible/collapsible.tsx
@@ -38,7 +38,7 @@ const Collapsible: React.FC<CollapsibleProps> = ({ isOpen: isOpenAsProp = false,
 
   return (
     <div className={cs('collapsible', { 'is-open': isOpen })} ref={containerRef}>
-      <div className={cs('collapsible-header-wrapper', headerClass)}>
+      <div className={cs('collapsible-header-wrapper', headerClass, { 'collapsible-is-open': isOpen })}>
         <div
           aria-expanded={isOpen}
           className='collapsible-header'
diff --git a/packages/reporter/src/commands/commands.scss b/packages/reporter/src/commands/commands.scss
index 697267e79450..e27db9abb148 100644
--- a/packages/reporter/src/commands/commands.scss
+++ b/packages/reporter/src/commands/commands.scss
@@ -450,15 +450,6 @@
     label {
       font-size: 85%;
     }
-
-    > * {
-      display: inline-block;
-      margin-left: 2px;
-    }
-
-    > *:first-child {
-      margin-left: 0;
-    }
   }
 
   .command-error {
diff --git a/packages/reporter/src/runnables/runnables.scss b/packages/reporter/src/runnables/runnables.scss
index 348e451d21f3..b484e09e644a 100644
--- a/packages/reporter/src/runnables/runnables.scss
+++ b/packages/reporter/src/runnables/runnables.scss
@@ -280,7 +280,7 @@ $dotted-line-left-padding: 19px;
         background-color: $gray-1100;
 
         .collapsible-header-text {
-          svg {
+          .collapsible-indicator {
             margin-top: 1px;
           }
         }
@@ -378,24 +378,24 @@ $dotted-line-left-padding: 19px;
           border-radius: 4px;
           box-shadow: 0 0 0 3px #43486159;
           background-color: $reporter-section-background;
+        }
 
-          .runnable-wrapper {
-            border-bottom-left-radius: 0;
+        .collapsible-header-inner {
+          padding: 8px 8px 8px 6px;
+        }
+      }
 
-            .collapsible-header {
-              border: 1px solid $gray-800;
-              border-left: 1px solid transparent;
-              border-radius: 0 4px 0 0;
-            }
+      .collapsible-header-wrapper.collapsible-is-open {
+        border-bottom-left-radius: 0;
 
-            .collapsible-header-inner {
-              background-color: $reporter-section-background;
-            }
-          }
+        .collapsible-header {
+          border: 1px solid $gray-800;
+          border-left: 1px solid transparent;
+          border-radius: 0 4px 0 0;
         }
 
         .collapsible-header-inner {
-          padding: 8px 8px 8px 6px;
+          background-color: $reporter-section-background;
         }
       }
 
diff --git a/packages/runner/src/lib/base.scss b/packages/runner/src/lib/base.scss
index 2a5be5138266..30c9027cf1cf 100644
--- a/packages/runner/src/lib/base.scss
+++ b/packages/runner/src/lib/base.scss
@@ -8,10 +8,6 @@ body {
 
 .runner,
 .reporter-wrap footer {
-  * {
-    box-sizing: border-box;
-  }
-
   &,
   input,
   textarea,
diff --git a/patches/prismjs+1.27.0.dev.patch b/patches/prismjs+1.27.0.dev.patch
index 75558656b333..c949f0d0224d 100644
--- a/patches/prismjs+1.27.0.dev.patch
+++ b/patches/prismjs+1.27.0.dev.patch
@@ -1,42 +1,39 @@
 diff --git a/node_modules/prismjs/themes/prism.css b/node_modules/prismjs/themes/prism.css
-index 5b8ed2d..8173ec6 100644
+index 5b8ed2d..37f3e74 100644
 --- a/node_modules/prismjs/themes/prism.css
 +++ b/node_modules/prismjs/themes/prism.css
-@@ -4,8 +4,8 @@
+@@ -4,8 +4,13 @@
   * @author Lea Verou
   */
  
 -code[class*="language-"],
 -pre[class*="language-"] {
++/*
++ * This is a patch to only target the code blocks that are used in the runner.
++ * This reduces the number of selectors that are attempting to be targeted by the runner.
++ * And improves rendering performance.
++ */
 +code.language-js, code.language-ts,
 +pre.language-js, pre.language-ts {
  	color: black;
  	background: none;
  	text-shadow: 0 1px white;
-@@ -28,39 +28,43 @@ pre[class*="language-"] {
+@@ -28,39 +33,27 @@ pre[class*="language-"] {
  	hyphens: none;
  }
  
 -pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 -code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-+pre.language-js::-moz-selection, pre.language-js ::-moz-selection,
-+pre.language-ts::-moz-selection, pre.language-ts ::-moz-selection,
-+code.language-js::-moz-selection, code.language-js ::-moz-selection,
-+code.language-ts::-moz-selection, code.language-ts ::-moz-selection {
- 	text-shadow: none;
- 	background: #b3d4fc;
- }
- 
+-	text-shadow: none;
+-	background: #b3d4fc;
+-}
+-
 -pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 -code[class*="language-"]::selection, code[class*="language-"] ::selection {
-+pre.language-js::selection, pre.language-js ::selection,
-+pre.language-ts::selection, pre.language-ts ::selection,
-+code.language-js::selection, code.language-js ::selection,
-+code.language-ts::selection, code.language-ts ::selection {
- 	text-shadow: none;
- 	background: #b3d4fc;
- }
- 
+-	text-shadow: none;
+-	background: #b3d4fc;
+-}
+-
  @media print {
 -	code[class*="language-"],
 -	pre[class*="language-"] {

From 2beb7174f8094a438b576203381109052e076982 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Tue, 8 Jul 2025 11:26:14 -0400
Subject: [PATCH 02/12] revert collapsible hover css

---
 packages/reporter/src/collapsible/collapsible.tsx |  2 +-
 packages/reporter/src/runnables/runnables.scss    | 14 --------------
 2 files changed, 1 insertion(+), 15 deletions(-)

diff --git a/packages/reporter/src/collapsible/collapsible.tsx b/packages/reporter/src/collapsible/collapsible.tsx
index b0810476831b..287a5b768dac 100644
--- a/packages/reporter/src/collapsible/collapsible.tsx
+++ b/packages/reporter/src/collapsible/collapsible.tsx
@@ -38,7 +38,7 @@ const Collapsible: React.FC<CollapsibleProps> = ({ isOpen: isOpenAsProp = false,
 
   return (
     <div className={cs('collapsible', { 'is-open': isOpen })} ref={containerRef}>
-      <div className={cs('collapsible-header-wrapper', headerClass, { 'collapsible-is-open': isOpen })}>
+      <div className={cs('collapsible-header-wrapper', headerClass)}>
         <div
           aria-expanded={isOpen}
           className='collapsible-header'
diff --git a/packages/reporter/src/runnables/runnables.scss b/packages/reporter/src/runnables/runnables.scss
index b484e09e644a..89304f93e8f3 100644
--- a/packages/reporter/src/runnables/runnables.scss
+++ b/packages/reporter/src/runnables/runnables.scss
@@ -385,20 +385,6 @@ $dotted-line-left-padding: 19px;
         }
       }
 
-      .collapsible-header-wrapper.collapsible-is-open {
-        border-bottom-left-radius: 0;
-
-        .collapsible-header {
-          border: 1px solid $gray-800;
-          border-left: 1px solid transparent;
-          border-radius: 0 4px 0 0;
-        }
-
-        .collapsible-header-inner {
-          background-color: $reporter-section-background;
-        }
-      }
-
       .runnable-commands-region {
         .hooks-container {
           display: flex;

From 7b2af7a12699b0936031d7f63e62de50552e4e5f Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Tue, 8 Jul 2025 13:01:22 -0400
Subject: [PATCH 03/12] More perf improvements

---
 packages/app/src/runner/aut-iframe.ts         |  17 ++-
 packages/app/src/runner/utils.ts              |   6 +-
 packages/driver/src/cypress.ts                | 109 +++++-------------
 packages/driver/src/cypress/runner.ts         |  70 +++++++----
 .../driver/src/util/serialization/index.ts    |  36 ++++--
 packages/reporter/src/attempts/attempts.tsx   |  25 ++--
 packages/reporter/src/commands/command.tsx    |  60 ++++++----
 packages/reporter/src/hooks/hooks.tsx         |  69 ++++++-----
 packages/reporter/src/lib/scroller.ts         |  93 ++++++++++++---
 packages/reporter/src/main.tsx                |   9 +-
 .../src/runnables/runnable-and-suite.tsx      |  20 +++-
 packages/reporter/src/runnables/runnables.tsx |  25 ++--
 packages/reporter/src/test/test.tsx           |  31 +++--
 13 files changed, 356 insertions(+), 214 deletions(-)

diff --git a/packages/app/src/runner/aut-iframe.ts b/packages/app/src/runner/aut-iframe.ts
index 5548802fa5c7..2e952be7e363 100644
--- a/packages/app/src/runner/aut-iframe.ts
+++ b/packages/app/src/runner/aut-iframe.ts
@@ -20,6 +20,9 @@ export class AutIframe {
   debouncedToggleSelectorPlayground: DebouncedFunc<(isEnabled: any) => void>
   $iframe?: JQuery<HTMLIFrameElement>
   _highlightedEl?: Element
+  // Cache the blank page content to avoid repeated generation
+  private _cachedTestIsolationContent?: string
+  private _cachedInitialContent?: string
 
   constructor (
     private projectName: string,
@@ -50,11 +53,21 @@ export class AutIframe {
   }
 
   _showInitialBlankPage () {
-    this._showContents(blankContents.initial())
+    // Cache the content to avoid repeated HTML generation
+    if (!this._cachedInitialContent) {
+      this._cachedInitialContent = blankContents.initial()
+    }
+
+    this._showContents(this._cachedInitialContent)
   }
 
   _showTestIsolationBlankPage () {
-    this._showContents(blankContents.testIsolationBlankPage())
+    // Cache the content to avoid repeated HTML generation
+    if (!this._cachedTestIsolationContent) {
+      this._cachedTestIsolationContent = blankContents.testIsolationBlankPage()
+    }
+
+    this._showContents(this._cachedTestIsolationContent)
   }
 
   showVisitFailure = (props) => {
diff --git a/packages/app/src/runner/utils.ts b/packages/app/src/runner/utils.ts
index d77df970fe76..86a720ef6111 100644
--- a/packages/app/src/runner/utils.ts
+++ b/packages/app/src/runner/utils.ts
@@ -20,11 +20,7 @@ export function getReporterElement () {
 }
 
 export function empty (el: HTMLElement) {
-  while (el.lastChild) {
-    if (el && el.firstChild) {
-      el.removeChild(el.firstChild)
-    }
-  }
+  el.innerHTML = ''
 }
 
 export const togglePlayground = (autIframe: AutIframe) => {
diff --git a/packages/driver/src/cypress.ts b/packages/driver/src/cypress.ts
index e8086ad1ffc4..b6d88dd68eef 100644
--- a/packages/driver/src/cypress.ts
+++ b/packages/driver/src/cypress.ts
@@ -409,11 +409,23 @@ class $Cypress {
     this.emit('cypress:in:cypress:runner:event', ...args)
   }
 
+  private _handleMochaEvent (eventType: string, args: unknown[], isTextTerminal: boolean) {
+    this.maybeEmitCypressInCypress('mocha', eventType, ...args)
+
+    if (isTextTerminal) {
+      return this.emit('mocha', eventType, ...args)
+    }
+  }
+
   action (eventName, ...args) {
     // normalizes all the various ways
     // other objects communicate intent
     // and 'action' to Cypress
     debug(eventName)
+
+    const isTextTerminal = this.config('isTextTerminal')
+    const isInteractive = this.config('isInteractive')
+
     switch (eventName) {
       case 'recorder:frame':
         return this.emit('recorder:frame', args[0])
@@ -434,13 +446,7 @@ class $Cypress {
           return
         }
 
-        this.maybeEmitCypressInCypress('mocha', 'start', args[0])
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'start', args[0])
-        }
-
-        break
+        return this._handleMochaEvent('start', args, isTextTerminal)
 
       case 'runner:end':
         $sourceMapUtils.destroySourceMapConsumers()
@@ -451,102 +457,43 @@ class $Cypress {
         // TODO: it would be nice to await this emit before preceding.
         this.emit('run:end')
 
-        this.maybeEmitCypressInCypress('mocha', 'end', args[0])
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'end', args[0])
-        }
-
-        break
+        return this._handleMochaEvent('end', args, isTextTerminal)
 
       case 'runner:suite:start':
         // mocha runner started processing a suite
-        this.maybeEmitCypressInCypress('mocha', 'suite', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'suite', ...args)
-        }
+        return this._handleMochaEvent('suite', args, isTextTerminal)
 
-        break
       case 'runner:suite:end':
         // mocha runner finished processing a suite
-        this.maybeEmitCypressInCypress('mocha', 'suite end', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'suite end', ...args)
-        }
+        return this._handleMochaEvent('suite end', args, isTextTerminal)
 
-        break
       case 'runner:hook:start':
         // mocha runner started processing a hook
-
-        this.maybeEmitCypressInCypress('mocha', 'hook', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'hook', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('hook', args, isTextTerminal)
 
       case 'runner:hook:end':
         // mocha runner finished processing a hook
-        this.maybeEmitCypressInCypress('mocha', 'hook end', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'hook end', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('hook end', args, isTextTerminal)
 
       case 'runner:test:start':
         // mocha runner started processing a hook
-        this.maybeEmitCypressInCypress('mocha', 'test', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'test', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('test', args, isTextTerminal)
 
       case 'runner:test:end':
-        this.maybeEmitCypressInCypress('mocha', 'test end', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'test end', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('test end', args, isTextTerminal)
 
       case 'runner:pass':
         // mocha runner calculated a pass
         // this is delayed from when mocha would normally fire it
         // since we fire it after all afterEach hooks have ran
-        this.maybeEmitCypressInCypress('mocha', 'pass', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'pass', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('pass', args, isTextTerminal)
 
       case 'runner:pending':
         // mocha runner calculated a pending test
-        this.maybeEmitCypressInCypress('mocha', 'pending', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'pending', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('pending', args, isTextTerminal)
 
       case 'runner:fail': {
-        this.maybeEmitCypressInCypress('mocha', 'fail', ...args)
-
-        if (this.config('isTextTerminal')) {
-          return this.emit('mocha', 'fail', ...args)
-        }
-
-        break
+        return this._handleMochaEvent('fail', args, isTextTerminal)
       }
       // retry event only fired in mocha version 6+
       // https://github.com/mochajs/mocha/commit/2a76dd7589e4a1ed14dd2a33ab89f182e4c4a050
@@ -554,7 +501,7 @@ class $Cypress {
         // mocha runner calculated a pass
         this.maybeEmitCypressInCypress('mocha', 'retry', ...args)
 
-        if (this.config('isTextTerminal')) {
+        if (isTextTerminal) {
           this.emit('mocha', 'retry', ...args)
         }
 
@@ -567,7 +514,7 @@ class $Cypress {
       case 'runner:test:before:run':
         this.maybeEmitCypressInCypress('mocha', 'test:before:run', args[0])
 
-        if (this.config('isTextTerminal')) {
+        if (isTextTerminal) {
           // needed for handling test retries
           this.emit('mocha', 'test:before:run', args[0])
         }
@@ -602,7 +549,7 @@ class $Cypress {
         this.emit('test:after:run', ...args)
         this.maybeEmitCypressInCypress('mocha', 'test:after:run', args[0])
 
-        if (this.config('isTextTerminal')) {
+        if (isTextTerminal) {
           // needed for calculating wallClockDuration
           // and the timings of after + afterEach hooks
           return this.emit('mocha', 'test:after:run', args[0])
@@ -628,7 +575,7 @@ class $Cypress {
           return // do not emit hidden logs to public apis
         }
 
-        this.runner?.addLog(args[0], this.config('isInteractive'))
+        this.runner?.addLog(args[0], isInteractive)
 
         return this.emit('log:added', ...args)
 
@@ -641,7 +588,7 @@ class $Cypress {
 
         // Cypress logs will only trigger an update every 4 ms so there is a
         // chance the runner has been torn down when the update is triggered.
-        this.runner?.addLog(args[0], this.config('isInteractive'))
+        this.runner?.addLog(args[0], isInteractive)
 
         return this.emit('log:changed', ...args)
 
diff --git a/packages/driver/src/cypress/runner.ts b/packages/driver/src/cypress/runner.ts
index 1522f55687da..19e28f0c3058 100644
--- a/packages/driver/src/cypress/runner.ts
+++ b/packages/driver/src/cypress/runner.ts
@@ -117,15 +117,25 @@ const testAfterRun = (test, Cypress) => {
     // perf loop only through
     // a tests OWN properties and not
     // inherited properties from its shared ctx
-    for (let key of Object.keys(test.ctx || {})) {
-      const value = test.ctx[key]
-
-      if (_.isObject(value) && !mochaCtxKeysRe.test(key)) {
-        // nuke any object properties that come from
-        // cy.as() aliases or anything set from 'this'
-        // so we aggressively perform GC and prevent obj
-        // ref's from building up
-        test.ctx[key] = undefined
+    const ctx = test.ctx
+
+    if (ctx) {
+      // Cache the regex test result and use more efficient iteration
+      const keys = Object.keys(ctx)
+      const keysLength = keys.length
+
+      for (let i = 0; i < keysLength; i++) {
+        const key = keys[i]
+        const value = ctx[key]
+
+        // Cache the object check and regex test for better performance
+        if (value && typeof value === 'object' && !mochaCtxKeysRe.test(key)) {
+          // nuke any object properties that come from
+          // cy.as() aliases or anything set from 'this'
+          // so we aggressively perform GC and prevent obj
+          // ref's from building up
+          ctx[key] = undefined
+        }
       }
     }
 
@@ -776,11 +786,18 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
   }
 
   const onlyIdMode = () => {
-    return !!getOnlyTestId() || !!getOnlySuiteId()
+    // Cache the results to avoid repeated function calls
+    const onlyTestId = getOnlyTestId()
+    const onlySuiteId = getOnlySuiteId()
+
+    return !!onlyTestId || !!onlySuiteId
   }
 
   const suiteHasOnlyId = (suite) => {
-    return suiteHasTest(suite, getOnlyTestId()) || suiteHasSuite(suite, getOnlySuiteId())
+    const onlyTestId = getOnlyTestId()
+    const onlySuiteId = getOnlySuiteId()
+
+    return suiteHasTest(suite, onlyTestId) || suiteHasSuite(suite, onlySuiteId)
   }
 
   const normalizedRunnable = normalizeRunnable(runnable)
@@ -809,11 +826,14 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
     // recursively iterate and normalize all other _runnables
     _.each({ tests: runnableTests, suites: runnableSuites }, (_runnables, type) => {
       if (runnable[type]) {
+        const isOnlyIdMode = onlyIdMode()
+        const onlyTestId = isOnlyIdMode ? getOnlyTestId() : null
+
         return normalizedRunnable[type] = _.compact(_.map(_runnables, (childRunnable) => {
           const normalizedChild = normalize(childRunnable, tests, initialTests, getRunnableId, getHookId, getOnlyTestId, getOnlySuiteId, createEmptyOnlyTest)
 
-          if (type === 'tests' && onlyIdMode()) {
-            if (normalizedChild.id === getOnlyTestId()) {
+          if (type === 'tests' && isOnlyIdMode) {
+            if (normalizedChild.id === onlyTestId) {
               runnable.tests = [childRunnable]
               runnable._onlyTests = [childRunnable]
 
@@ -823,8 +843,11 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
             return null
           }
 
-          if (type === 'suites' && onlyIdMode()) {
-            if (suiteHasOnlyId(childRunnable)) {
+          if (type === 'suites' && isOnlyIdMode) {
+            // Cache suiteHasOnlyId result to avoid repeated calculations
+            const hasOnlyId = suiteHasOnlyId(childRunnable)
+
+            if (hasOnlyId) {
               runnable.suites = [childRunnable]
               runnable._onlySuites = [childRunnable]
 
@@ -849,8 +872,10 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
   const filterOnly = (normalizedSuite, suite) => {
     if (suite._onlyTests.length) {
       const suiteOnlyTests = suite._onlyTests
+      const onlyTestId = getOnlyTestId()
+      const hasOnlyTestId = !!onlyTestId
 
-      if (getOnlyTestId()) {
+      if (hasOnlyTestId) {
         suite.tests = []
         suite._onlyTests = []
         suite._afterAll = []
@@ -862,8 +887,8 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
       normalizedSuite.tests = _.compact(_.map(suiteOnlyTests, (test) => {
         const normalizedTest = normalizeRunnable(test)
 
-        if (getOnlyTestId()) {
-          if (normalizedTest.id === getOnlyTestId()) {
+        if (hasOnlyTestId) {
+          if (normalizedTest.id === onlyTestId) {
             suite.tests = [test]
             suite._onlyTests = [test]
 
@@ -898,12 +923,17 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
 
       suite.suites = []
 
+      const isOnlyIdMode = onlyIdMode()
+
       normalizedSuite.suites = _.compact(_.map(suiteSuites, (childSuite) => {
         const normalizedChildSuite = normalize(childSuite, tests, initialTests, getRunnableId, getHookId, getOnlyTestId, getOnlySuiteId, createEmptyOnlyTest)
 
         if ((suite._onlySuites.indexOf(childSuite) !== -1) || filterOnly(normalizedChildSuite, childSuite)) {
-          if (onlyIdMode()) {
-            if (suiteHasOnlyId(childSuite)) {
+          if (isOnlyIdMode) {
+            // Cache suiteHasOnlyId result
+            const hasOnlyId = suiteHasOnlyId(childSuite)
+
+            if (hasOnlyId) {
               suite.suites.push(childSuite)
 
               return normalizedChildSuite
diff --git a/packages/driver/src/util/serialization/index.ts b/packages/driver/src/util/serialization/index.ts
index 16a2a6cface0..88addd69318b 100644
--- a/packages/driver/src/util/serialization/index.ts
+++ b/packages/driver/src/util/serialization/index.ts
@@ -10,12 +10,21 @@ export const UNSERIALIZABLE = '__cypress_unserializable_value'
 // @ts-ignore
 const structuredCloneRef = window?.structuredClone || structuredClonePonyfill
 
+const isFirefox = () => {
+  // @ts-ignore
+  return Cypress.isBrowser('firefox')
+}
+
+const isNativeStructuredClone = () => {
+  return structuredCloneRef === window?.structuredClone
+}
+
 export const isSerializableInCurrentBrowser = (value: any) => {
   try {
     structuredCloneRef(value)
 
     // @ts-ignore
-    if (Cypress.isBrowser('firefox') && _.isError(value) && structuredCloneRef !== window?.structuredClone) {
+    if (isFirefox() && _.isError(value) && !isNativeStructuredClone()) {
       /**
        * NOTE: structuredClone() was introduced in Firefox 94. Supported versions below 94 need to use the ponyfill
        * to determine whether or not a value can be serialized through postMessage. Since the ponyfill deems Errors
@@ -51,8 +60,11 @@ const convertObjectToSerializableLiteral = (obj): typeof obj => {
 
   do {
     const props = Object.getOwnPropertyNames(currentObjectRef)
+    const propsLength = props.length
+
+    for (let i = 0; i < propsLength; i++) {
+      const prop = props[i]
 
-    props.forEach((prop: string) => {
       try {
         if (!allProps.includes(prop) && isSerializableInCurrentBrowser(currentObjectRef[prop])) {
           allProps.push(prop)
@@ -69,16 +81,19 @@ const convertObjectToSerializableLiteral = (obj): typeof obj => {
           throw err
         }
       }
-    })
+    }
 
     currentObjectRef = Object.getPrototypeOf(currentObjectRef)
   } while (currentObjectRef && currentObjectRef !== Object.prototype && currentObjectRef !== Date.prototype)
 
   const objectAsLiteral = {}
+  const allPropsLength = allProps.length
+
+  for (let i = 0; i < allPropsLength; i++) {
+    const key = allProps[i]
 
-  allProps.forEach((key) => {
     objectAsLiteral[key] = obj[key]
-  })
+  }
 
   return objectAsLiteral
 }
@@ -110,9 +125,14 @@ export const preprocessForSerialization = <T>(valueToSanitize: { [key: string]:
       const sanitizedValueAsLiteral = convertObjectToSerializableLiteral(valueToSanitize) as T
 
       // convert any nested structures as well, if objects or arrays, to literals. This is needed in the case of Proxy objects
-      _.forEach(sanitizedValueAsLiteral as any, (value, key) => {
-        sanitizedValueAsLiteral[key] = preprocessForSerialization(value)
-      })
+      const keys = Object.keys(sanitizedValueAsLiteral as any)
+      const keysLength = keys.length
+
+      for (let i = 0; i < keysLength; i++) {
+        const key = keys[i]
+
+        sanitizedValueAsLiteral[key] = preprocessForSerialization(sanitizedValueAsLiteral[key])
+      }
 
       return sanitizedValueAsLiteral
     } catch (err) {
diff --git a/packages/reporter/src/attempts/attempts.tsx b/packages/reporter/src/attempts/attempts.tsx
index 5156e46d4849..c2c6bd81ccd2 100644
--- a/packages/reporter/src/attempts/attempts.tsx
+++ b/packages/reporter/src/attempts/attempts.tsx
@@ -1,6 +1,6 @@
 import cs from 'classnames'
 import { observer } from 'mobx-react'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useMemo } from 'react'
 
 import type { TestState } from '@packages/types'
 import Agents from '../agents/agents'
@@ -103,19 +103,22 @@ interface AttemptsProps {
 }
 
 const Attempts: React.FC<AttemptsProps> = observer(({ test, scrollIntoView, studioActive }: AttemptsProps) => {
+  // Memoize the mapped attempts to prevent unnecessary re-renders
+  const attemptsElements = useMemo(() => {
+    return test.attempts.map((attempt) => (
+      <Attempt
+        key={attempt.id}
+        scrollIntoView={scrollIntoView}
+        studioActive={studioActive}
+        model={attempt}
+      />
+    ))
+  }, [test.attempts, scrollIntoView, studioActive])
+
   return (<ul className={cs('attempts', {
     'has-multiple-attempts': test.hasMultipleAttempts,
   })}>
-    {test.attempts.map((attempt) => {
-      return (
-        <Attempt
-          key={attempt.id}
-          scrollIntoView={scrollIntoView}
-          studioActive={studioActive}
-          model={attempt}
-        />
-      )
-    })}
+    {attemptsElements}
   </ul>)
 })
 
diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 819102f60fce..408d59b911f2 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import cs from 'classnames'
 import Markdown from 'markdown-it'
 import { observer } from 'mobx-react'
-import React, { useCallback, useState, useEffect } from 'react'
+import React, { useCallback, useState, useEffect, useMemo } from 'react'
 import Tooltip from '@cypress/react-tooltip'
 
 import appState from '../lib/app-state'
@@ -423,21 +423,43 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
   }
 
   const commandName = model.name ? nameClassName(model.name) : ''
-  const groupPlaceholder: Array<JSX.Element> = []
 
-  let groupLevel = 0
+  // Memoize group placeholder generation to prevent unnecessary re-renders
+  const groupPlaceholder = useMemo(() => {
+    const placeholder: Array<JSX.Element> = []
+    let groupLevel = 0
+
+    if (model.groupLevel !== undefined) {
+      // cap the group nesting to 5 levels to keep the log text legible
+      groupLevel = model.groupLevel < 6 ? model.groupLevel : 5
+
+      for (let i = 1; i < groupLevel; i++) {
+        placeholder.push(<span key={`${groupId}-${i}`} className='command-group-block' onClick={(e) => {
+          e.stopPropagation()
+          model.toggleOpen()
+        }} />)
+      }
+    }
 
-  if (model.groupLevel !== undefined) {
-    // cap the group nesting to 5 levels to keep the log text legible
-    groupLevel = model.groupLevel < 6 ? model.groupLevel : 5
+    return { placeholder, groupLevel }
+  }, [model.groupLevel, groupId, model.toggleOpen])
 
-    for (let i = 1; i < groupLevel; i++) {
-      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' onClick={(e) => {
-        e.stopPropagation()
-        model.toggleOpen()
-      }} />)
+  // Memoize children elements to prevent unnecessary re-renders
+  const childrenElements = useMemo(() => {
+    if (!model.hasChildren || !model.isOpen) {
+      return null
     }
-  }
+
+    return model.children.map((child) => (
+      <Command
+        key={child.id}
+        model={child}
+        aliasesWithDuplicates={null}
+        groupId={model.id}
+        scrollIntoView={scrollIntoView}
+      />
+    ))
+  }, [model.hasChildren, model.isOpen, model.children, model.id, scrollIntoView])
 
   const _isPinned = () => {
     return appState.pinnedSnapshotId === model.id
@@ -533,7 +555,7 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
               onMouseEnter={() => _snapshot(true)}
               onMouseLeave={() => _snapshot(false)}
             >
-              {groupPlaceholder}
+              {groupPlaceholder.placeholder}
 
               {model.hasChildren && groupId && (
                 <div className={cs('command-expander-column-group', { 'nested-group-expander': model.groupLevel })} onClick={(e) => {
@@ -551,15 +573,7 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
         <Progress model={model} />
         {model.hasChildren && model.isOpen && (
           <ul className='command-child-container'>
-            {model.children.map((child) => (
-              <Command
-                key={child.id}
-                model={child}
-                aliasesWithDuplicates={null}
-                groupId={model.id}
-                scrollIntoView={scrollIntoView}
-              />
-            ))}
+            {childrenElements}
           </ul>
         )}
       </li>
@@ -570,7 +584,7 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
             testId={model.testId}
             commandId={model.id}
             // if the err is recovered and the current command is a log group, nest the test error within the group
-            groupLevel={model.group && model.hasChildren ? ++groupLevel : groupLevel}
+            groupLevel={model.group && model.hasChildren ? ++groupPlaceholder.groupLevel : groupPlaceholder.groupLevel}
           />
         </li>
       )}
diff --git a/packages/reporter/src/hooks/hooks.tsx b/packages/reporter/src/hooks/hooks.tsx
index ce947e986277..2e8d78ecc308 100644
--- a/packages/reporter/src/hooks/hooks.tsx
+++ b/packages/reporter/src/hooks/hooks.tsx
@@ -1,7 +1,6 @@
 import cs from 'classnames'
-import _ from 'lodash'
 import { observer } from 'mobx-react'
-import React from 'react'
+import React, { useMemo } from 'react'
 import appState, { AppState } from '../lib/app-state'
 import Command from '../commands/command'
 import Collapsible from '../collapsible/collapsible'
@@ -47,25 +46,34 @@ export interface HookProps {
   scrollIntoView: Function
 }
 
-const Hook: React.FC<HookProps> = observer(({ model, showNumber, scrollIntoView }: HookProps) => (
-  <li className={cs('hook-item', { 'hook-failed': model.failed, 'hook-studio': model.isStudio })}>
-    <Collapsible
-      header={
-        <>
-          <HookHeader model={model} number={showNumber ? model.hookNumber : undefined} />
-          {model.invocationDetails && Cypress.testingType !== 'component' && <OpenFileInIDEButton fileDetails={model.invocationDetails} className='hook-open-in-ide' />}
-        </>
-      }
-      headerClass='hook-header'
-      isOpen
-    >
-      <ul className='commands-container'>
-        {_.map(model.commands, (command) => <Command key={command.id} model={command} aliasesWithDuplicates={model.aliasesWithDuplicates} scrollIntoView={scrollIntoView} />)}
-        {model.showStudioPrompt && <StudioNoCommands />}
-      </ul>
-    </Collapsible>
-  </li>
-))
+const Hook: React.FC<HookProps> = observer(({ model, showNumber, scrollIntoView }: HookProps) => {
+  // Memoize the mapped commands to prevent unnecessary re-renders
+  const commandsElements = useMemo(() => {
+    return model.commands.map((command) => (
+      <Command key={command.id} model={command} aliasesWithDuplicates={model.aliasesWithDuplicates} scrollIntoView={scrollIntoView} />
+    ))
+  }, [model.commands, model.aliasesWithDuplicates, scrollIntoView])
+
+  return (
+    <li className={cs('hook-item', { 'hook-failed': model.failed, 'hook-studio': model.isStudio })}>
+      <Collapsible
+        header={
+          <>
+            <HookHeader model={model} number={showNumber ? model.hookNumber : undefined} />
+            {model.invocationDetails && Cypress.testingType !== 'component' && <OpenFileInIDEButton fileDetails={model.invocationDetails} className='hook-open-in-ide' />}
+          </>
+        }
+        headerClass='hook-header'
+        isOpen
+      >
+        <ul className='commands-container'>
+          {commandsElements}
+          {model.showStudioPrompt && <StudioNoCommands />}
+        </ul>
+      </Collapsible>
+    </li>
+  )
+})
 
 Hook.displayName = 'Hook'
 
@@ -81,17 +89,24 @@ export interface HooksProps {
   scrollIntoView: Function
 }
 
-const Hooks: React.FC<HooksProps> = observer(({ state = appState, model, scrollIntoView }: HooksProps) => (
-  <ul className='hooks-container'>
-    {_.map(model.hooks, (hook) => {
+const Hooks: React.FC<HooksProps> = observer(({ state = appState, model, scrollIntoView }: HooksProps) => {
+  // Memoize the mapped hooks to prevent unnecessary re-renders
+  const hooksElements = useMemo(() => {
+    return model.hooks.map((hook) => {
       if (hook.commands.length || (hook.isStudio && state.studioActive && model.state === 'passed')) {
         return <Hook key={hook.hookId} model={hook} scrollIntoView={scrollIntoView} showNumber={model.hookCount[hook.hookName] > 1} />
       }
 
       return null
-    })}
-  </ul>
-))
+    })
+  }, [model.hooks, model.hookCount, model.state, state.studioActive, scrollIntoView])
+
+  return (
+    <ul className='hooks-container'>
+      {hooksElements}
+    </ul>
+  )
+})
 
 Hooks.displayName = 'Hooks'
 
diff --git a/packages/reporter/src/lib/scroller.ts b/packages/reporter/src/lib/scroller.ts
index 9c858b7cfe33..1eb6b4b9f293 100644
--- a/packages/reporter/src/lib/scroller.ts
+++ b/packages/reporter/src/lib/scroller.ts
@@ -23,6 +23,10 @@ export class Scroller {
   private _userScrollCount = 0
   private _countUserScrollsTimeout?: number
   private _userScrollThresholdMs = SCROLL_THRESHOLD_MS
+  private _lastScrollTime = 0
+  private _scrollDebounceMs = 16 // ~60fps
+  private _elementCache = new WeakMap<HTMLElement, { offsetTop: number, clientHeight: number }>()
+  private _cacheTimeout?: number
 
   setContainer (container: Element, onUserScroll?: UserScrollCallback) {
     this._container = container
@@ -66,33 +70,87 @@ export class Scroller {
     })
   }
 
+  private _getElementMeasurements (element: HTMLElement) {
+    const cached = this._elementCache.get(element)
+
+    if (cached) {
+      return cached
+    }
+
+    const measurements = {
+      offsetTop: element.offsetTop,
+      clientHeight: element.clientHeight,
+    }
+
+    this._elementCache.set(element, measurements)
+
+    // Clear cache periodically to prevent memory leaks
+    if (!this._cacheTimeout) {
+      this._cacheTimeout = window.setTimeout(() => {
+        this._elementCache = new WeakMap()
+        this._cacheTimeout = undefined
+      }, 5000) // Clear cache every 5 seconds
+    }
+
+    return measurements
+  }
+
   scrollIntoView (element: HTMLElement) {
     if (!this._container) {
       throw new Error('A container must be set on the scroller with `scroller.setContainer(container)` before trying to scroll an element into view')
     }
 
-    if (this._isFullyVisible(element)) {
+    // Debounce rapid scroll calls
+    const now = Date.now()
+
+    if (now - this._lastScrollTime < this._scrollDebounceMs) {
       return
     }
 
-    // aim to scroll just into view, so that the bottom of the element
-    // is just above the bottom of the container
-    let scrollTopGoal = this._aboveBottom(element)
+    // Cache DOM measurements to avoid multiple reads
+    const containerScrollTop = this._container.scrollTop
+    const elementMeasurements = this._getElementMeasurements(element)
+    const containerClientHeight = this._container.clientHeight
 
-    // can't have a negative scroll, so put it to the top
-    if (scrollTopGoal < 0) {
-      scrollTopGoal = 0
+    // Check if fully visible using cached values
+    if (this._isFullyVisibleWithCache(elementMeasurements, containerScrollTop, containerClientHeight)) {
+      return
     }
 
-    this._userScrollCount--
-    this._container.scrollTop = scrollTopGoal
+    // Use RAF for smooth scrolling
+    requestAnimationFrame(() => {
+      // Re-measure in case element changed during RAF
+      const currentMeasurements = this._getElementMeasurements(element)
+      const currentContainerScrollTop = this._container!.scrollTop
+      const currentContainerClientHeight = this._container!.clientHeight
+
+      // Re-check visibility in case it changed
+      if (this._isFullyVisibleWithCache(currentMeasurements, currentContainerScrollTop, currentContainerClientHeight)) {
+        return
+      }
+
+      // Calculate scroll goal using cached values
+      const scrollTopGoal = Math.max(0, currentMeasurements.offsetTop + currentMeasurements.clientHeight - currentContainerClientHeight + PADDING)
+
+      this._userScrollCount--
+      this._container!.scrollTop = scrollTopGoal
+      this._lastScrollTime = Date.now()
+    })
+  }
+
+  private _isFullyVisibleWithCache (elementMeasurements: { offsetTop: number, clientHeight: number }, containerScrollTop: number, containerClientHeight: number) {
+    return elementMeasurements.offsetTop - containerScrollTop > 0
+           && containerScrollTop > elementMeasurements.offsetTop + elementMeasurements.clientHeight - containerClientHeight + PADDING
   }
 
   _isFullyVisible (element: HTMLElement) {
     if (!this._container) return false
 
-    return element.offsetTop - this._container.scrollTop > 0
-           && this._container.scrollTop > this._aboveBottom(element)
+    const containerScrollTop = this._container.scrollTop
+    const elementMeasurements = this._getElementMeasurements(element)
+    const containerClientHeight = this._container.clientHeight
+
+    return this._isFullyVisibleWithCache(elementMeasurements, containerScrollTop, containerClientHeight)
   }
 
   _aboveBottom (element: HTMLElement) {
@@ -100,9 +158,12 @@ export class Scroller {
     // the offset, causing the running command to be half cut off
     // https://github.com/cypress-io/cypress/issues/228
 
-    const containerHeight = this._container ? this._container.clientHeight : 0
+    if (!this._container) return 0
 
-    return element.offsetTop + element.clientHeight - containerHeight + PADDING
+    const containerClientHeight = this._container.clientHeight
+    const elementMeasurements = this._getElementMeasurements(element)
+
+    return elementMeasurements.offsetTop + elementMeasurements.clientHeight - containerClientHeight + PADDING
   }
 
   getScrollTop () {
@@ -128,6 +189,12 @@ export class Scroller {
     clearTimeout(this._countUserScrollsTimeout)
     this._countUserScrollsTimeout = undefined
     this._userScrollThresholdMs = SCROLL_THRESHOLD_MS
+    this._lastScrollTime = 0
+    this._elementCache = new WeakMap()
+    if (this._cacheTimeout) {
+      clearTimeout(this._cacheTimeout)
+      this._cacheTimeout = undefined
+    }
   }
 
   __setScrollThresholdMs (ms: number) {
diff --git a/packages/reporter/src/main.tsx b/packages/reporter/src/main.tsx
index 4758477bc1a2..45a140b4a403 100644
--- a/packages/reporter/src/main.tsx
+++ b/packages/reporter/src/main.tsx
@@ -2,7 +2,7 @@
 import { action } from 'mobx'
 import { observer } from 'mobx-react'
 import cs from 'classnames'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState, useCallback } from 'react'
 import { createRoot } from 'react-dom/client'
 // @ts-ignore
 import EQ from 'css-element-queries/src/ElementQueries'
@@ -57,6 +57,11 @@ const Reporter: React.FC<SingleReporterProps> = observer(({ appState = appStateD
   const [isMounted, setIsMounted] = useState(false)
   const [isInitialized, setIsInitialized] = useState(false)
 
+  // Memoize the renderReporterHeader function to prevent unnecessary re-renders
+  const memoizedRenderReporterHeader = useCallback((props: ReporterHeaderProps) => {
+    return renderReporterHeader(props)
+  }, [renderReporterHeader])
+
   // this registration needs to happen synchronously and not async inside useEffect or else the events will not be registered and the reporter might hang inside cy-in-cy tests
   if (!isInitialized) {
     events.init({
@@ -112,7 +117,7 @@ const Reporter: React.FC<SingleReporterProps> = observer(({ appState = appStateD
       'studio-active': appState.studioActive,
       'mounted': isMounted,
     })}>
-      {renderReporterHeader({ appState, statsStore, runnablesStore, spec: runnerStore.spec })}
+      {memoizedRenderReporterHeader({ appState, statsStore, runnablesStore, spec: runnerStore.spec })}
       {appState?.isPreferencesMenuOpen ? (
         <TestingPreferences appState={appState} />
       ) : (
diff --git a/packages/reporter/src/runnables/runnable-and-suite.tsx b/packages/reporter/src/runnables/runnable-and-suite.tsx
index 1622e97c4fcc..0e0475a23c29 100644
--- a/packages/reporter/src/runnables/runnable-and-suite.tsx
+++ b/packages/reporter/src/runnables/runnable-and-suite.tsx
@@ -1,5 +1,4 @@
 import cs from 'classnames'
-import _ from 'lodash'
 import { observer } from 'mobx-react'
 import React, { MouseEvent, useCallback, useMemo } from 'react'
 
@@ -17,7 +16,22 @@ import { RunnableArray } from './runnables-store'
 
 // should only show connection dots if the current runnable is a test and the next runnable is a test and is not the last runnable
 export const shouldShowConnectionDots = (runnables: RunnableArray, runnable: SuiteModel | TestModel, runnableIndex: number) => {
-  return runnable.type === 'test' && runnableIndex !== runnables.length - 1 && runnables[runnableIndex + 1].type === 'test'
+  // Early return for non-test runnables
+  if (runnable.type !== 'test') {
+    return false
+  }
+
+  const runnablesLength = runnables.length
+
+  // Early return if this is the last runnable
+  if (runnableIndex === runnablesLength - 1) {
+    return false
+  }
+
+  // Check if next runnable is a test
+  const nextRunnable = runnables[runnableIndex + 1]
+
+  return nextRunnable && nextRunnable.type === 'test'
 }
 
 interface SuiteProps {
@@ -93,7 +107,7 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
 
   const runnablesList = useMemo(() => (
     <ul className='runnables'>
-      {_.map(model.children, (runnable, index) => {
+      {model.children.map((runnable, index) => {
         return (<Runnable
           key={runnable.id}
           model={runnable}
diff --git a/packages/reporter/src/runnables/runnables.tsx b/packages/reporter/src/runnables/runnables.tsx
index a8fd48652011..5a69836266e5 100644
--- a/packages/reporter/src/runnables/runnables.tsx
+++ b/packages/reporter/src/runnables/runnables.tsx
@@ -1,7 +1,6 @@
-import _ from 'lodash'
 import { action } from 'mobx'
 import { observer } from 'mobx-react'
-import React, { MouseEvent, useCallback, useEffect, useRef } from 'react'
+import React, { MouseEvent, useCallback, useEffect, useRef, useMemo } from 'react'
 
 import events, { Events } from '../lib/events'
 import { RunnablesError, RunnablesErrorModel } from './runnable-error'
@@ -91,17 +90,23 @@ interface RunnablesListProps {
 }
 
 const RunnablesList: React.FC<RunnablesListProps> = observer(({ runnables, studioEnabled, canSaveStudioLogs }: RunnablesListProps) => {
+  // Memoize the mapped runnables to prevent unnecessary re-renders
+  const runnablesElements = useMemo(() => {
+    return runnables.map((runnable, index) => (
+      <Runnable
+        key={runnable.id}
+        model={runnable}
+        canSaveStudioLogs={canSaveStudioLogs}
+        studioEnabled={studioEnabled}
+        shouldShowConnectingDots={shouldShowConnectionDots(runnables, runnable, index)}
+      />
+    ))
+  }, [runnables, studioEnabled, canSaveStudioLogs])
+
   return (
     <div className='wrap'>
       <ul className='runnables'>
-        {_.map(runnables, (runnable, index) =>
-          (<Runnable
-            key={runnable.id}
-            model={runnable}
-            canSaveStudioLogs={canSaveStudioLogs}
-            studioEnabled={studioEnabled}
-            shouldShowConnectingDots={shouldShowConnectionDots(runnables, runnable, index)}
-          />))}
+        {runnablesElements}
       </ul>
     </div>
   )
diff --git a/packages/reporter/src/test/test.tsx b/packages/reporter/src/test/test.tsx
index d41b4c1d810c..fae4c1b72d26 100644
--- a/packages/reporter/src/test/test.tsx
+++ b/packages/reporter/src/test/test.tsx
@@ -93,6 +93,7 @@ interface TestProps {
 const Test: React.FC<TestProps> = observer(({ model, events: eventsProps = events, appState: appStateProps = appState, scroller: scrollerProps = scroller, studioEnabled, canSaveStudioLogs }) => {
   const containerRef = useRef(null)
   const [isMounted, setIsMounted] = useState(false)
+  const rafIdRef = useRef<number | null>(null)
 
   useEffect(() => {
     _scrollIntoView()
@@ -110,16 +111,28 @@ const Test: React.FC<TestProps> = observer(({ model, events: eventsProps = event
     eventsProps.emit('studio:init:test', model.id)
   }, [eventsProps, model.id])
 
-  const _scrollIntoView = () => {
-    if (appStateProps.autoScrollingEnabled && (appStateProps.isRunning || appStateProps.studioActive) && model.state !== 'processing') {
-      window.requestAnimationFrame(() => {
-        // since this executes async in a RAF the ref might be null
-        if (containerRef.current) {
-          scrollerProps.scrollIntoView(containerRef.current as HTMLElement)
-        }
-      })
+  const _scrollIntoView = useCallback(() => {
+    // Early return if conditions aren't met
+    if (!appStateProps.autoScrollingEnabled ||
+        (!appStateProps.isRunning && !appStateProps.studioActive) ||
+        model.state === 'processing' ||
+        !containerRef.current) {
+      return
     }
-  }
+
+    // Cancel any pending RAF to prevent multiple calls
+    if (rafIdRef.current) {
+      window.cancelAnimationFrame(rafIdRef.current)
+    }
+
+    rafIdRef.current = window.requestAnimationFrame(() => {
+      rafIdRef.current = null
+      // Double-check ref exists since RAF is async
+      if (containerRef.current) {
+        scrollerProps.scrollIntoView(containerRef.current as HTMLElement)
+      }
+    })
+  }, [appStateProps.autoScrollingEnabled, appStateProps.isRunning, appStateProps.studioActive, model.state, scrollerProps])
 
   const _header = () => {
     return (<>

From f9a8df793dfbc5cb923cb1bea0d5696c017c0d60 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Tue, 8 Jul 2025 14:50:18 -0400
Subject: [PATCH 04/12] command fixes

---
 packages/reporter/src/commands/command.tsx | 61 +++++++++-------------
 1 file changed, 24 insertions(+), 37 deletions(-)

diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 408d59b911f2..b3a92e968538 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -2,7 +2,7 @@ import _ from 'lodash'
 import cs from 'classnames'
 import Markdown from 'markdown-it'
 import { observer } from 'mobx-react'
-import React, { useCallback, useState, useEffect, useMemo } from 'react'
+import React, { useCallback, useState, useEffect } from 'react'
 import Tooltip from '@cypress/react-tooltip'
 
 import appState from '../lib/app-state'
@@ -424,42 +424,21 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
 
   const commandName = model.name ? nameClassName(model.name) : ''
 
-  // Memoize group placeholder generation to prevent unnecessary re-renders
-  const groupPlaceholder = useMemo(() => {
-    const placeholder: Array<JSX.Element> = []
-    let groupLevel = 0
-
-    if (model.groupLevel !== undefined) {
-      // cap the group nesting to 5 levels to keep the log text legible
-      groupLevel = model.groupLevel < 6 ? model.groupLevel : 5
-
-      for (let i = 1; i < groupLevel; i++) {
-        placeholder.push(<span key={`${groupId}-${i}`} className='command-group-block' onClick={(e) => {
-          e.stopPropagation()
-          model.toggleOpen()
-        }} />)
-      }
-    }
+  const groupPlaceholder: Array<JSX.Element> = []
 
-    return { placeholder, groupLevel }
-  }, [model.groupLevel, groupId, model.toggleOpen])
+  let groupLevel = 0
 
-  // Memoize children elements to prevent unnecessary re-renders
-  const childrenElements = useMemo(() => {
-    if (!model.hasChildren || !model.isOpen) {
-      return null
-    }
+  if (model.groupLevel !== undefined) {
+    // cap the group nesting to 5 levels to keep the log text legible
+    groupLevel = model.groupLevel < 6 ? model.groupLevel : 5
 
-    return model.children.map((child) => (
-      <Command
-        key={child.id}
-        model={child}
-        aliasesWithDuplicates={null}
-        groupId={model.id}
-        scrollIntoView={scrollIntoView}
-      />
-    ))
-  }, [model.hasChildren, model.isOpen, model.children, model.id, scrollIntoView])
+    for (let i = 1; i < groupLevel; i++) {
+      groupPlaceholder.push(<span key={`${groupId}-${i}`} className='command-group-block' onClick={(e) => {
+        e.stopPropagation()
+        model.toggleOpen()
+      }} />)
+    }
+  }
 
   const _isPinned = () => {
     return appState.pinnedSnapshotId === model.id
@@ -555,7 +534,7 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
               onMouseEnter={() => _snapshot(true)}
               onMouseLeave={() => _snapshot(false)}
             >
-              {groupPlaceholder.placeholder}
+              {groupPlaceholder}
 
               {model.hasChildren && groupId && (
                 <div className={cs('command-expander-column-group', { 'nested-group-expander': model.groupLevel })} onClick={(e) => {
@@ -573,7 +552,15 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
         <Progress model={model} />
         {model.hasChildren && model.isOpen && (
           <ul className='command-child-container'>
-            {childrenElements}
+            {model.children.map((child) => (
+              <Command
+                key={child.id}
+                model={child}
+                aliasesWithDuplicates={null}
+                groupId={model.id}
+                scrollIntoView={scrollIntoView}
+              />
+            ))}
           </ul>
         )}
       </li>
@@ -584,7 +571,7 @@ const Command: React.FC<CommandProps> = observer(({ model, aliasesWithDuplicates
             testId={model.testId}
             commandId={model.id}
             // if the err is recovered and the current command is a log group, nest the test error within the group
-            groupLevel={model.group && model.hasChildren ? ++groupPlaceholder.groupLevel : groupPlaceholder.groupLevel}
+            groupLevel={model.group && model.hasChildren ? ++groupLevel : groupLevel}
           />
         </li>
       )}

From 31f4bc33bb0928529120910f5a0d5a3c38da8088 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Tue, 8 Jul 2025 15:28:06 -0400
Subject: [PATCH 05/12] Revert the useMemo stuff

---
 packages/reporter/src/attempts/attempts.tsx   | 25 +++----
 packages/reporter/src/hooks/hooks.tsx         | 69 ++++++++-----------
 .../src/runnables/runnable-and-suite.tsx      |  9 +--
 packages/reporter/src/runnables/runnables.tsx | 25 +++----
 4 files changed, 53 insertions(+), 75 deletions(-)

diff --git a/packages/reporter/src/attempts/attempts.tsx b/packages/reporter/src/attempts/attempts.tsx
index c2c6bd81ccd2..5156e46d4849 100644
--- a/packages/reporter/src/attempts/attempts.tsx
+++ b/packages/reporter/src/attempts/attempts.tsx
@@ -1,6 +1,6 @@
 import cs from 'classnames'
 import { observer } from 'mobx-react'
-import React, { useEffect, useState, useMemo } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import type { TestState } from '@packages/types'
 import Agents from '../agents/agents'
@@ -103,22 +103,19 @@ interface AttemptsProps {
 }
 
 const Attempts: React.FC<AttemptsProps> = observer(({ test, scrollIntoView, studioActive }: AttemptsProps) => {
-  // Memoize the mapped attempts to prevent unnecessary re-renders
-  const attemptsElements = useMemo(() => {
-    return test.attempts.map((attempt) => (
-      <Attempt
-        key={attempt.id}
-        scrollIntoView={scrollIntoView}
-        studioActive={studioActive}
-        model={attempt}
-      />
-    ))
-  }, [test.attempts, scrollIntoView, studioActive])
-
   return (<ul className={cs('attempts', {
     'has-multiple-attempts': test.hasMultipleAttempts,
   })}>
-    {attemptsElements}
+    {test.attempts.map((attempt) => {
+      return (
+        <Attempt
+          key={attempt.id}
+          scrollIntoView={scrollIntoView}
+          studioActive={studioActive}
+          model={attempt}
+        />
+      )
+    })}
   </ul>)
 })
 
diff --git a/packages/reporter/src/hooks/hooks.tsx b/packages/reporter/src/hooks/hooks.tsx
index 2e8d78ecc308..ce947e986277 100644
--- a/packages/reporter/src/hooks/hooks.tsx
+++ b/packages/reporter/src/hooks/hooks.tsx
@@ -1,6 +1,7 @@
 import cs from 'classnames'
+import _ from 'lodash'
 import { observer } from 'mobx-react'
-import React, { useMemo } from 'react'
+import React from 'react'
 import appState, { AppState } from '../lib/app-state'
 import Command from '../commands/command'
 import Collapsible from '../collapsible/collapsible'
@@ -46,34 +47,25 @@ export interface HookProps {
   scrollIntoView: Function
 }
 
-const Hook: React.FC<HookProps> = observer(({ model, showNumber, scrollIntoView }: HookProps) => {
-  // Memoize the mapped commands to prevent unnecessary re-renders
-  const commandsElements = useMemo(() => {
-    return model.commands.map((command) => (
-      <Command key={command.id} model={command} aliasesWithDuplicates={model.aliasesWithDuplicates} scrollIntoView={scrollIntoView} />
-    ))
-  }, [model.commands, model.aliasesWithDuplicates, scrollIntoView])
-
-  return (
-    <li className={cs('hook-item', { 'hook-failed': model.failed, 'hook-studio': model.isStudio })}>
-      <Collapsible
-        header={
-          <>
-            <HookHeader model={model} number={showNumber ? model.hookNumber : undefined} />
-            {model.invocationDetails && Cypress.testingType !== 'component' && <OpenFileInIDEButton fileDetails={model.invocationDetails} className='hook-open-in-ide' />}
-          </>
-        }
-        headerClass='hook-header'
-        isOpen
-      >
-        <ul className='commands-container'>
-          {commandsElements}
-          {model.showStudioPrompt && <StudioNoCommands />}
-        </ul>
-      </Collapsible>
-    </li>
-  )
-})
+const Hook: React.FC<HookProps> = observer(({ model, showNumber, scrollIntoView }: HookProps) => (
+  <li className={cs('hook-item', { 'hook-failed': model.failed, 'hook-studio': model.isStudio })}>
+    <Collapsible
+      header={
+        <>
+          <HookHeader model={model} number={showNumber ? model.hookNumber : undefined} />
+          {model.invocationDetails && Cypress.testingType !== 'component' && <OpenFileInIDEButton fileDetails={model.invocationDetails} className='hook-open-in-ide' />}
+        </>
+      }
+      headerClass='hook-header'
+      isOpen
+    >
+      <ul className='commands-container'>
+        {_.map(model.commands, (command) => <Command key={command.id} model={command} aliasesWithDuplicates={model.aliasesWithDuplicates} scrollIntoView={scrollIntoView} />)}
+        {model.showStudioPrompt && <StudioNoCommands />}
+      </ul>
+    </Collapsible>
+  </li>
+))
 
 Hook.displayName = 'Hook'
 
@@ -89,24 +81,17 @@ export interface HooksProps {
   scrollIntoView: Function
 }
 
-const Hooks: React.FC<HooksProps> = observer(({ state = appState, model, scrollIntoView }: HooksProps) => {
-  // Memoize the mapped hooks to prevent unnecessary re-renders
-  const hooksElements = useMemo(() => {
-    return model.hooks.map((hook) => {
+const Hooks: React.FC<HooksProps> = observer(({ state = appState, model, scrollIntoView }: HooksProps) => (
+  <ul className='hooks-container'>
+    {_.map(model.hooks, (hook) => {
       if (hook.commands.length || (hook.isStudio && state.studioActive && model.state === 'passed')) {
         return <Hook key={hook.hookId} model={hook} scrollIntoView={scrollIntoView} showNumber={model.hookCount[hook.hookName] > 1} />
       }
 
       return null
-    })
-  }, [model.hooks, model.hookCount, model.state, state.studioActive, scrollIntoView])
-
-  return (
-    <ul className='hooks-container'>
-      {hooksElements}
-    </ul>
-  )
-})
+    })}
+  </ul>
+))
 
 Hooks.displayName = 'Hooks'
 
diff --git a/packages/reporter/src/runnables/runnable-and-suite.tsx b/packages/reporter/src/runnables/runnable-and-suite.tsx
index 0e0475a23c29..49ad79d65990 100644
--- a/packages/reporter/src/runnables/runnable-and-suite.tsx
+++ b/packages/reporter/src/runnables/runnable-and-suite.tsx
@@ -1,6 +1,7 @@
 import cs from 'classnames'
+import _ from 'lodash'
 import { observer } from 'mobx-react'
-import React, { MouseEvent, useCallback, useMemo } from 'react'
+import React, { MouseEvent, useCallback } from 'react'
 
 import appState, { AppState } from '../lib/app-state'
 import events, { Events } from '../lib/events'
@@ -105,9 +106,9 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
     )
   }, [getHeaderIcon, model.title, studioEnabled, appState.studioActive, _launchStudio])
 
-  const runnablesList = useMemo(() => (
+  const runnablesList = (
     <ul className='runnables'>
-      {model.children.map((runnable, index) => {
+      {_.map(model.children, (runnable, index) => {
         return (<Runnable
           key={runnable.id}
           model={runnable}
@@ -117,7 +118,7 @@ const Suite: React.FC<SuiteProps> = observer(({ eventManager = events, model, st
         />)
       })}
     </ul>
-  ), [model.children, studioEnabled, canSaveStudioLogs])
+  )
 
   return (
     // we don't want to show the collapsible if there are no tests in the suite
diff --git a/packages/reporter/src/runnables/runnables.tsx b/packages/reporter/src/runnables/runnables.tsx
index 5a69836266e5..a8fd48652011 100644
--- a/packages/reporter/src/runnables/runnables.tsx
+++ b/packages/reporter/src/runnables/runnables.tsx
@@ -1,6 +1,7 @@
+import _ from 'lodash'
 import { action } from 'mobx'
 import { observer } from 'mobx-react'
-import React, { MouseEvent, useCallback, useEffect, useRef, useMemo } from 'react'
+import React, { MouseEvent, useCallback, useEffect, useRef } from 'react'
 
 import events, { Events } from '../lib/events'
 import { RunnablesError, RunnablesErrorModel } from './runnable-error'
@@ -90,23 +91,17 @@ interface RunnablesListProps {
 }
 
 const RunnablesList: React.FC<RunnablesListProps> = observer(({ runnables, studioEnabled, canSaveStudioLogs }: RunnablesListProps) => {
-  // Memoize the mapped runnables to prevent unnecessary re-renders
-  const runnablesElements = useMemo(() => {
-    return runnables.map((runnable, index) => (
-      <Runnable
-        key={runnable.id}
-        model={runnable}
-        canSaveStudioLogs={canSaveStudioLogs}
-        studioEnabled={studioEnabled}
-        shouldShowConnectingDots={shouldShowConnectionDots(runnables, runnable, index)}
-      />
-    ))
-  }, [runnables, studioEnabled, canSaveStudioLogs])
-
   return (
     <div className='wrap'>
       <ul className='runnables'>
-        {runnablesElements}
+        {_.map(runnables, (runnable, index) =>
+          (<Runnable
+            key={runnable.id}
+            model={runnable}
+            canSaveStudioLogs={canSaveStudioLogs}
+            studioEnabled={studioEnabled}
+            shouldShowConnectingDots={shouldShowConnectionDots(runnables, runnable, index)}
+          />))}
       </ul>
     </div>
   )

From 72bffd2ab8162d7f7dfaedde59c0779c082c8269 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Tue, 8 Jul 2025 16:37:43 -0400
Subject: [PATCH 06/12] remove scroll debounce

---
 packages/reporter/src/lib/scroller.ts | 27 +++++++--------------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/packages/reporter/src/lib/scroller.ts b/packages/reporter/src/lib/scroller.ts
index 1eb6b4b9f293..5991915d9453 100644
--- a/packages/reporter/src/lib/scroller.ts
+++ b/packages/reporter/src/lib/scroller.ts
@@ -23,8 +23,6 @@ export class Scroller {
   private _userScrollCount = 0
   private _countUserScrollsTimeout?: number
   private _userScrollThresholdMs = SCROLL_THRESHOLD_MS
-  private _lastScrollTime = 0
-  private _scrollDebounceMs = 16 // ~60fps
   private _elementCache = new WeakMap<HTMLElement, { offsetTop: number, clientHeight: number }>()
   private _cacheTimeout?: number
 
@@ -100,13 +98,6 @@ export class Scroller {
       throw new Error('A container must be set on the scroller with `scroller.setContainer(container)` before trying to scroll an element into view')
     }
 
-    // Debounce rapid scroll calls
-    const now = Date.now()
-
-    if (now - this._lastScrollTime < this._scrollDebounceMs) {
-      return
-    }
-
     // Cache DOM measurements to avoid multiple reads
     const containerScrollTop = this._container.scrollTop
     const elementMeasurements = this._getElementMeasurements(element)
@@ -134,7 +125,6 @@ export class Scroller {
 
       this._userScrollCount--
       this._container!.scrollTop = scrollTopGoal
-      this._lastScrollTime = Date.now()
     })
   }
 
@@ -147,10 +137,12 @@ export class Scroller {
     if (!this._container) return false
 
     const containerScrollTop = this._container.scrollTop
-    const elementMeasurements = this._getElementMeasurements(element)
+    const elementOffsetTop = element.offsetTop
+    const elementClientHeight = element.clientHeight
     const containerClientHeight = this._container.clientHeight
 
-    return this._isFullyVisibleWithCache(elementMeasurements, containerScrollTop, containerClientHeight)
+    return elementOffsetTop - containerScrollTop > 0
+           && containerScrollTop > elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
   }
 
   _aboveBottom (element: HTMLElement) {
@@ -161,9 +153,10 @@ export class Scroller {
     if (!this._container) return 0
 
     const containerClientHeight = this._container.clientHeight
-    const elementMeasurements = this._getElementMeasurements(element)
+    const elementOffsetTop = element.offsetTop
+    const elementClientHeight = element.clientHeight
 
-    return elementMeasurements.offsetTop + elementMeasurements.clientHeight - containerClientHeight + PADDING
+    return elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
   }
 
   getScrollTop () {
@@ -189,12 +182,6 @@ export class Scroller {
     clearTimeout(this._countUserScrollsTimeout)
     this._countUserScrollsTimeout = undefined
     this._userScrollThresholdMs = SCROLL_THRESHOLD_MS
-    this._lastScrollTime = 0
-    this._elementCache = new WeakMap()
-    if (this._cacheTimeout) {
-      clearTimeout(this._cacheTimeout)
-      this._cacheTimeout = undefined
-    }
   }
 
   __setScrollThresholdMs (ms: number) {

From 11183764d49f9a341be635b5e9df33dda9e77a8b Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Wed, 9 Jul 2025 11:18:51 -0400
Subject: [PATCH 07/12] fix scroller?

---
 packages/driver/src/cypress/runner.ts | 3 ---
 packages/reporter/src/lib/scroller.ts | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/driver/src/cypress/runner.ts b/packages/driver/src/cypress/runner.ts
index 19e28f0c3058..1cd8e9354f45 100644
--- a/packages/driver/src/cypress/runner.ts
+++ b/packages/driver/src/cypress/runner.ts
@@ -786,7 +786,6 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
   }
 
   const onlyIdMode = () => {
-    // Cache the results to avoid repeated function calls
     const onlyTestId = getOnlyTestId()
     const onlySuiteId = getOnlySuiteId()
 
@@ -844,7 +843,6 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
           }
 
           if (type === 'suites' && isOnlyIdMode) {
-            // Cache suiteHasOnlyId result to avoid repeated calculations
             const hasOnlyId = suiteHasOnlyId(childRunnable)
 
             if (hasOnlyId) {
@@ -930,7 +928,6 @@ const normalize = (runnable, tests, initialTests, getRunnableId, getHookId, getO
 
         if ((suite._onlySuites.indexOf(childSuite) !== -1) || filterOnly(normalizedChildSuite, childSuite)) {
           if (isOnlyIdMode) {
-            // Cache suiteHasOnlyId result
             const hasOnlyId = suiteHasOnlyId(childSuite)
 
             if (hasOnlyId) {
diff --git a/packages/reporter/src/lib/scroller.ts b/packages/reporter/src/lib/scroller.ts
index 5991915d9453..f552f007b125 100644
--- a/packages/reporter/src/lib/scroller.ts
+++ b/packages/reporter/src/lib/scroller.ts
@@ -130,7 +130,7 @@ export class Scroller {
 
   private _isFullyVisibleWithCache (elementMeasurements: { offsetTop: number, clientHeight: number }, containerScrollTop: number, containerClientHeight: number) {
     return elementMeasurements.offsetTop - containerScrollTop > 0
-           && containerScrollTop > elementMeasurements.offsetTop + elementMeasurements.clientHeight - containerClientHeight + PADDING
+           && elementMeasurements.offsetTop + elementMeasurements.clientHeight - containerScrollTop < containerClientHeight - PADDING
   }
 
   _isFullyVisible (element: HTMLElement) {

From e1c4cda29feb6b5ad277fbeb25386f5c1fdb82bd Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Wed, 9 Jul 2025 11:26:33 -0400
Subject: [PATCH 08/12] more updates

---
 packages/reporter/src/lib/scroller.ts | 69 +++++++--------------------
 1 file changed, 16 insertions(+), 53 deletions(-)

diff --git a/packages/reporter/src/lib/scroller.ts b/packages/reporter/src/lib/scroller.ts
index f552f007b125..1815bf8df275 100644
--- a/packages/reporter/src/lib/scroller.ts
+++ b/packages/reporter/src/lib/scroller.ts
@@ -23,8 +23,6 @@ export class Scroller {
   private _userScrollCount = 0
   private _countUserScrollsTimeout?: number
   private _userScrollThresholdMs = SCROLL_THRESHOLD_MS
-  private _elementCache = new WeakMap<HTMLElement, { offsetTop: number, clientHeight: number }>()
-  private _cacheTimeout?: number
 
   setContainer (container: Element, onUserScroll?: UserScrollCallback) {
     this._container = container
@@ -68,69 +66,45 @@ export class Scroller {
     })
   }
 
-  private _getElementMeasurements (element: HTMLElement) {
-    const cached = this._elementCache.get(element)
-
-    if (cached) {
-      return cached
-    }
-
-    const measurements = {
-      offsetTop: element.offsetTop,
-      clientHeight: element.clientHeight,
-    }
-
-    this._elementCache.set(element, measurements)
-
-    // Clear cache periodically to prevent memory leaks
-    if (!this._cacheTimeout) {
-      this._cacheTimeout = window.setTimeout(() => {
-        this._elementCache = new WeakMap()
-        this._cacheTimeout = undefined
-      }, 5000) // Clear cache every 5 seconds
-    }
-
-    return measurements
-  }
-
   scrollIntoView (element: HTMLElement) {
     if (!this._container) {
       throw new Error('A container must be set on the scroller with `scroller.setContainer(container)` before trying to scroll an element into view')
     }
 
-    // Cache DOM measurements to avoid multiple reads
+    // Batch DOM reads for better performance
     const containerScrollTop = this._container.scrollTop
-    const elementMeasurements = this._getElementMeasurements(element)
+    const elementOffsetTop = element.offsetTop
+    const elementClientHeight = element.clientHeight
     const containerClientHeight = this._container.clientHeight
 
-    // Check if fully visible using cached values
-    if (this._isFullyVisibleWithCache(elementMeasurements, containerScrollTop, containerClientHeight)) {
+    // Check if fully visible using batched measurements
+    if (this._isFullyVisibleWithMeasurements(elementOffsetTop, elementClientHeight, containerScrollTop, containerClientHeight)) {
       return
     }
 
     // Use RAF for smooth scrolling
     requestAnimationFrame(() => {
-      // Re-measure in case element changed during RAF
-      const currentMeasurements = this._getElementMeasurements(element)
+      // Re-check with fresh measurements in case element changed
       const currentContainerScrollTop = this._container!.scrollTop
+      const currentElementOffsetTop = element.offsetTop
+      const currentElementClientHeight = element.clientHeight
       const currentContainerClientHeight = this._container!.clientHeight
 
-      // Re-check visibility in case it changed
-      if (this._isFullyVisibleWithCache(currentMeasurements, currentContainerScrollTop, currentContainerClientHeight)) {
+      if (this._isFullyVisibleWithMeasurements(currentElementOffsetTop, currentElementClientHeight, currentContainerScrollTop, currentContainerClientHeight)) {
         return
       }
 
-      // Calculate scroll goal using cached values
-      const scrollTopGoal = Math.max(0, currentMeasurements.offsetTop + currentMeasurements.clientHeight - currentContainerClientHeight + PADDING)
+      // Calculate scroll goal using current measurements
+      const scrollTopGoal = Math.max(0, currentElementOffsetTop + currentElementClientHeight - currentContainerClientHeight + PADDING)
 
       this._userScrollCount--
       this._container!.scrollTop = scrollTopGoal
     })
   }
 
-  private _isFullyVisibleWithCache (elementMeasurements: { offsetTop: number, clientHeight: number }, containerScrollTop: number, containerClientHeight: number) {
-    return elementMeasurements.offsetTop - containerScrollTop > 0
-           && elementMeasurements.offsetTop + elementMeasurements.clientHeight - containerScrollTop < containerClientHeight - PADDING
+  private _isFullyVisibleWithMeasurements (elementOffsetTop: number, elementClientHeight: number, containerScrollTop: number, containerClientHeight: number) {
+    return elementOffsetTop - containerScrollTop > 0
+      && containerScrollTop > elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
   }
 
   _isFullyVisible (element: HTMLElement) {
@@ -141,22 +115,11 @@ export class Scroller {
     const elementClientHeight = element.clientHeight
     const containerClientHeight = this._container.clientHeight
 
-    return elementOffsetTop - containerScrollTop > 0
-           && containerScrollTop > elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
-  }
-
-  _aboveBottom (element: HTMLElement) {
     // add padding, since commands expanding and collapsing can mess with
     // the offset, causing the running command to be half cut off
     // https://github.com/cypress-io/cypress/issues/228
-
-    if (!this._container) return 0
-
-    const containerClientHeight = this._container.clientHeight
-    const elementOffsetTop = element.offsetTop
-    const elementClientHeight = element.clientHeight
-
-    return elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
+    return elementOffsetTop - containerScrollTop > 0
+      && containerScrollTop > elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
   }
 
   getScrollTop () {

From be5454a78d118b17d6173f4544b7bd233742b7d3 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Wed, 9 Jul 2025 13:39:13 -0400
Subject: [PATCH 09/12] revert scroller changes

---
 packages/reporter/src/lib/scroller.ts | 53 +++++++++------------------
 1 file changed, 18 insertions(+), 35 deletions(-)

diff --git a/packages/reporter/src/lib/scroller.ts b/packages/reporter/src/lib/scroller.ts
index 1815bf8df275..9c858b7cfe33 100644
--- a/packages/reporter/src/lib/scroller.ts
+++ b/packages/reporter/src/lib/scroller.ts
@@ -71,55 +71,38 @@ export class Scroller {
       throw new Error('A container must be set on the scroller with `scroller.setContainer(container)` before trying to scroll an element into view')
     }
 
-    // Batch DOM reads for better performance
-    const containerScrollTop = this._container.scrollTop
-    const elementOffsetTop = element.offsetTop
-    const elementClientHeight = element.clientHeight
-    const containerClientHeight = this._container.clientHeight
-
-    // Check if fully visible using batched measurements
-    if (this._isFullyVisibleWithMeasurements(elementOffsetTop, elementClientHeight, containerScrollTop, containerClientHeight)) {
+    if (this._isFullyVisible(element)) {
       return
     }
 
-    // Use RAF for smooth scrolling
-    requestAnimationFrame(() => {
-      // Re-check with fresh measurements in case element changed
-      const currentContainerScrollTop = this._container!.scrollTop
-      const currentElementOffsetTop = element.offsetTop
-      const currentElementClientHeight = element.clientHeight
-      const currentContainerClientHeight = this._container!.clientHeight
+    // aim to scroll just into view, so that the bottom of the element
+    // is just above the bottom of the container
+    let scrollTopGoal = this._aboveBottom(element)
 
-      if (this._isFullyVisibleWithMeasurements(currentElementOffsetTop, currentElementClientHeight, currentContainerScrollTop, currentContainerClientHeight)) {
-        return
-      }
-
-      // Calculate scroll goal using current measurements
-      const scrollTopGoal = Math.max(0, currentElementOffsetTop + currentElementClientHeight - currentContainerClientHeight + PADDING)
-
-      this._userScrollCount--
-      this._container!.scrollTop = scrollTopGoal
-    })
-  }
+    // can't have a negative scroll, so put it to the top
+    if (scrollTopGoal < 0) {
+      scrollTopGoal = 0
+    }
 
-  private _isFullyVisibleWithMeasurements (elementOffsetTop: number, elementClientHeight: number, containerScrollTop: number, containerClientHeight: number) {
-    return elementOffsetTop - containerScrollTop > 0
-      && containerScrollTop > elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
+    this._userScrollCount--
+    this._container.scrollTop = scrollTopGoal
   }
 
   _isFullyVisible (element: HTMLElement) {
     if (!this._container) return false
 
-    const containerScrollTop = this._container.scrollTop
-    const elementOffsetTop = element.offsetTop
-    const elementClientHeight = element.clientHeight
-    const containerClientHeight = this._container.clientHeight
+    return element.offsetTop - this._container.scrollTop > 0
+           && this._container.scrollTop > this._aboveBottom(element)
+  }
 
+  _aboveBottom (element: HTMLElement) {
     // add padding, since commands expanding and collapsing can mess with
     // the offset, causing the running command to be half cut off
     // https://github.com/cypress-io/cypress/issues/228
-    return elementOffsetTop - containerScrollTop > 0
-      && containerScrollTop > elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
+
+    const containerHeight = this._container ? this._container.clientHeight : 0
+
+    return element.offsetTop + element.clientHeight - containerHeight + PADDING
   }
 
   getScrollTop () {

From 5be09dd0f348e238e0acd7668cdfcbe8f5723ccf Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Wed, 9 Jul 2025 13:46:01 -0400
Subject: [PATCH 10/12] batch dom reads

---
 packages/reporter/src/lib/scroller.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/reporter/src/lib/scroller.ts b/packages/reporter/src/lib/scroller.ts
index 9c858b7cfe33..d51d33d23347 100644
--- a/packages/reporter/src/lib/scroller.ts
+++ b/packages/reporter/src/lib/scroller.ts
@@ -91,8 +91,13 @@ export class Scroller {
   _isFullyVisible (element: HTMLElement) {
     if (!this._container) return false
 
-    return element.offsetTop - this._container.scrollTop > 0
-           && this._container.scrollTop > this._aboveBottom(element)
+    const elementOffsetTop = element.offsetTop
+    const elementClientHeight = element.clientHeight
+    const containerScrollTop = this._container.scrollTop
+    const containerClientHeight = this._container.clientHeight
+
+    return elementOffsetTop - containerScrollTop > 0
+      && containerScrollTop > elementOffsetTop + elementClientHeight - containerClientHeight + PADDING
   }
 
   _aboveBottom (element: HTMLElement) {

From 75ab32eb21387c7cf5a7ad2902bbe05b8028e660 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Wed, 9 Jul 2025 14:19:44 -0400
Subject: [PATCH 11/12] refactor to use intersection observer

---
 packages/reporter/src/lib/scroller.ts | 102 +++++++++++++++++++++++++-
 1 file changed, 101 insertions(+), 1 deletion(-)

diff --git a/packages/reporter/src/lib/scroller.ts b/packages/reporter/src/lib/scroller.ts
index d51d33d23347..080b5388a048 100644
--- a/packages/reporter/src/lib/scroller.ts
+++ b/packages/reporter/src/lib/scroller.ts
@@ -23,12 +23,17 @@ export class Scroller {
   private _userScrollCount = 0
   private _countUserScrollsTimeout?: number
   private _userScrollThresholdMs = SCROLL_THRESHOLD_MS
+  private _intersectionObserver: IntersectionObserver | null = null
+  private _mutationObserver: MutationObserver | null = null
+  private _elementVisibilityMap = new WeakMap<HTMLElement, boolean>()
 
   setContainer (container: Element, onUserScroll?: UserScrollCallback) {
     this._container = container
 
     this._userScrollCount = 0
 
+    this._setupIntersectionObserver()
+    this._setupMutationObserver()
     this._listenToScrolls(onUserScroll)
   }
 
@@ -66,15 +71,97 @@ export class Scroller {
     })
   }
 
+  private _setupIntersectionObserver () {
+    if (!this._container || !(this._container instanceof Element)) return
+
+    // Clean up existing observer
+    if (this._intersectionObserver) {
+      this._intersectionObserver.disconnect()
+    }
+
+    this._intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const element = entry.target as HTMLElement
+          // Consider fully visible if intersection ratio is 1.0 (completely visible)
+          // with some tolerance for the padding
+          const isFullyVisible = entry.isIntersecting && entry.intersectionRatio >= 0.95
+
+          this._elementVisibilityMap.set(element, isFullyVisible)
+        })
+      },
+      {
+        root: this._container as Element,
+        threshold: [0, 0.95, 1.0], // Track when element becomes 95% visible
+        rootMargin: `-${PADDING}px 0px 0px 0px`, // Account for padding
+      },
+    )
+  }
+
+  private _setupMutationObserver () {
+    if (!this._container || !(this._container instanceof Element)) return
+
+    // Clean up existing observer
+    if (this._mutationObserver) {
+      this._mutationObserver.disconnect()
+    }
+
+    this._mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        // Watch for added nodes
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const element = node as HTMLElement
+
+            // Observe the new element with intersection observer
+            if (this._intersectionObserver) {
+              this._intersectionObserver.observe(element)
+            }
+
+            // Also observe any child elements that might be scroll targets
+            const childElements = element.querySelectorAll('*')
+
+            childElements.forEach((child) => {
+              if (this._intersectionObserver) {
+                this._intersectionObserver.observe(child as HTMLElement)
+              }
+            })
+          }
+        })
+      })
+    })
+
+    // Start observing the container for DOM changes
+    this._mutationObserver.observe(this._container, {
+      childList: true,
+      subtree: true,
+    })
+  }
+
   scrollIntoView (element: HTMLElement) {
     if (!this._container) {
       throw new Error('A container must be set on the scroller with `scroller.setContainer(container)` before trying to scroll an element into view')
     }
 
-    if (this._isFullyVisible(element)) {
+    // Start observing the element if not already observed
+    if (this._intersectionObserver && !this._elementVisibilityMap.has(element)) {
+      this._intersectionObserver.observe(element)
+    }
+
+    // Check if element is already fully visible using cached intersection data
+    if (this._elementVisibilityMap.get(element)) {
       return
     }
 
+    // Fallback to manual calculation if intersection observer data not available
+    // This happens when the element hasn't been observed yet or the observer isn't ready
+    if (!this._elementVisibilityMap.has(element)) {
+      // this check is less performant than the intersection observer
+      if (this._isFullyVisible(element)) {
+        return
+      }
+    }
+
     // aim to scroll just into view, so that the bottom of the element
     // is just above the bottom of the container
     let scrollTopGoal = this._aboveBottom(element)
@@ -133,6 +220,19 @@ export class Scroller {
     clearTimeout(this._countUserScrollsTimeout)
     this._countUserScrollsTimeout = undefined
     this._userScrollThresholdMs = SCROLL_THRESHOLD_MS
+
+    // Clean up observers
+    if (this._intersectionObserver) {
+      this._intersectionObserver.disconnect()
+      this._intersectionObserver = null
+    }
+
+    if (this._mutationObserver) {
+      this._mutationObserver.disconnect()
+      this._mutationObserver = null
+    }
+
+    this._elementVisibilityMap = new WeakMap()
   }
 
   __setScrollThresholdMs (ms: number) {

From 5b7c30f5616bfc35a35bc4f44d52fc3916443f30 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <shehane.jennifer@gmail.com>
Date: Wed, 9 Jul 2025 15:36:38 -0400
Subject: [PATCH 12/12] update tests around clearingLocalStorage

---
 .../driver/cypress/e2e/commands/storage.cy.ts    | 16 ++++++++++++++++
 .../e2e/e2e/origin/commands/storage.cy.ts        |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/driver/cypress/e2e/commands/storage.cy.ts b/packages/driver/cypress/e2e/commands/storage.cy.ts
index aaef32af29fd..c4f286810668 100644
--- a/packages/driver/cypress/e2e/commands/storage.cy.ts
+++ b/packages/driver/cypress/e2e/commands/storage.cy.ts
@@ -322,6 +322,10 @@ describe('src/cy/commands/storage', () => {
   })
 
   context('#clearLocalStorage', () => {
+    beforeEach(() => {
+      cy.visit('/fixtures/set-storage-on-multiple-origins.html')
+    })
+
     it('passes keys onto Cypress.LocalStorage.clear', () => {
       const clear = cy.spy(Cypress.LocalStorage, 'clear')
 
@@ -406,6 +410,18 @@ describe('src/cy/commands/storage', () => {
           expect(lastLog.get('snapshots')[0]).to.be.an('object')
         })
       })
+
+      it('consoleProps includes the empty storage yielded', () => {
+        const ls = cy.state('window').localStorage
+
+        cy.clearLocalStorage().then(() => {
+          const consoleProps = logs[1].get('consoleProps')()
+
+          expect(consoleProps.name).to.equal('clearLocalStorage')
+          expect(consoleProps.type).to.equal('command')
+          expect(consoleProps.props.Yielded).to.deep.equal(ls)
+        })
+      })
     })
 
     describe('without log', () => {
diff --git a/packages/driver/cypress/e2e/e2e/origin/commands/storage.cy.ts b/packages/driver/cypress/e2e/e2e/origin/commands/storage.cy.ts
index 91ad78e43b6d..6c504f2dcf4c 100644
--- a/packages/driver/cypress/e2e/e2e/origin/commands/storage.cy.ts
+++ b/packages/driver/cypress/e2e/e2e/origin/commands/storage.cy.ts
@@ -114,7 +114,7 @@ context('cy.origin storage', { browser: '!webkit' }, () => {
 
         expect(consoleProps.name).to.equal('clearLocalStorage')
         expect(consoleProps.type).to.equal('command')
-        expect(consoleProps.props.Yielded).to.be.null
+        expect(consoleProps.props.Yielded).to.deep.equal({})
       })
     })
   })