fix: update visibility for elements with textContent but without width/height

cli/CHANGELOG.md

@@ -6,6 +6,7 @@ _Released 7/16/2024 (PENDING)_
 **Bugfixes:**
 
 - Fixed an issue where the ReadStream used to upload a Test Replay recording could erroneously be re-used when retrying in cases of retryable upload failures. Fixes [#29227](https://github.com/cypress-io/cypress/issues/29227)
+- Fixed an issue where parent width 0 signal element hidden when it's visible. Fixes [#29687](https://github.com/cypress-io/cypress/issues/29687).
 
 ## 13.13.0
 
@@ -46,6 +47,7 @@ _Released 6/18/2024_
 - Fixed an issue where `inlineSourceMaps` was still being used when `sourceMaps` was provided in a users typescript config for typescript version 5. Fixes [#26203](https://github.com/cypress-io/cypress/issues/26203).
 - When capture protocol script fails verification, an appropriate error is now displayed. Previously, an error regarding Test Replay archive location was shown. Addressed in [#29603](https://github.com/cypress-io/cypress/pull/29603).
 - Fixed an issue where receiving HTTP responses with invalid headers raised an error. Now cypress removes the invalid headers and gives a warning in the console with debug mode on. Fixes [#28865](https://github.com/cypress-io/cypress/issues/28865).
+- Fixed an issue where parent width signal element hidden when it's visible [#29687](https://github.com/cypress-io/cypress/issues/29687).
 
 **Misc:**
 

packages/driver/cypress/e2e/commands/actions/click.cy.js

@@ -2205,7 +2205,7 @@ describe('src/cy/commands/actions/click', () => {
 
           expect(logsArr).to.have.length(4)
           expect(lastLog.get('error')).to.eq(err)
-          expect(err.message).to.include('`cy.click()` failed because this element is not visible')
+          expect(err.message).to.include('`cy.click()` failed because this element')
 
           done()
         })
@@ -3344,7 +3344,7 @@ describe('src/cy/commands/actions/click', () => {
 
           expect(logs).to.have.length(4)
           expect(lastLog.get('error')).to.eq(err)
-          expect(err.message).to.include('`cy.dblclick()` failed because this element is not visible')
+          expect(err.message).to.include('`cy.dblclick()` failed because this element')
 
           done()
         })
@@ -3780,7 +3780,7 @@ describe('src/cy/commands/actions/click', () => {
 
           assertLogLength(this.logs, 4)
           expect(lastLog.get('error')).to.eq(err)
-          expect(err.message).to.include('`cy.rightclick()` failed because this element is not visible')
+          expect(err.message).to.include('`cy.rightclick()` failed because this element')
 
           done()
         })

packages/driver/cypress/e2e/commands/actions/select.cy.js

@@ -520,7 +520,7 @@ describe('src/cy/commands/actions/select', () => {
         cy.$$('#select-maps').show().hide()
 
         cy.on('fail', (err) => {
-          expect(err.message).to.include('`cy.select()` failed because this element is not visible')
+          expect(err.message).to.include('`cy.select()` failed because this element')
 
           done()
         })

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

@@ -174,7 +174,7 @@ describe('src/cypress/dom/visibility', () => {
       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>`)
@@ -721,15 +721,15 @@ 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
+      it('is visible even if offsetWidth is 0', function () {
+        expect(this.$divNoWidth.is(':hidden')).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.not.be.hidden
+        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.not.hidden')
+        cy.wrap(this.$divNoWidth).should('be.visible')
       })
 
       it('is hidden if parent has overflow: hidden and no width', function () {
@@ -1142,7 +1142,7 @@ 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 () {

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

@@ -0,0 +1,12 @@
+describe('issue visible element with parent 0 width are detected as not visible', () => {
+  before(() => {
+    cy
+    .viewport('macbook-16')
+    .visit('/fixtures/issue-29687.html')
+  })
+
+  it('can click element when effective 0 width parent used', () => {
+    expect(cy.$$('#id2 >div > p')).to.be.visible
+    cy.get('#id2 >div > p').click()
+  })
+})

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

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>zero width repro</title>
+  <style id="compiled-css" type="text/css">
+    .big {
+      font-size: 128px;
+    }
+  </style>
+</head>
+
+<body>  
+  <div id="id2">
+    <div style="width: 0">
+      <p class="big">IN SECTION 2 </p>
+    </div>
+  </div>
+</body>
+</html>

packages/driver/src/dom/visibility.ts

@@ -36,6 +36,35 @@ const ensureEl = (el, methodName) => {
   }
 }
 
+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
+      }
+    } else {
+      if (isStrictlyHidden($el)) {
+        return 2
+      }
+    }
+
+    return true //this signal visible
+  }
+
+  return 0 //this signal not option element
+}
+
 const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { checkOpacity: true }, recurse?) => {
   ensureEl(el, methodName)
   const $el = $jquery.wrap(el)
@@ -45,23 +74,18 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
     return false // is visible
   }
 
-  // an option is considered visible if its parent select is visible
-  if (isOption(el) || isOptgroup(el)) {
-    // they could have just set to hide the option
-    if (elHasDisplayNone($el)) {
-      return true
-    }
+  const optionIsVisible = checkIsOptionVisible(el)
 
-    // if its parent select is visible, then it's not hidden
-    const $select = getFirstParentWithTagName($el, 'select')
+  if (optionIsVisible === true) {
+    return false
+  }
 
-    // check $select.length here first
-    // they may have not put the option into a select el,
-    // in which case it will fall through to regular visibility logic
-    if ($select && $select.length) {
-      // if the select is hidden, the options in it are visible too
-      return recurse ? recurse($select[0], methodName, options) : isStrictlyHidden($select[0], methodName, options)
-    }
+  if (optionIsVisible > 1) {
+    return true
+  }
+
+  if (elHasDisplayNone($el)) {
+    return true
   }
 
   // in Cypress-land we consider the element hidden if
@@ -73,7 +97,28 @@ const isStrictlyHidden = (el, methodName = 'isStrictlyHidden()', options = { che
       return !elHasVisibleChild($el)
     }
 
-    return true // is hidden
+    if (el.textContent) {
+      //this below should be in function
+      if (elHasVisibilityHiddenOrCollapse($el)) {
+        return true // is hidden
+      }
+
+      // when an element is scaled to 0 in one axis
+      // it is not visible to users.
+      // So, it is hidden.
+      if ($transform.detectVisibility($el) !== 'visible') {
+        return true
+      }
+
+      // a transparent element is hidden
+      if (elHasOpacityZero($el) && options.checkOpacity) {
+        return true
+      }
+
+      return false
+    }
+
+    return true
   }
 
   // additionally if the effective visibility of the element