Add clear support for HTML 5 input types (#2793)

- Fixes #2738 

Think directly setting this value might overstep something that's happening in type, but not entirely sure.

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

@@ -117,42 +117,43 @@ module.exports = (Commands, Cypress, cy, state, config) ->
       if chars is ""
         $utils.throwErrByPath("type.empty_string", { onFail: options._log })
 
-      if isDate and (
-        not _.isString(chars) or
-        not dateRegex.test(chars) or
-        not moment(chars).isValid()
-      )
-        $utils.throwErrByPath("type.invalid_date", {
-          onFail: options._log
-          args: { chars }
-        })
+      if !(chars == "{selectall}{del}")
+        if isDate and (
+          not _.isString(chars) or
+          not dateRegex.test(chars) or
+          not moment(chars).isValid()
+        )
+          $utils.throwErrByPath("type.invalid_date", {
+            onFail: options._log
+            args: { chars }
+          })
 
-      if isMonth and (
-        not _.isString(chars) or
-        not monthRegex.test(chars)
-      )
-        $utils.throwErrByPath("type.invalid_month", {
-          onFail: options._log
-          args: { chars }
-        })
+        if isMonth and (
+          not _.isString(chars) or
+          not monthRegex.test(chars)
+        )
+          $utils.throwErrByPath("type.invalid_month", {
+            onFail: options._log
+            args: { chars }
+          })
 
-      if isWeek and (
-        not _.isString(chars) or
-        not weekRegex.test(chars)
-      )
-        $utils.throwErrByPath("type.invalid_week", {
-          onFail: options._log
-          args: { chars }
-        })
+        if isWeek and (
+          not _.isString(chars) or
+          not weekRegex.test(chars)
+        )
+          $utils.throwErrByPath("type.invalid_week", {
+            onFail: options._log
+            args: { chars }
+          })
 
-      if isTime and (
-        not _.isString(chars) or
-        not timeRegex.test(chars)
-      )
-        $utils.throwErrByPath("type.invalid_time", {
-          onFail: options._log
-          args: { chars }
-        })
+        if isTime and (
+          not _.isString(chars) or
+          not timeRegex.test(chars)
+        )
+          $utils.throwErrByPath("type.invalid_time", {
+            onFail: options._log
+            args: { chars }
+          })
 
       options.chars = "" + chars
 
@@ -378,8 +379,6 @@ module.exports = (Commands, Cypress, cy, state, config) ->
             })
 
     clear: (subject, options = {}) ->
-      ## what about other types of inputs besides just text?
-      ## what about the new HTML5 ones?
       _.defaults(options, {
         log: true
         force: false

packages/driver/src/dom/elements.coffee

@@ -252,7 +252,12 @@ isType = ($el, type) ->
   el = [].concat($jquery.unwrap($el))[0]
   ## NOTE: use DOMElement.type instead of getAttribute('type') since
   ##       <input type="asdf"> will have type="text", and behaves like text type
-  (getNativeProp(el, 'type') or "").toLowerCase() is type
+  elType = (getNativeProp(el, 'type') or "").toLowerCase()
+
+  if _.isArray(type)
+    return _.includes(type, elType)
+
+  elType is type
 
 isScrollOrAuto = (prop) ->
   prop is "scroll" or prop is "auto"

packages/driver/test/cypress/fixtures/dom.html

@@ -287,6 +287,13 @@
         <input id="time-with-value" type="time" value="01:23:45" />
         <input id="time-without-value" type="time" />
 
+        <input id="tel-with-value" type="tel" value="678-999-8212" />
+        <input id="text-with-value" type="text" value="foo" />
+        <input id="datetime-with-value" type="datetime" value="2018-01-01T01:00" />
+        <input id="datetime-local-with-value" type="datetime-local" value="2018-01-01T01:00" />
+        <input id="search-with-value" type="search" value="query" />
+        <input id="url-with-value" type="url" value="cool.biz" />
+
         <div contenteditable="true"></div>
         <textarea></textarea>
         <input id="bad-type" type="asdf" />

packages/driver/test/cypress/integration/commands/actions/type_spec.coffee

@@ -2891,7 +2891,7 @@ describe "src/cy/commands/actions/type", ->
 
       context "[type=tel]", ->
         it "can edit tel", ->
-          cy.get('input[type="tel"]')
+          cy.get('#by-name > input[type="tel"]')
           .type('1234567890')
           .should('have.prop', 'value', '1234567890')
 
@@ -3037,9 +3037,27 @@ describe "src/cy/commands/actions/type", ->
 
       cy.get("#input-covered-in-span").clear({timeout: 1000, interval: 60})
 
-    it "works on input[type=number]", ->
-      cy.get("#number-with-value").clear().then ($input) ->
-        expect($input.val()).to.equal("")
+    context "works on input type", ->
+      inputTypes = [
+        "date",
+        "datetime",
+        "datetime-local",
+        "email",
+        "month",
+        "number",
+        "password",
+        "search",
+        "tel",
+        "text",
+        "time",
+        "url",
+        "week"
+      ]
+
+      inputTypes.forEach (type) ->
+        it type, ->
+          cy.get("##{type}-with-value").clear().then ($input) ->
+            expect($input.val()).to.equal("")
 
     describe "assertion verification", ->
       beforeEach ->

packages/driver/test/cypress/integration/dom/elements_spec.coffee

@@ -75,3 +75,19 @@ describe "src/dom/elements", ->
       $el = $(null)
 
       expect(Cypress.dom.isDetached($el)).to.be.true
+
+  context ".isType", ->
+    beforeEach ->
+      cy.visit("/fixtures/dom.html")
+
+    it "when type is a string", ->
+      $el = $('input[type="number"]')
+
+      expect(Cypress.dom.isType($el, 'number')).to.be.true
+      expect(Cypress.dom.isType($el, 'text')).to.be.false
+
+    it "when type is an array", ->
+      $el = $('input[type="number"]')
+
+      expect(Cypress.dom.isType($el, ['number', 'text', 'email'])).to.be.true
+      expect(Cypress.dom.isType($el, ['text', 'email'])).to.be.false