perf: limit visibility checks on command log entries in non-performant scenarios (#32937)

* limit number of elements to check visibility on for reporter entries with attached elements

* 100 ct limit

* changelog

* rename stress tests

* make e2e test use configured limit, reduce limit due to crash in electron at count=100

* Update CHANGELOG.md

* fix boundaries

* fix

* improve visibility notice copy

* merge in visibility check skip from log:false entries

* fix command model

* remove dead code from dom stress test

* rm list

* further fix

Author: cacieprins

cli/CHANGELOG.md

@@ -3,6 +3,10 @@
 
 _Released 11/18/2025 (PENDING)_
 
+**Performance:**
+
+- Limits the number of matched elements that are tested for visibility when added to a command log entry. Fixes a crash scenario related to rapid successive DOM additions in conjunction with a large number of elements returned from a query. Addressed in [#32937](https://github.com/cypress-io/cypress/pull/32937).
+
 **Bugfixes:**
 
 - Fixed an issue where [`cy.wrap()`](https://docs.cypress.io/api/commands/wrap) would cause infinite recursion and freeze the Cypress App when called with objects containing circular references. Fixes [#24715](https://github.com/cypress-io/cypress/issues/24715). Addressed in [#32917](https://github.com/cypress-io/cypress/pull/32917).

packages/driver/cypress/e2e/cypress/log.cy.js

@@ -1,4 +1,5 @@
 const { create, Log, LogUtils } = require('@packages/driver/src/cypress/log')
+const { MAX_VISIBILITY_CHECK_ELEMENTS } = require('@packages/types')
 
 const objectDiff = (newAttrs, oldAttrs) => {
   return Object.entries(newAttrs).reduce(
@@ -169,6 +170,55 @@ describe('src/cypress/log', function () {
       expect(log.setElAttrs).to.have.been.called
     })
 
+    it('skips visibility check when numElements exceeds MAX_VISIBILITY_CHECK_ELEMENTS', function () {
+      const log = new Log(this.createSnapshot, this.state, this.config, this.fireChangeEvent)
+      const $el = Cypress.$('<div />')
+
+      // Create a jQuery object with more elements than the limit
+      const $largeSet = Cypress.$()
+
+      for (let i = 0; i < MAX_VISIBILITY_CHECK_ELEMENTS + 1; i++) {
+        $largeSet.push($el.clone()[0])
+      }
+
+      log.set({ $el: $largeSet })
+      const attrs = log.get()
+
+      expect(attrs.numElements).to.eq(MAX_VISIBILITY_CHECK_ELEMENTS + 1)
+      expect(attrs.visible).to.be.undefined
+    })
+
+    describe('when log is hidden', function () {
+      it('does not filter by :visible when setting el attributes', function () {
+        const log = new Log(this.createSnapshot, this.state, this.config, this.fireChangeEvent)
+
+        log.set({ hidden: true })
+        const el = cy.$$('<div />')
+
+        cy.spy(el, 'filter')
+        log.set({ $el: el })
+        expect(el.filter).not.to.have.been.called
+      })
+    })
+
+    it('performs visibility check when numElements is within limit', function () {
+      const log = new Log(this.createSnapshot, this.state, this.config, this.fireChangeEvent)
+      const $el = Cypress.$('<div />')
+
+      // Create a jQuery object with elements within the limit
+      const $smallSet = Cypress.$()
+
+      for (let i = 0; i < MAX_VISIBILITY_CHECK_ELEMENTS; i++) {
+        $smallSet.push($el.clone()[0])
+      }
+
+      log.set({ $el: $smallSet })
+      const attrs = log.get()
+
+      expect(attrs.numElements).to.eq(MAX_VISIBILITY_CHECK_ELEMENTS)
+      expect(attrs.visible).to.be.a('boolean')
+    })
+
     it('only triggers change event if the log has already triggered the add event', function () {
       const log = new Log(this.createSnapshot, this.state, this.config, this.fireChangeEvent)
 

packages/driver/cypress/e2e/memory/dom-stress-test.cy.js

@@ -0,0 +1,64 @@
+/**
+ * DOM Stress Tests
+ *
+ * This test suite is designed to test browser stability and Cypress performance
+ * when dealing with extremely large non-virtualized DOM trees (up to 100,000 DOM nodes).
+ *
+ * These tests verify that Cypress can handle pages with massive DOM trees without
+ * crashing, which is important for testing applications that may have performance
+ * issues or anti-patterns like rendering all list items at once instead of using
+ * virtual scrolling.
+ *
+ * Test scenarios include:
+ * - Loading lists with 100 to 100,000 DOM elements rendered simultaneously
+ * - Scrolling performance with large DOM trees
+ * - Browser stability under memory pressure from massive DOM trees
+ * - Rapid scrolling patterns that stress the browser
+ */
+
+describe(`DOM Stress Tests`, () => {
+  const counts = [
+    100,
+    1000,
+    3992,
+    10000,
+  ]
+
+  for (const count of counts) {
+    describe(`basic list (${count} count)`, () => {
+      beforeEach(() => {
+        cy.log(`loading basic list with ${count}items`)
+        cy.visit('/fixtures/dom-stress-test.html')
+        cy.get('input[data-cy="item-count"]').clear().type(count)
+        cy.get('input[data-cy="list-id"]').clear().type('basic-list')
+        cy.get('button[data-cy="add-list"]').click()
+      })
+
+      it(`should load the large DOM tree (${count} count) without crashing`, () => {
+        cy.get('#basic-list .item')
+        .should('have.length.greaterThan', 0, { log: false })
+      })
+
+      it('handles normal scrolling without crashing', () => {
+        cy.get('#basic-list').scrollTo(0, 1000)
+        cy.get('#basic-list').scrollTo(0, 2000)
+        cy.get('#basic-list').scrollTo(0, 5000)
+      })
+
+      it('handles rapid scrolling without crashing', () => {
+        cy.get('#basic-list').scrollTo(0, 100)
+        cy.get('#basic-list').scrollTo(0, 300)
+        cy.get('#basic-list').scrollTo(0, 600)
+        cy.get('#basic-list').scrollTo(0, 1000)
+        cy.get('#basic-list').scrollTo(0, 1500)
+        cy.get('#basic-list').scrollTo(0, 2000)
+      })
+
+      it('handles stress scrolling without crashing', () => {
+        cy.get('button[data-cy="stress-scroll"]').click()
+        cy.wait(2000)
+        cy.get('#basic-list').scrollTo(0, 10000)
+      })
+    })
+  }
+})