fix: clear() and type('{selectall}{del}') behavior difference. (#14498)

packages/driver/cypress/fixtures/dom.html

@@ -650,6 +650,10 @@
         iframe:<br>
         <iframe id="iframe" src="/fixtures/generic.html"></iframe>
       </div>
+      <div id="does-not-wrap-input">Text</div>
+      <div id="input-wrap">
+        <input style="width:100%" />
+      </div>
       <div>
         Cross domain iframe:<br>
         <iframe id="iframe-cross-domain" src="http://localhost:3501/fixtures/generic.html"></iframe>

packages/driver/cypress/integration/commands/actions/clear_spec.js

@@ -297,14 +297,24 @@ describe('src/cy/commands/actions/type - #clear', () => {
       cy.on('fail', (err) => {
         expect(err.message).to.include('`cy.clear()` failed because it requires a valid clearable element.')
         expect(err.message).to.include('The element cleared was:')
-        expect(err.message).to.include('`<div id="dom">...</div>`')
+        expect(err.message).to.include('`<div id="does-not-wrap-input">Text</div>`')
         expect(err.message).to.include(`A clearable element matches one of the following selectors:`)
         expect(err.docsUrl).to.equal('https://on.cypress.io/clear')
 
         done()
       })
 
-      cy.get('div').clear()
+      cy.get('#does-not-wrap-input').clear()
+    })
+
+    it('throws center hidden error if the element is too high', (done) => {
+      cy.on('fail', (err) => {
+        expect(err.message).to.include('`cy.clear()` failed because the center of this element is hidden from view')
+
+        done()
+      })
+
+      cy.get('#dom').clear()
     })
 
     it('throws on an input radio', (done) => {

packages/driver/src/cy/commands/actions/type.js

@@ -500,9 +500,29 @@ module.exports = function (Commands, Cypress, cy, state, config) {
         })
       }
 
-      const node = $dom.stringify($el)
+      const callTypeCmd = ($el) => {
+        return cy.now('type', $el, '{selectall}{del}', {
+          $el,
+          log: false,
+          verify: false, // handle verification ourselves
+          _log: options._log,
+          force: options.force,
+          timeout: options.timeout,
+          interval: options.interval,
+          waitForAnimations: options.waitForAnimations,
+          animationDistanceThreshold: options.animationDistanceThreshold,
+          scrollBehavior: options.scrollBehavior,
+        }).then(() => {
+          if (options._log) {
+            options._log.snapshot().end()
+          }
 
-      if (!$dom.isTextLike($el.get(0))) {
+          return null
+        })
+      }
+
+      const throwError = ($el) => {
+        const node = $dom.stringify($el)
         const word = $utils.plural(subject, 'contains', 'is')
 
         $errUtils.throwErrByPath('clear.invalid_element', {
@@ -511,24 +531,34 @@ module.exports = function (Commands, Cypress, cy, state, config) {
         })
       }
 
-      return cy.now('type', $el, '{selectall}{del}', {
-        $el,
-        log: false,
-        verify: false, // handle verification ourselves
-        _log: options._log,
-        force: options.force,
-        timeout: options.timeout,
-        interval: options.interval,
-        waitForAnimations: options.waitForAnimations,
-        animationDistanceThreshold: options.animationDistanceThreshold,
-        scrollBehavior: options.scrollBehavior,
-      }).then(() => {
-        if (options._log) {
-          options._log.snapshot().end()
+      if (!$dom.isTextLike($el.get(0))) {
+        options.ensure = {
+          position: true,
+          visibility: true,
+          notDisabled: true,
+          notAnimating: true,
+          notCovered: true,
+          notReadonly: true,
         }
 
-        return null
-      })
+        return $actionability.verify(cy, $el, options, {
+          onScroll ($el, type) {
+            return Cypress.action('cy:scrolled', $el, type)
+          },
+
+          onReady ($elToClick) {
+            let activeElement = $elements.getActiveElByDocument($elToClick)
+
+            if (!options.force && activeElement === null || !$dom.isTextLike($elToClick.get(0))) {
+              throwError($el)
+            }
+
+            return callTypeCmd($elToClick)
+          },
+        })
+      }
+
+      return callTypeCmd($el)
     }
 
     return Promise