internal: fix assertion menu not displayed in the correct location

[mabela416]

• Closes
  https://github.com/cypress-io/cypress-services/issues/11216

Additional details

• Our website uses Astro components which defines placeholders for the content that should be injected into the components. Because of this we end up with npm install cypress text wrapped around an astro-slot element which is what's targeted when we right click this text in studio. Since the astro-slot element is just a wrapper for the injected content, it has 0 width and 0 height and is not visible so when we calculate the highlight styles for the assertions menu, we end up with 0 offsets for the top and the left. I thought for cases like this to look at the children of the element, if there any, and use the offsets of the children to get a better location for the assertions menu.

Steps to test

• Visit your website on a test and open it in studio. When clicking on npm install cypress, the assertions menu should be displayed by the text instead of the top left corner. Also make sure clicking on other elements opens the assertions menu in the correct location

it('cypress.io', function(){
  cy.visit('https://www.cypress.io/')
})

Screen.Recording.2025-08-06.at.2.17.29.PM.mov

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]

cypress    Run #64468

Run Properties:   Passed #64468  •  7af0b2a6a7: Merge branch 'release/15.0.0' into mabel/issue-11216-menu-location

Project	cypress
Branch Review	mabel/issue-11216-menu-location
Run status	Passed #64468
Run duration	19m 32s
Commit	7af0b2a6a7: Merge branch 'release/15.0.0' into mabel/issue-11216-menu-location
Committer	mabela416
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	13
Pending	1101
Skipped	0
Passing	26533
View all changes introduced in this branch ↗︎

UI Coverage  44.99%
Untested elements	187
Tested elements	157

Accessibility  97.71%
Failed rules	4 critical   8 serious   2 moderate   2 minor
Failed elements	110

[jennifer-shehane]

Interesting. This does solve this specific issue. I'm unsure if this solution will work with all situations, but it's hard to test ahead of time until people use it and report it.

This update only impacts the highlightStyles however, so it's lowish risk if it doesn't work for every situation.

[mabela416]

Interesting. This does solve this specific issue. I'm unsure if this solution will work with all situations, but it's hard to test ahead of time until people use it and report it.

This update only impacts the highlightStyles however, so it's lowish risk if it doesn't work for every situation.

Yeah this won't work is if let's say the text is by itself so if 'npm install cypress' didn't have the svg icon with it because then it'd just be a TextNode and TextNodes would not show up as children of an element. I tried using childNodes instead but getBoundingClientRect() only works on HTML Elements and not TextNodes so I don't even know if/how we'd want to handle that case. I think that case would be really rare so yeah I think we can wait and see if people report any issues with it and see how we want to handle them.