diff --git a/packages/app/cypress/e2e/studio/studio.cy.ts b/packages/app/cypress/e2e/studio/studio.cy.ts index 5fd1033f8e30..9317eb382943 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').should('have.css', 'transform', 'matrix(1, 0, 0, 1, 0, 141)') + + // 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/packages/app/src/runner/dom.ts b/packages/app/src/runner/dom.ts index 57249bd49219..0afae86db497 100644 --- a/packages/app/src/runner/dom.ts +++ b/packages/app/src/runner/dom.ts @@ -77,18 +77,34 @@ export function getSelectorHighlightStyles (elements) { const borderSize = 2 return elements.map((el) => { - const offset = getOffset(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 + // 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 + targetElement = el.children[i] + break + } + } + } return { 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), } }) } 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') + }) +})