perf: render command log in an isolated iframe to prevent renderer crash

cli/CHANGELOG.md

@@ -3,6 +3,7 @@
 
 **Performance:**
 
+- Fixed an issue where the browser's renderer process could crash (`We detected that the Chrome Renderer process just crashed`) when the application under test performed heavy layout work driven by a `ResizeObserver` loop (for example, a dialog dynamically showing many form fields with an open dropdown) while the command log was visible. The command log now renders in an isolated document so it no longer shares a layout pass with the application under test. Fixes [#33962](https://github.com/cypress-io/cypress/issues/33962) and [#34218](https://github.com/cypress-io/cypress/issues/34218).
 - Fixed a regression in [14.0.0](#14-0-0) where each message sent from the Cypress server to a Chromium-based browser (including Electron) leaked a small amount of browser memory until the end of the spec. During long, command- or network-heavy specs, this buildup could crash the browser (`We detected that the Chrome Renderer process just crashed`). Fixes [#34226](https://github.com/cypress-io/cypress/issues/34226).
 
 ## 15.18.1

packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts

@@ -17,7 +17,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.specsPageIsVisible()
       cy.contains('TestComponent.spec').click()
       cy.waitForSpecToFinish()
-      cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
+      cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test component')
 
       cy.findByTestId('aut-url-input').should('have.prop', 'readOnly', true)
       cy.findByTestId('select-browser').click()
@@ -30,7 +30,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.get('body').click()
 
       // Temporarily removed from CT since it doesn't work. Invert this assertion when completing https://github.com/cypress-io/cypress/issues/24549
-      cy.get('.hook-open-in-ide').should('not.exist')
+      cy.reporter().find('.hook-open-in-ide').should('not.exist')
 
       cy.get('#unified-runner').should('have.attr', 'style', 'width: 500px; height: 500px; transform: scale(1); position: absolute; margin-left: 225px;')
     })
@@ -40,23 +40,23 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.specsPageIsVisible()
       cy.contains('TestComponent.spec').click()
       cy.waitForSpecToFinish()
-      cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
+      cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test component')
 
       // go to Settings page and back to spec runner
       cy.contains('a', 'Settings').click()
       cy.contains(defaultMessages.settingsPage.device.title).should('be.visible')
       cy.contains('a', 'Specs').click()
       cy.contains('TestComponent.spec').click()
       cy.waitForSpecToFinish()
-      cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
+      cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test component')
 
       // go to Runs page and back to spec runner
       cy.contains('a', 'Runs').click()
       cy.contains(defaultMessages.runs.connect.title).should('be.visible')
       cy.contains('a', 'Specs').click()
       cy.contains('TestComponent.spec').click()
       cy.waitForSpecToFinish()
-      cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
+      cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test component')
     })
 
     // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23159
@@ -87,7 +87,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
 
       cy.visitApp(`/specs/runner?file=${goodFilePath}`)
 
