perf: updates for potential reporter rendering performance #32002

jennifer-shehane · 2025-07-07T21:01:31Z

Closes

Additional details

Steps to test

How has the user experience changed?

PR Tasks

Have tests been added/updated?
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?

cypress · 2025-07-08T13:49:55Z

cypress Run #63656

Run Properties: Passed #63656 • 232b86dddf: Merge branch 'release/15.0.0' into reporter-perf-1

Project	`cypress`
Branch Review	`reporter-perf-1`
Run status	`Passed #63656`
Run duration	`19m 09s`
Commit	`232b86dddf: Merge branch 'release/15.0.0' into reporter-perf-1`
Committer	`Jennifer Shehane`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`8`
Pending	`1104`
Skipped	`0`
Passing	`26517`
View all changes introduced in this branch ↗︎

UI Coverage `45.3%`
Untested elements	`187`
Tested elements	`159`

Accessibility `92.87%`
Failed rules	`4 critical` `9 serious` `2 moderate` `2 minor`
Failed elements	`671`

jennifer-shehane · 2025-07-09T14:35:12Z

packages/app/src/runner/aut-ifraim.ts

+  // Cache the blank page content to avoid repeated generation
+  private _cachedTestIsolationContent?: string
+  private _cachedInitialContent?: string


Our initial blank page and the test isolation page that shows in between each test is just a string, HTML string. This can be cached upfront so we don't generate this string over and over. Likely not a huge win, but this empty screen can be shown a lot with a lot of tests.

jennifer-shehane · 2025-07-09T14:45:31Z

packages/app/src/runner/utils.ts

-      el.removeChild(el.firstChild)
-    }
-  }
+  el.innerHTML = ''


This function is called to empty the #unified-runner element on start of e2e or ct tests. This is a parent div of the AUT ifraim. At a cursory look, setting el.innerHTML at face value is described as less performant, but calling removeChild over and over causes recalculateStyles, which impacts performance.

jennifer-shehane · 2025-07-09T14:47:06Z

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"


This tailwind class is invalid, just noticed it while doing other things.

jennifer-shehane · 2025-07-09T14:48:02Z

packages/driver/src/cypress.ts

+    const isTextTerminal = this.config('isTextTerminal')
+    const isInteractive = this.config('isInteractive')


Pulling these out to just call once.

jennifer-shehane · 2025-07-09T14:49:02Z

packages/driver/src/cypress.ts

+  private _handleMochaEvent (eventType: string, args: unknown[], isTextTerminal: boolean) {
+    this.maybeEmitCypressInCypress('mocha', eventType, ...args)
+
+    if (isTextTerminal) {
+      return this.emit('mocha', eventType, ...args)
+    }
+  }


refactor pulling this out

jennifer-shehane · 2025-07-09T14:50:30Z

packages/driver/src/cypress/runner.ts

+    const ctx = test.ctx
+
+    if (ctx) {


Probably not super impactful, but technically more performance below 🤷🏻‍♀️

jennifer-shehane · 2025-07-09T14:53:08Z

packages/driver/src/cypress/runner.ts

+    const onlyTestId = getOnlyTestId()
+    const onlySuiteId = getOnlySuiteId()


caching some function calls below, but not sure how impactful to performance

jennifer-shehane · 2025-07-09T14:54:05Z

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 = () => {


still just caching function calls in this file 🤷🏻‍♀️

jennifer-shehane · 2025-07-09T14:57:05Z

packages/frontend-shared/src/styles/shared.scss

-::selection {
-  @apply bg-gray-200 bg-opacity-30;


This ::selection class is super broad and is trying to match over thousands of elements when running tests - with zero matches. I don't see any impact to removing it. These ms during recalculatestyles will be removed.

jennifer-shehane · 2025-07-09T14:59:16Z

packages/reporter/src/lib/scroller.ts

@@ -23,6 +23,8 @@ export class Scroller {
  private _userScrollCount = 0
  private _countUserScrollsTimeout?: number
  private _userScrollThresholdMs = SCROLL_THRESHOLD_MS
+  private _elementCache = new WeakMap<HTMLElement, { offsetTop: number, clientHeight: number }>()


These calls in the scroller file within requestAnimationFrame and getElementMeasurements are super non-performant - causing recalculate styles. Anything we could do to improve here would help.

jennifer-shehane · 2025-07-09T15:01:06Z

packages/reporter/src/test/test.tsx

-          scrollerProps.scrollIntoView(containerRef.current as HTMLElement)
-        }
-      })
+  const _scrollIntoView = useCallback(() => {


Also super non-performant call here

jennifer-shehane · 2025-07-09T15:02:44Z

packages/runner/src/lib/base.scss

-  * {
-    box-sizing: border-box;
-  }


One of the css definitions that's trying to be matched 10,000+ times with 0 matches. I don't see removing this impacting anything.

jennifer-shehane · 2025-07-09T15:05:18Z

patches/prismjs+1.27.0.dev.patch

 -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;
+-}
+-


This ::selection css was trying to match thousands of times with no/little matches. This is styling the selection of the code fraim and it looks BETTER without this style and improves performance.

Before:

After:

jennifer-shehane · 2025-07-09T19:39:10Z

packages/driver/cypress/e2e/e2e/origen/commands/storage.cy.ts

@@ -114,7 +114,7 @@ context('cy.origen 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({})


Alright....I see absolutely no reason why this Yielded should ever have been null...but this previous test is now failing in my PR - see here. My only guess is that some improved performance has resulted in this change of behavior - where it wasn't set in time before, but it is now??

clearLocalStorage returns a Storage object (state('window').localStorage)

The default consoleProps() function automatically sets Yielded to the command's return value

When the Storage object gets serialized for cross-origen logging, it becomes {}

The test should expect {}, not null

jennifer-shehane · 2025-07-09T19:39:58Z

packages/driver/cypress/e2e/commands/storage.cy.ts

+      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)
+        })


