perf: improve performance of pinning snapshots during hover / pin #32951
+441
−117
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
cypress
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Project |
cypress
|
| Branch Review |
snapshot-reduce-get-computed-style
|
| Run status |
|
| Run duration | 18m 45s |
| Commit |
|
| Committer | Jennifer Shehane |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
2
|
Flaky
|
10
|
Pending
|
1098
|
Skipped
|
4
|
Passing
|
26595
|
| View all changes introduced in this branch ↗︎ | |
Warning
Partial Report: The results for the Application Quality reports may be incomplete.
UI Coverage
45.61%
|
|
|---|---|
|
Untested elements
|
187
|
|
Tested elements
|
161
|
Accessibility
98%
|
|
|---|---|
|
Failed rules
|
4 critical
8 serious
2 moderate
2 minor
|
|
Failed elements
|
101
|
Tests for review
src/runner/aut-iframe.cy.tsx • 2 failed tests • app-ct
issues/28527.cy.ts • 1 flaky test • 5x-driver-electron
| Test | Artifacts | |
|---|---|---|
| issue 28527 > fails and then retries and verifies about:blank is not displayed |
Test Replay
Screenshots
|
|
commands/querying/querying.cy.ts • 1 flaky test • 5x-driver-chrome
| Test | Artifacts | |
|---|---|---|
| ... > intercept aliases > returns null if no xhr is found |
Test Replay
|
|
issues/28527.cy.ts • 1 flaky test • 5x-driver-chrome
| Test | Artifacts | |
|---|---|---|
| issue 28527 > fails and then retries and verifies about:blank is not displayed |
Test Replay
Screenshots
|
|
commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-firefox
| Test | Artifacts | |||||||
|---|---|---|---|---|---|---|---|---|
| ... > stops waiting when an xhr request is canceled |
| |||||||
| Test | Artifacts | |
|---|---|---|
| src/cy/commands/files > #readFile > retries to read when ENOENT |
The first 5 flaky specs are shown, see all 10 specs in Cypress Cloud. | |
![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 snapshot element highlighting by batching DOM/offset work, caching computed styles, and canceling in-flight operations, with supporting tests and minor driver optimizations.
setOffsetviarequestAnimationFrame; add cancelation with an operation id; reduce redundant_contents()/DOM queries; optimizeremoveHighlights._addElementBoxModelLayersnow accepts precomputed dimensions, avoids extragetComputedStyle, sets transform/zIndex from dimensions, stores positions in data attrs, and defers offset setting.packages/app/src/runner/dimensions.ts): Cache a singlegetComputedStylecall; exposedisplay,transform,zIndex, andoffsetWidth/offsetHeight; optimizesetOffset.aut-iframe.cy.tsxanddimensions.cy.tsxto assert minimalgetComputedStylecalls and layering behavior.packages/driver/src/dom/dimensions.ts): Use cachedgetComputedStyleto derive padding/border/margin.packages/driver/src/dom/blackout.ts): Create overlays via native DOM and consolidated style string.Written by Cursor Bugbot for commit 6690c4b. This will update automatically on new commits. Configure here.