-      cy.contains('renders the test component').should('be.visible')
+      cy.reporter().contains('renders the test component').should('be.visible')
 
       cy.withCtx((ctx, o) => {
         ctx.actions.project.setSpecs(ctx.project.specs.filter((spec) => !spec.absolute.includes(o.path)))
@@ -107,7 +107,7 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
       cy.specsPageIsVisible()
       cy.contains('TestComponent.spec').click()
       cy.waitForSpecToFinish()
-      cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')
+      cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test component')
 
       cy.withCtx((ctx, o) => {
         o.sinon.stub(ctx.actions.browser, 'setActiveBrowserById')

packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts

@@ -16,7 +16,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
 
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
+    cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test content')
     cy.findByTestId('aut-url').should('be.visible')
     cy.findByTestId('select-browser').click()
 
@@ -34,7 +34,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.contains('Canary').should('be.hidden')
     cy.get('body').click()
 
-    cy.get('.hook-open-in-ide').should('exist')
+    cy.reporter().find('.hook-open-in-ide').should('exist')
 
     cy.get('#unified-runner').then((el) => {
       expect(el[0].getAttribute('style')).to.match(/width: 1000px; height: 660px; transform: scale\(0.85\); position: absolute; margin-left: -25px;/)
@@ -51,7 +51,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
 
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
+    cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test content')
     cy.findByTestId('aut-url').should('be.visible')
 
     cy.get('#unified-runner').then((el) => {
@@ -66,23 +66,23 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.specsPageIsVisible()
     cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
+    cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test content')
 
     // go to Settings page and back to spec runner
     cy.contains('a', 'Settings').click()
     cy.contains(defaultMessages.settingsPage.device.title).should('be.visible')
     cy.contains('a', 'Specs').click()
     cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
+    cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test content')
 
     // go to Runs page and back to spec runner
     cy.contains('a', 'Runs').click()
     cy.contains(defaultMessages.runs.connect.title).should('be.visible')
     cy.contains('a', 'Specs').click()
     cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
+    cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test content')
   })
 
   it('redirects to the specs list with error if a spec is not found when navigating', () => {
@@ -112,7 +112,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
 
     cy.visit(`http://localhost:4455/__/#/specs/runner?file=${goodFilePath}`)
 
-    cy.contains('Dom Content').should('be.visible')
+    cy.reporter().contains('Dom Content').should('be.visible')
 
     cy.withCtx((ctx, o) => {
       ctx.actions.project.setSpecs(ctx.project.specs.filter((spec) => !spec.absolute.includes(o.path)))
@@ -133,7 +133,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.contains('blank-contents.spec')
     .click()
 
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the blank page')
+    cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the blank page')
   })
 
   it('shows a compilation error with a malformed spec', { viewportHeight: 596, viewportWidth: 1000 }, () => {
@@ -149,7 +149,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.contains('bad-spec.spec')
     .click()
 
-    cy.contains('No tests found').should('be.visible')
+    cy.reporter().contains('No tests found').should('be.visible')
 
     cy.contains('SyntaxError')
     .should('be.visible')
@@ -171,7 +171,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.contains('blank-contents.spec')
     .click()
 
-    cy.get('[data-model-state="failed"]').should('contain', 'renders the blank page')
+    cy.reporter().find('[data-model-state="failed"]').should('contain', 'renders the blank page')
     // cy.percySnapshot() // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
   })
 
@@ -183,7 +183,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.specsPageIsVisible()
     cy.contains('dom-content.spec').click()
 
-    cy.get('.toggle-specs-wrapper').click()
+    cy.reporter().find('.toggle-specs-wrapper').click()
 
     cy.get('#unified-runner').then((el) => {
       // CSS properties are calculated over inline styles, which means we get a close representation
@@ -198,45 +198,45 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
     cy.specsPageIsVisible()
     cy.contains('withFailure.spec').click()
 
-    cy.get('[data-cy="runnable-header"]').should('be.visible')
+    cy.reporter().find('[data-cy="runnable-header"]').should('be.visible')
     cy.get('body').type('f')
     cy.contains('Search specs')
     cy.contains('withWait.spec').click()
     cy.waitForSpecToFinish()
 
-    cy.get('.passed > .num').should('contain', 4)
-    cy.get('.failed > .num').should('not.contain', 1)
+    cy.reporter().find('.passed > .num').should('contain', 4)
+    cy.reporter().find('.failed > .num').should('not.contain', 1)
   })
 
   it('executes a test, navigates back to the spec list, creates a new spec, and runs the new spec', () => {
     cy.visitApp()
     cy.specsPageIsVisible()
     cy.contains('dom-content.spec').click()
     cy.waitForSpecToFinish()
-    cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
+    cy.reporter().find('[data-model-state="passed"]').should('contain', 'renders the test content')
     cy.contains('a', 'Specs').click()
     cy.withCtx(async (ctx, o) => {
       await ctx.actions.file.writeFileInProject(o.path, `describe('Simple Test', () => { it('true is true', () => { expect(true).to.be.true }) })`)
     }, { path: getPathForPlatform('cypress/e2e/new-file.spec.js') })
 
     cy.contains('new-file.spec').click()
     cy.waitForSpecToFinish()
-    cy.get('[data-model-state="passed"]').should('contain', 'expected true to be true')
+    cy.reporter().find('[data-model-state="passed"]').should('contain', 'expected true to be true')
   })
 
   describe('accessibility', () => {
     it('has no axe violations in specs list panel', () => {
       cy.visitApp()
       cy.specsPageIsVisible()
       cy.contains('withFailure.spec').click()
-      cy.get('button[aria-controls="reporter-inline-specs-list"]').click()
+      cy.reporter().find('button[aria-controls="reporter-inline-specs-list"]').click()
     })
 
     it('has no axe violations in reporter panel', () => {
       cy.visitApp()
       cy.specsPageIsVisible()
       cy.contains('withFailure.spec').click()
-      cy.get('button[aria-controls="reporter-inline-specs-list"]').click()
+      cy.reporter().find('button[aria-controls="reporter-inline-specs-list"]').click()
     })
   })
 })

packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts

@@ -14,9 +14,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
     cy.findByTestId('aut-url').should('be.visible')
     cy.findByTestId('playground-activator').should('not.exist')
 
-    cy.findByLabelText('Stats').within(() => {
-      cy.get('.passed .num', { timeout: 10000 }).should('have.text', '1')
-    })
+    cy.reporter().find('[aria-label="Stats"] .passed .num', { timeout: 10000 }).should('have.text', '1')
 
     // confirm expected content is rendered
     cy.contains('1000x660').should('be.visible')
@@ -43,9 +41,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
     cy.findByTestId('aut-url').contains('URL navigation disabled in component testing').should('be.visible')
     cy.findByTestId('playground-activator').should('not.exist')
 
-    cy.findByLabelText('Stats').within(() => {
-      cy.get('.passed .num', { timeout: 10000 }).should('have.text', '1')
-    })
+    cy.reporter().find('[aria-label="Stats"] .passed .num', { timeout: 10000 }).should('have.text', '1')
 
     // confirm expected content is rendered
     cy.contains('500x500').should('be.visible')
@@ -76,7 +72,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
     cy.visitApp(`/specs/runner?file=cypress/e2e/dom-content.spec.js&${CY_IN_CY_SIMULATE_RUN_MODE}`)
 
     cy.contains('http://localhost:4455/cypress/e2e/dom-content.html').should('be.visible')
-    cy.findByLabelText('Stats').should('not.exist')
+    cy.get('#reporter-frame').should('not.exist')
     cy.findByTestId('specs-list-panel').should('not.be.visible')
     cy.findByTestId('reporter-panel').should('not.be.visible')
     cy.findByTestId('sidebar').should('not.exist')
@@ -100,7 +96,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
     cy.visitApp(`/specs/runner?file=cypress/e2e/dom-content.spec.js&${CY_IN_CY_SIMULATE_RUN_MODE}`)
 
     cy.contains('http://localhost:4455/cypress/e2e/dom-content.html').should('not.exist')
-    cy.findByLabelText('Stats').should('not.exist')
+    cy.get('#reporter-frame').should('not.exist')
     cy.findByTestId('specs-list-panel').should('not.be.visible')
     cy.findByTestId('reporter-panel').should('not.be.visible')
     cy.findByTestId('sidebar').should('not.exist')

packages/app/cypress/e2e/cypress-in-cypress.cy.ts

@@ -131,10 +131,10 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       // validate that the width we set in `withCtx` above is the starting point
         cy.get(`[data-cy="reporter-panel"]`).invoke('outerWidth').should('eq', 800)
 
-        cy.findByTestId('toggle-specs-button').click({ force: true })
+        cy.reporter().find('[data-cy="toggle-specs-button"]').click({ force: true })
 
         // this tooltip text confirms specs list is open
-        cy.contains('Collapse Specs List')
+        cy.reporter().contains('Collapse Specs List')
 
         // we will move the right-hand handle of the Reporter
         // to these positions from the left of the screen
@@ -200,7 +200,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
       cy.contains('dom-content.spec').click()
 
       cy.findByTestId('aut-url-input').invoke('val').should('contain', 'http://localhost:4455/cypress/e2e/dom-content.html')
-      cy.findByLabelText('Stats').should('not.exist')
+      cy.get('#reporter-frame').should('not.exist')
       cy.findByTestId('specs-list-panel').should('not.be.visible')
       cy.findByTestId('reporter-panel').should('not.be.visible')
       cy.findByTestId('sidebar').should('be.visible')
@@ -380,7 +380,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
         )
       })
 
-      cy.contains('Dom Content').should('be.visible')
+      cy.reporter().contains('Dom Content').should('be.visible')
     })
   })
 })

