diff --git a/packages/driver/cypress/e2e/e2e/dom_hitbox.cy.js b/packages/driver/cypress/e2e/e2e/dom_hitbox.cy.js index 6f226aacc1c7..408c7c3bf5e6 100644 --- a/packages/driver/cypress/e2e/e2e/dom_hitbox.cy.js +++ b/packages/driver/cypress/e2e/e2e/dom_hitbox.cy.js @@ -54,7 +54,10 @@ describe('rect highlight', { browser: '!webkit' }, () => { it('correct target position during click', () => { clickAndPin('#button') - ensureCorrectHighlightPositions('#button') + // TODO: We are currently skipping the element comparison on the highlight because + // for some reason the `elementFromPoint` is returning the correct element, but with stale styles + // @see https://github.com/cypress-io/cypress/issues/30526. + ensureCorrectHighlightPositions('#button', true) ensureCorrectTargetPosition('#button') }) @@ -100,7 +103,7 @@ const ensureCorrectTargetPosition = (sel) => { }) } -const ensureCorrectHighlightPositions = (sel) => { +const ensureCorrectHighlightPositions = (sel, skipElementComparison) => { return cy.wrap(null, { timeout: 4000 }).should(() => { const els = { content: cy.$$('div[data-layer=Content]'), @@ -112,12 +115,14 @@ const ensureCorrectHighlightPositions = (sel) => { return $el[0].getBoundingClientRect() }) - const doc = els.content[0].ownerDocument + if (!skipElementComparison) { + const doc = els.content[0].ownerDocument - const contentHighlightCenter = [dims.content.x + dims.content.width / 2, dims.content.y + dims.content.height / 2] - const highlightedEl = doc.elementFromPoint(...contentHighlightCenter) + const contentHighlightCenter = [dims.content.x + dims.content.width / 2, dims.content.y + dims.content.height / 2] + const highlightedEl = doc.elementFromPoint(...contentHighlightCenter) - expect(highlightedEl).eq(els.content[0]) + expect(highlightedEl).eq(els.content[0]) + } expectToBeInside(dims.content, dims.padding, 'content to be inside padding') expectToBeInside(dims.padding, dims.border, 'padding to be inside border')