More tests for opacity actionability

cypress-io · Aug 12, 2020 · 8cdbc55 · 8cdbc55
1 parent bdc7d95
commit 8cdbc55
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/packages/driver/cypress/fixtures/dom.html b/packages/driver/cypress/fixtures/dom.html
@@ -610,6 +610,9 @@
 
       <span id="opacity-0" style="opacity: 0;">opacity 0</span>
       <input type="checkbox" style="opacity: 0;" name="opacity" value="blue" />
+      <div style="height:25px; width:25px; overflow: hidden;">
+        <span id="opacity-0-hidden" style="opacity: 0; margin-left: 30px;">opacity 0</span>
+      </div>
 
       <div id="massively-long-div" style="height: 500px; width: 200px; background-color: gray;"></div>
       <div id="form-header-region">

diff --git a/packages/driver/cypress/integration/commands/actions/click_spec.js b/packages/driver/cypress/integration/commands/actions/click_spec.js
@@ -2054,6 +2054,18 @@ describe('src/cy/commands/actions/click', () => {
         cy.get('#three-buttons button').click({ multiple: true })
       })
 
+      it('throws when the element has `opacity: 0` but is not visible', function (done) {
+        cy.on('fail', (err) => {
+          expect(this.logs.length).eq(2)
+          expect(err.message).not.to.contain('CSS property: `opacity: 0`')
+          expect(err.message).to.contain('`cy.click()` failed because this element is not visible')
+
+          done()
+        })
+
+        cy.get('#opacity-0-hidden').click()
+      })
+
       it('throws when subject is disabled', function (done) {
         cy.$$('#button').prop('disabled', true)
 

diff --git a/packages/driver/cypress/integration/commands/actions/trigger_spec.js b/packages/driver/cypress/integration/commands/actions/trigger_spec.js
@@ -843,6 +843,18 @@ describe('src/cy/commands/actions/trigger', () => {
         cy.get('button:first').trigger('mouseover')
       })
 
+      it('throws when the element has `opacity: 0` but is not visible', function (done) {
+        cy.on('fail', (err) => {
+          expect(this.logs.length).eq(2)
+          expect(err.message).not.to.contain('CSS property: `opacity: 0`')
+          expect(err.message).to.contain('`cy.trigger()` failed because this element is not visible')
+
+          done()
+        })
+
+        cy.get('#opacity-0-hidden').trigger('mouseover')
+      })
+
       it('throws when subject is disabled', function (done) {
         cy.$$('#button').prop('disabled', true)
 

diff --git a/packages/driver/src/cy/ensures.js b/packages/driver/src/cy/ensures.js
@@ -156,15 +156,10 @@ const create = (state, expect) => {
   }
 
   const ensureVisibility = (subject, onFail) => {
-    const cmd = state('current').get('name')
-
-    // We overwrite the filter(":visible") in jquery
-    // packages/driver/src/config/jquery.coffee#L51
-    // So that this effectively calls our logic
-    // for $dom.isVisible aka !$dom.isHidden
     if (subject.length !== subject.filter(function () {
       return !$dom.isHidden(this, 'isVisible()', true)
     }).length) {
+      const cmd = state('current').get('name')
       const reason = $dom.getReasonIsHidden(subject, true)
       const node = $dom.stringify(subject)