packages/app/cypress/e2e/cypress-origin-communicator.cy.ts

@@ -117,7 +117,7 @@ describe('Cypress In Cypress Origin Communicator', { defaultCommandTimeout: 1000
       cy.waitForSpecToFinish()
       trackRemoveAllListenersOnAllCypressInstances()
 
-      cy.get('[aria-controls="reporter-inline-specs-list"]').type('{enter}')
+      cy.reporter().find('[aria-controls="reporter-inline-specs-list"]').click()
       cy.get('[data-cy="spec-row-item"]').contains('123').click()
       cy.waitForSpecToFinish()
 
@@ -149,19 +149,19 @@ describe('Cypress In Cypress Origin Communicator', { defaultCommandTimeout: 1000
       cy.contains('simple_origin.cy').click()
       cy.waitForSpecToFinish()
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.reporter().find('.passed > .num').should('contain', 1)
       // make sure duplicate logs are not present
-      cy.get('.command-name-origin').find('.command-name-log').should('have.length', 2)
+      cy.reporter().find('.command-name-origin').find('.command-name-log').should('have.length', 2)
 
       cy.findByTestId('sidebar-link-specs-page').click()
       cy.location('hash').should('include', '/specs')
 
       cy.contains('simple_origin.cy').click()
       cy.waitForSpecToFinish()
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.reporter().find('.passed > .num').should('contain', 1)
       // make sure duplicate logs are not present
-      cy.get('.command-name-origin').find('.command-name-log').should('have.length', 2)
+      cy.reporter().find('.command-name-origin').find('.command-name-log').should('have.length', 2)
     })
 
     it('passes upon test reload mid test execution', () => {
@@ -176,9 +176,9 @@ describe('Cypress In Cypress Origin Communicator', { defaultCommandTimeout: 1000
       cy.contains('simple_origin.cy').click()
       cy.waitForSpecToFinish()
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.reporter().find('.passed > .num').should('contain', 1)
       // make sure duplicate logs are not present
-      cy.get('.command-name-origin').find('.command-name-log').should('have.length', 2)
+      cy.reporter().find('.command-name-origin').find('.command-name-log').should('have.length', 2)
 
       cy.withCtx(async (ctx) => {
         const indexPath = ctx.path.join('cypress', 'e2e', 'origin', 'simple_origin.cy.js')
@@ -191,9 +191,9 @@ describe('Cypress In Cypress Origin Communicator', { defaultCommandTimeout: 1000
 
       cy.waitForSpecToFinish()
 
-      cy.get('.passed > .num').should('contain', 1)
+      cy.reporter().find('.passed > .num').should('contain', 1)
       // make sure duplicate logs are not present
-      cy.get('.command-name-origin').find('.command-name-log').should('have.length', 2)
+      cy.reporter().find('.command-name-origin').find('.command-name-log').should('have.length', 2)
     })
   })
 })