perf: improve performance of pinning snapshots during hover / pin #32951
+445
−118
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…tions (used for snapshots)
jennifer-shehane
changed the title
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
jennifer-shehane
changed the title
| @@ -0,0 +1,137 @@ | |||
| import { AutIframe } from './aut-iframe' | |||
Member
Author
There was a problem hiding this comment.
I don't think these are in an optimal form for unit tests, but it doesn't seem we have vitest or any other convention here but Cypress tests. I'd like to have a test for this, so welcome to if there's a better way to do this.
| @@ -0,0 +1,58 @@ | |||
| import { getElementDimensions } from './dimensions' | |||
Member
Author
There was a problem hiding this comment.
Another 'unit' test
Comment on lines
+11
to
+17
| const style = `border: none !important; margin: 0 !important; padding: 0 !important; position: absolute; top: ${top}px; left: ${left}px; width: ${width}px; height: ${height}px; background-color: black; z-index: 2147483647;` | ||
|
|
||
| const div = document.createElement('div') | ||
|
|
||
| div.className = '__cypress-blackout' | ||
| div.style.cssText = style | ||
| $body.append(div) |
Member
Author
There was a problem hiding this comment.
Probably not helpful much, but looked into this function a bit for the blackout of screenshots.
|
|
||
| const getElementDimensions = ($el: JQuery<HTMLElement>) => { | ||
| const el: HTMLElement = $el.get(0) | ||
|
|
Member
Author
There was a problem hiding this comment.
We should consolidate these but I didn't want to get distracted with this.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Additional details
Improves performance of hovering or pinning a command to highlight elements within a snapshot. The improvements would be most evident when the command queries A LOT of elements. There are a few strategies employed here:
getComputedStylesSteps to test
How has the user experience changed?
Before
When hovering/clicking to pin a snapshot that targets 3,000 elements completely locks up the UI for 15+ seconds. You cannot hover or pin any other snapshots during this time - or see any highlights.
Screen.Recording.2025-11-14.at.12.42.00.PM.mov
After
When hovering/clicking to pin a snapshot that targets 3,000 element - highlights and pinning shows up within 2 seconds (although ALL of the elements are not done highlighting). You can see when all of the elements finish highlighting in my video where the console.log logs when it's complete.
Screen.Recording.2025-11-14.at.12.38.48.PM.mov
You can click and hover around fairly quickly (feels a little laggy) since the previous batch of highlighting now cancels when you go to highlight other snapshots.
Screen.Recording.2025-11-14.at.12.48.46.PM.mov
PR Tasks
cypress-documentation?type definitions?Note
Speeds up Command Log snapshot highlighting by caching getComputedStyle results, batching DOM operations/positioning, and canceling in-flight highlight work; adds tests and minor refactors.
packages/app/src/runner):AutIframe.highlightEl: batch-create highlight layers off-DOM, append viaDocumentFragment, then batch-position withrequestAnimationFrame; add cancelation via_currentHighlightingId.dimensions.ts: cache a singlegetComputedStylecall; returndisplay,transform,zIndex, andoffsetWidth/Height; optimizesetOffset._addElementBoxModelLayers: accept precomputed dimensions, avoid extra style reads; store positions as data attrs; use sharedINT32_MAX.restoreDom/removeHighlightsoptimized to reduce redundant lookups and batch removals.packages/driver/src/dom):dimensions.ts: cache computed styles (padding/border/margin) in one pass.blackout.ts: build blackout div via native DOM and compact style string.getComputedStylecall and no redundant calls when dimensions provided (aut-iframe.cy.tsx,dimensions.cy.tsx).cli/CHANGELOG.mdnoting improved Command Log snapshot highlighting performance.Written by Cursor Bugbot for commit c761e8f. This will update automatically on new commits. Configure here.