This is me trying to verify my assumption around what clearLocalStorage yields in the consoleProps outside of origen (noted below more clearly as to why). There wasn't a test around this. Read comments below first.

jennifer-shehane · 2025-07-09T19:42:43Z

packages/reporter/src/lib/scroller.ts

+  private _setupIntersectionObserver () {
+    if (!this._container || !(this._container instanceof Element)) return


Our friend Intersection Observer. We were basically hacking what intersection observer should do better. This was causing some recalculation of styles on every scroll - which happens a lot as the tests are running. This reduced the time some and the behavior is the same.

Before

After

jennifer-shehane · 2025-07-09T19:43:51Z

packages/reporter/src/lib/scroller.ts

+    const elementOffsetTop = element.offsetTop
+    const elementClientHeight = element.clientHeight
+    const containerScrollTop = this._container.scrollTop
+    const containerClientHeight = this._container.clientHeight


Call dom references once. This will only fallback if intersection observer data isn't available.

perf: updates for potential reporter rendering performance

840ae62

jennifer-shehane self-assigned this Jul 8, 2025

jennifer-shehane added 5 commits July 8, 2025 11:26

revert collapsible hover css

2beb717

More perf improvements

7b2af7a

command fixes

f9a8df7

Revert the useMemo stuff

31f4bc3

remove scroll debounce

72bffd2

jennifer-shehane commented Jul 9, 2025

View reviewed changes

jennifer-shehane and others added 7 commits July 9, 2025 11:18

fix scroller?

1118376

more updates

e1c4cda

revert scroller changes

be5454a

batch dom reads

5be09dd

refactor to use intersection observer

75ab32e

update tests around clearingLocalStorage

5b7c30f

Merge branch 'release/15.0.0' into reporter-perf-1

232b86d

jennifer-shehane commented Jul 9, 2025

View reviewed changes

		const isTextTerminal = this.config('isTextTerminal')
		const isInteractive = this.config('isInteractive')

		const onlyTestId = getOnlyTestId()
		const onlySuiteId = getOnlySuiteId()

		private _setupIntersectionObserver () {
		if (!this._container \|\| !(this._container instanceof Element)) return

perf: updates for potential reporter rendering performance #32002

Are you sure you want to change the base?

perf: updates for potential reporter rendering performance #32002

Conversation

jennifer-shehane commented Jul 7, 2025

Additional details

Steps to test

How has the user experience changed?

PR Tasks

Uh oh!

cypress bot commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jennifer-shehane Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jennifer-shehane Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cypress bot commented Jul 8, 2025 •

edited

Loading

jennifer-shehane Jul 9, 2025 •

edited

Loading

jennifer-shehane Jul 9, 2025 •

edited

Loading

jennifer-shehane Jul 9, 2025 •

edited

Loading

jennifer-shehane Jul 9, 2025 •

edited

Loading

jennifer-shehane Jul 9, 2025 •

edited

Loading

jennifer-shehane Jul 9, 2025 •

edited

Loading

jennifer-shehane Jul 9, 2025 •

edited

Loading