From 983be504fae19534fbc5feebd1133ccb3ad58968 Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Wed, 6 Aug 2025 14:12:13 -0400 Subject: [PATCH 1/6] handle 0 offsets for selector highlight styles --- packages/app/src/runner/dom.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/app/src/runner/dom.ts b/packages/app/src/runner/dom.ts index 57249bd49219..38540680a93b 100644 --- a/packages/app/src/runner/dom.ts +++ b/packages/app/src/runner/dom.ts @@ -77,7 +77,21 @@ export function getSelectorHighlightStyles (elements) { const borderSize = 2 return elements.map((el) => { - const offset = getOffset(el) + let offset = getOffset(el) + + if (offset.top === 0 && offset.left === 0 && el.children.length > 0) { + // Try to find the first child with non-zero offset + // This is needed to handle cases where the element is a wrapper that has 0 width and 0 height (for example an ) + // so the highlight styles should be on the children and not the wrapper parent + for (let i = 0; i < el.children.length; i++) { + const childOffset = getOffset(el.children[i]) + + if (childOffset.top !== 0 || childOffset.left !== 0) { + offset = childOffset + break + } + } + } return { position: 'absolute', From 7926e6c0b7f380ebd3260cc61c660e2ec9b03180 Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Wed, 6 Aug 2025 14:30:18 -0400 Subject: [PATCH 2/6] use the child element for the rest of the calculations --- packages/app/src/runner/dom.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/app/src/runner/dom.ts b/packages/app/src/runner/dom.ts index 38540680a93b..0afae86db497 100644 --- a/packages/app/src/runner/dom.ts +++ b/packages/app/src/runner/dom.ts @@ -78,6 +78,7 @@ export function getSelectorHighlightStyles (elements) { return elements.map((el) => { let offset = getOffset(el) + let targetElement = el if (offset.top === 0 && offset.left === 0 && el.children.length > 0) { // Try to find the first child with non-zero offset @@ -88,6 +89,7 @@ export function getSelectorHighlightStyles (elements) { if (childOffset.top !== 0 || childOffset.left !== 0) { offset = childOffset + targetElement = el.children[i] break } } @@ -97,12 +99,12 @@ export function getSelectorHighlightStyles (elements) { position: 'absolute', margin: `0px`, padding: `0px`, - width: `${el.offsetWidth}px`, - height: `${el.offsetHeight}px`, + width: `${targetElement.offsetWidth}px`, + height: `${targetElement.offsetHeight}px`, top: `${offset.top - borderSize}px`, left: `${offset.left - borderSize}px`, - transform: getComputedStyle(el, null).transform, - zIndex: getZIndex(el), + transform: getComputedStyle(targetElement, null).transform, + zIndex: getZIndex(targetElement), } }) } From 479227fdfc98ba84a31ecda6a8e1365d28252b8e Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Wed, 6 Aug 2025 17:30:11 -0400 Subject: [PATCH 3/6] add test --- packages/app/cypress/e2e/studio/studio.cy.ts | 23 ++++++++++++ .../cypress/e2e/invisible-wrapper.html | 35 +++++++++++++++++++ .../e2e/spec-w-invisible-wrapper.cy.js | 5 +++ 3 files changed, 63 insertions(+) create mode 100644 system-tests/projects/experimental-studio/cypress/e2e/invisible-wrapper.html create mode 100644 system-tests/projects/experimental-studio/cypress/e2e/spec-w-invisible-wrapper.cy.js diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts index 5fd1033f8e30..b7b2091cb264 100644 --- a/packages/app/cypress/e2e/studio/studio.cy.ts +++ b/packages/app/cypress/e2e/studio/studio.cy.ts @@ -422,6 +422,29 @@ cy.get('#increment').click(); }) }) }) + + it('shows the assertions menu for an element inside an invisible wrapper', () => { + launchStudio({ specName: 'spec-w-invisible-wrapper.cy.js' }) + + cy.getAutIframe().within(() => { + // Show menu + cy.contains('Increment').realClick({ + button: 'right', + }) + + cy.get('.__cypress-studio-assertions-menu').shadow() + .find('.assertions-menu').should('be.visible') + + // Show submenu + cy.get('.__cypress-studio-assertions-menu').shadow() + .find('.assertion-type-text:first').realHover() + + cy.get('.__cypress-studio-assertions-menu').shadow() + .find('.assertion-option') + .contains('Increment') + .should('be.visible') + }) + }) }) it('removes pending commands if the page is reloaded', () => { diff --git a/system-tests/projects/experimental-studio/cypress/e2e/invisible-wrapper.html b/system-tests/projects/experimental-studio/cypress/e2e/invisible-wrapper.html new file mode 100644 index 000000000000..eb1c0b301062 --- /dev/null +++ b/system-tests/projects/experimental-studio/cypress/e2e/invisible-wrapper.html @@ -0,0 +1,35 @@ + + + + + + + + Hello Studio + + + + + +

Hello, Studio!

+
+ +

Count is 0

+ + + + \ No newline at end of file diff --git a/system-tests/projects/experimental-studio/cypress/e2e/spec-w-invisible-wrapper.cy.js b/system-tests/projects/experimental-studio/cypress/e2e/spec-w-invisible-wrapper.cy.js new file mode 100644 index 000000000000..7683f28c3a0a --- /dev/null +++ b/system-tests/projects/experimental-studio/cypress/e2e/spec-w-invisible-wrapper.cy.js @@ -0,0 +1,5 @@ +describe('studio functionality', () => { + it('visits a basic html page with an invisible wrapper', function () { + cy.visit('cypress/e2e/invisible-wrapper.html') + }) +}) From 8ac42f8212450c04ccbe0bce3f75e125a837aa70 Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Thu, 7 Aug 2025 10:39:17 -0400 Subject: [PATCH 4/6] add percy snapshot --- packages/app/cypress/e2e/studio/studio.cy.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts index b7b2091cb264..660894fb4571 100644 --- a/packages/app/cypress/e2e/studio/studio.cy.ts +++ b/packages/app/cypress/e2e/studio/studio.cy.ts @@ -444,6 +444,8 @@ cy.get('#increment').click(); .contains('Increment') .should('be.visible') }) + + cy.percySnapshot() }) }) From 01ff26a76f17260417e568179a22eb8d137bb93f Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Thu, 7 Aug 2025 13:47:45 -0400 Subject: [PATCH 5/6] does the placement of the percysnapshot show the menu? --- packages/app/cypress/e2e/studio/studio.cy.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts index 660894fb4571..09f56b51fff9 100644 --- a/packages/app/cypress/e2e/studio/studio.cy.ts +++ b/packages/app/cypress/e2e/studio/studio.cy.ts @@ -443,9 +443,9 @@ cy.get('#increment').click(); .find('.assertion-option') .contains('Increment') .should('be.visible') - }) - cy.percySnapshot() + cy.percySnapshot() + }) }) }) From 3b2013efb972eb589d6854d83d3ca9a2cd540f7b Mon Sep 17 00:00:00 2001 From: Mabel Amaya Date: Thu, 7 Aug 2025 16:01:48 -0400 Subject: [PATCH 6/6] assert position of the menu --- packages/app/cypress/e2e/studio/studio.cy.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts index 09f56b51fff9..9317eb382943 100644 --- a/packages/app/cypress/e2e/studio/studio.cy.ts +++ b/packages/app/cypress/e2e/studio/studio.cy.ts @@ -433,7 +433,7 @@ cy.get('#increment').click(); }) cy.get('.__cypress-studio-assertions-menu').shadow() - .find('.assertions-menu').should('be.visible') + .find('.assertions-menu').should('be.visible').should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 141)') // Show submenu cy.get('.__cypress-studio-assertions-menu').shadow() @@ -443,8 +443,6 @@ cy.get('#increment').click(); .find('.assertion-option') .contains('Increment') .should('be.visible') - - cy.percySnapshot() }) }) })