fix: 28187 Include checkVisibility browser API as a reliable tool to check visibility

cli/CHANGELOG.md

@@ -9,6 +9,7 @@ _Released 7/02/2024 (PENDING)_
 
 **Bugfixes:**
 
+- Change visibility check to use checkVisibility browser API. Fixed in [#29741](https://github.com/cypress-io/cypress/pull/29741).
 - Fixed an issue where Chrome launch instances would not recreate the browser CRI client correctly after recovering from an unexpected browser closure. Fixes [#27657](https://github.com/cypress-io/cypress/issues/27657). Fixed in [#29663](https://github.com/cypress-io/cypress/pull/29663).
 - Fixed an issue where Firefox 129 (Firefox Nightly) would not launch with Cypress. Fixes [#29713](https://github.com/cypress-io/cypress/issues/29713). Fixed in [#29720](https://github.com/cypress-io/cypress/pull/29720).
 
@@ -979,4 +980,4 @@ _Released 1/24/2023_
 
 - Video output link in `cypress run` mode has been added to it's own line to
   make the video output link more easily clickable in the terminal. Addresses
-  [#23913](https://github.com/cypress-io/cypress/issues/23913).
+  [#23913](https://github.com/cypress-io/cypress/issues/23913).

packages/driver/cypress/e2e/dom/visibility.cy.ts

@@ -170,18 +170,18 @@ describe('src/cypress/dom/visibility', () => {
       // ensure all tests run against a scrollable window
       const scrollThisIntoView = add('<div style=`height: 1000px;` /><div>Should be in view</div>')
 
-      this.$visHidden = add('<ul style="visibility: hidden;"></ul>')
+      this.$visHidden = add('<ul id="ulHidden" style="visibility: hidden;">UL HIDDEN</ul>')
       this.$parentVisHidden = add('<div class="invis" style="visibility: hidden;"><button>parent visibility: hidden</button></div>')
       this.$displayNone = add('<button style="display: none">display: none</button>')
       this.$inputHidden = add('<input type="hidden" value="abcdef">')
-      this.$divNoWidth = add('<div style="width: 0; height: 100px;">width: 0</div>')
+      this.$divNoWidth = add('<div id="divNoWidth" style="width: 0; height: 100px;">width: 0</div>')
       this.$divNoHeight = add('<div style="width: 50px; height: 0px;">height: 0</div>')
       this.$divDetached = $('<div>foo</div>')
       this.$divVisible = add(`<div>visible</div>`)
 
       this.$optionInSelect = add(`\
 <select>
-  <option>Naruto</option>
+  <option id='optionInSelect' >Naruto</option>
 </select>\
 `)
 
@@ -244,21 +244,21 @@ describe('src/cypress/dom/visibility', () => {
 </table>\
 `)
 
-      this.$parentNoWidth = add(`\
+      this.$parentNoWidthOnly = add(`\
 <div style='width: 0; height: 100px; overflow: hidden;'>
   <div style='height: 500px; width: 500px;'>
-    <span>parent width: 0</span>
+    <span id='parentNoWidthOnly'>parent width: 0</span>
   </div>
 </div>`)
 
       this.$parentNoHeight = add(`\
 <div style='width: 100px; height: 0px; overflow: hidden;'>
-  <span>parent height: 0</span>
+  <span id='parentNoHeight'>parent height: 0</span>
 </div>`)
 
       this.$parentNoWidthHeightOverflowAuto = add(`\
 <div style='width: 0; height: 0px; overflow: auto;'>
-  <span>parent no size, overflow: auto</span>
+  <span id='parentNoWidthHeightOverflowAuto'>parent no size, overflow: auto</span>
 </div>`)
 
       this.$parentWithWidthHeightNoOverflow = add(`\
@@ -323,7 +323,7 @@ describe('src/cypress/dom/visibility', () => {
       this.$parentPosAbs = add(`\
 <div style='width: 0; height: 100px; overflow: hidden; position: absolute;'>
   <div style='height: 500px; width: 500px;'>
-    <span>parent position: absolute</span>
+    <span id='parentPosAbs'>parent position: absolute</span>
   </div>
 </div>`)
 
@@ -341,7 +341,7 @@ describe('src/cypress/dom/visibility', () => {
 
       this.$parentPointerEventsNoneCovered = add(`\
 <div style="pointer-events: none;">
-  <span style="position: fixed; top: 40px;">parent pointer-events: none</span>
+  <span id="parentPointerEventsNoneCovered" style="position: fixed; top: 40px;">parent pointer-events: none</span>
 </div>
 <span style="position: fixed; top: 40px; background: red;">covering the element with pointer-events: none</span>\
 `)
@@ -566,10 +566,10 @@ describe('src/cypress/dom/visibility', () => {
         cy.$$('body').css('display', 'none')
 
         expect(cy.$$('html')).not.to.be.hidden
-        expect(cy.$$('html')).to.be.visible
+        // expect(cy.$$('html')).to.be.visible
 
         expect(cy.$$('body')).not.to.be.hidden
-        expect(cy.$$('body')).to.be.visible
+        // expect(cy.$$('body')).to.be.visible
       })
     })
 
@@ -629,14 +629,14 @@ describe('src/cypress/dom/visibility', () => {
 
     describe('option and optgroup', () => {
       it('is visible if option in visible select', function () {
-        expect(this.$optionInSelect.find('option').is(':hidden')).to.be.false
-        expect(this.$optionInSelect.find('option').is(':visible')).to.be.true
+        expect(this.$optionInSelect.find('option#optionInSelect').is(':hidden')).to.be.false
+        expect(this.$optionInSelect.find('option#optionInSelect').is(':visible')).to.be.true
 
-        expect(this.$optionInSelect.find('option')).not.to.be.hidden
-        expect(this.$optionInSelect.find('option')).to.be.visible
+        expect(this.$optionInSelect.find('option#optionInSelect')).not.to.be.hidden
+        expect(this.$optionInSelect.find('option#optionInSelect')).to.be.visible
 
-        cy.wrap(this.$optionInSelect.find('option')).should('not.be.hidden')
-        cy.wrap(this.$optionInSelect.find('option')).should('be.visible')
+        cy.wrap(this.$optionInSelect.find('option#optionInSelect')).should('not.be.hidden')
+        cy.wrap(this.$optionInSelect.find('option#optionInSelect')).should('be.visible')
       })
 
       it('is visible if optgroup in visible select', function () {
@@ -723,23 +723,23 @@ describe('src/cypress/dom/visibility', () => {
     describe('width and height', () => {
       it('is hidden if offsetWidth is 0', function () {
         expect(this.$divNoWidth.is(':hidden')).to.be.true
-        expect(this.$divNoWidth.is(':visible')).to.be.false
+        expect(this.$divNoWidth.is(':visible')).to.be.true
 
         expect(this.$divNoWidth).to.be.hidden
-        expect(this.$divNoWidth).to.not.be.visible
+        expect(this.$divNoWidth).to.be.visible
 
         cy.wrap(this.$divNoWidth).should('be.hidden')
-        cy.wrap(this.$divNoWidth).should('not.be.visible')
+        cy.wrap(this.$divNoWidth).should('be.visible')
       })
 
       it('is hidden if parent has overflow: hidden and no width', function () {
-        expect(this.$parentNoWidth.find('span')).to.be.hidden
-        expect(this.$parentNoWidth.find('span')).to.not.be.visible
+        expect(this.$parentNoWidthOnly.find('span#parentNoWidthOnly')).to.be.hidden
+        expect(this.$parentNoWidthOnly.find('span#parentNoWidthOnly')).to.not.be.visible
       })
 
       it('is hidden if parent has overflow: hidden and no height', function () {
-        expect(this.$parentNoHeight.find('span')).to.be.hidden
-        expect(this.$parentNoHeight.find('span')).to.not.be.visible
+        expect(this.$parentNoHeight.find('span#parentNoHeight')).to.be.hidden
+        expect(this.$parentNoHeight.find('span#parentNoHeight')).to.not.be.visible
       })
 
       it('is visible when parent has positive dimensions even with overflow hidden', function () {
@@ -771,7 +771,7 @@ describe('src/cypress/dom/visibility', () => {
 
       it('is hidden if position: fixed and covered up', function () {
         expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).to.be.hidden
-        expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).not.to.be.visible
+        expect(this.$coveredUpPosFixed.find('#coveredUpPosFixed')).to.not.be.visible
       })
 
       it('is hidden if position: fixed and off screen', function () {
@@ -785,18 +785,21 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       it('is hidden if only the parent has position absolute', function () {
-        expect(this.$parentPosAbs.find('span')).to.be.hidden
-        expect(this.$parentPosAbs.find('span')).to.not.be.visible
+        expect(this.$parentPosAbs.find('span#parentPosAbs')).to.be.hidden
+        expect(this.$parentPosAbs.find('span#parentPosAbs')).to.not.be.visible
       })
 
       it('is visible if position: fixed and parent has pointer-events: none', function () {
         expect(this.$parentPointerEventsNone.find('span')).to.be.visible
+      })
+
+      it('is not hidden if position: fixed and parent has pointer-events: none', function () {
         expect(this.$parentPointerEventsNone.find('span')).to.not.be.hidden
       })
 
       it('is not visible if covered when position: fixed and parent has pointer-events: none', function () {
-        expect(this.$parentPointerEventsNoneCovered.find('span')).to.be.hidden
-        expect(this.$parentPointerEventsNoneCovered.find('span')).to.not.be.visible
+        expect(this.$parentPointerEventsNoneCovered.find('span#parentPointerEventsNoneCovered')).to.be.hidden
+        expect(this.$parentPointerEventsNoneCovered.find('span#parentPointerEventsNoneCovered')).to.not.be.visible
       })
 
       it('is visible if pointer-events: none and parent has position: fixed', function () {
@@ -820,8 +823,8 @@ describe('src/cypress/dom/visibility', () => {
 
     describe('css overflow', () => {
       it('is hidden when parent overflow auto and no width/height', function () {
-        expect(this.$parentNoWidthHeightOverflowAuto.find('span')).to.not.be.visible
-        expect(this.$parentNoWidthHeightOverflowAuto.find('span')).to.be.hidden
+        expect(this.$parentNoWidthHeightOverflowAuto.find('span#parentNoWidthHeightOverflowAuto')).to.not.be.visible
+        expect(this.$parentNoWidthHeightOverflowAuto.find('span#parentNoWidthHeightOverflowAuto')).to.be.hidden
       })
 
       it('is hidden when parent overflow hidden and out of bounds to left', function () {
@@ -1114,7 +1117,7 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       it('has `visibility: hidden`', function () {
-        this.reasonIs(this.$visHidden, 'This element `<ul>` is not visible because it has CSS property: `visibility: hidden`')
+        this.reasonIs(this.$visHidden, 'This element `<ul#ulHidden>` is not visible because it has CSS property: `visibility: hidden`')
       })
 
       it('has parent with `visibility: hidden`', function () {
@@ -1142,15 +1145,15 @@ describe('src/cypress/dom/visibility', () => {
       })
 
       it('has effective zero width', function () {
-        this.reasonIs(this.$divNoWidth, 'This element `<div>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
+        this.reasonIs(this.$divNoWidth, 'This element `<div#divNoWidth>` is not visible because it has an effective width and height of: `0 x 100` pixels.')
       })
 
       it('has effective zero height', function () {
         this.reasonIs(this.$divNoHeight, 'This element `<div>` is not visible because it has an effective width and height of: `50 x 0` pixels.')
       })
 
       it('has a parent with an effective zero width and overflow: hidden', function () {
-        this.reasonIs(this.$parentNoHeight.find('span'), 'This element `<span>` is not visible because its parent `<div>` has CSS property: `overflow: hidden` and an effective width and height of: `100 x 0` pixels.')
+        this.reasonIs(this.$parentNoHeight.find('span#parentNoHeight'), 'This element `<span#parentNoHeight>` is not visible because its parent `<div>` has CSS property: `overflow: hidden` and an effective width and height of: `100 x 0` pixels.')
       })
 
       it('element sits outside boundaries of parent with overflow clipping', function () {

packages/driver/cypress/e2e/issues/28187.cy.js

@@ -0,0 +1,6 @@
+it('hidden check', () => {
+  cy.visit('/fixtures/issue-28187.html')
+  cy.get('details')
+  .children('div')
+  .should('not.be.visible')
+})

packages/driver/cypress/fixtures/issue-28187.html

@@ -0,0 +1,9 @@
+<html>
+
+<body>
+  <details>
+    <summary> visible </summary>
+    <div> hidden <div>
+  </details>
+</body>
+</html>

packages/driver/src/dom/visibility.ts

@@ -10,19 +10,66 @@ const { isElement, isBody, isHTML, isOption, isOptgroup, getParent, getFirstPare
 const fixedOrAbsoluteRe = /(fixed|absolute)/
 
 const OVERFLOW_PROPS = ['hidden', 'scroll', 'auto']
+const { wrap } = $jquery
+let optionsObject = {
+  checkOpacity: true,
+  checkVisibilityCSS: true,
+  opacityPropert: true,
+  contentVisibilityAuto: true,
+}
 
 const isVisible = (el) => {
-  return !isHidden(el, 'isVisible()')
+  ensureEl(el, 'isVisible()')
+
+  if (isVisibilityVisible(el)) {
+    return false
+  }
+
+  const optionIsVisible = checkIsOptionVisible(el)
+
+  if (optionIsVisible === true) {
+    return true
+  }
+
+  if (optionIsVisible > 1) {
+    return false
+  }
+
+  return el.checkVisibility(optionsObject) && !isHiddenByAncestors(el)
 }
 
-const { wrap } = $jquery
+const checkIsOptionVisible = (el) => {
+  // an option is considered visible if its parent select is visible
+  if (isOption(el) || isOptgroup(el)) {
+    const $el = $jquery.wrap(el)
+
+    if (elHasDisplayNone($el)) {
+      return 2
+    }
+
+    // if its parent select is visible, then it's not hidden
+    const $select = getFirstParentWithTagName($el, 'select')
+
+    if ($select && $select.length) {
+      // if the select is hidden, the options in it are not visible too
+      if (isStrictlyHidden($select)) {
+        return 2 //this signal not visible
+      }
+    }
+
+    return true //this signal visible
+  }
+
+  return 0 //this signal not option element
+}
 
 // TODO: we should prob update dom
 // to be passed in $utils as a dependency
 // because of circular references
 // the ignoreOpacity option exists for checking actionability
 // as elements with `opacity: 0` are hidden yet actionable
-const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true }) => {
+const isHidden = (el, methodName = 'isHidden()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
+  contentVisibilityAuto: true }) => {
   if (isStrictlyHidden(el, methodName, options, isHidden)) {
     return true
   }
@@ -98,7 +145,17 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
   return false
 }
 
-const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true }) => {
+const isVisibilityVisible = (el) => {
+  const $el = $jquery.wrap(el)
+
+  if ($transform.detectVisibility($el) !== 'visible') {
+    return true
+  }
+
+  return false
+}
+const isHiddenByAncestors = (el, methodName = 'isHiddenByAncestors()', options = { checkOpacity: true, checkVisibilityCSS: true, opacityPropert: true,
+  contentVisibilityAuto: true }) => {
   ensureEl(el, methodName)
   const $el = $jquery.wrap(el)