update type and clear errors to accurately describe what is 'type…

…able' or 'clearable' (#1651)

* update `type` and `clear` errors to accurately describe what is 'typeable' or 'clearable'

* newly built assertion for example.spec from 1.0.1 update

* 'the' to 'a' - reads better in err message

* update specs to reflect type change in err msg.

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

@@ -92,7 +92,7 @@ module.exports = (Commands, Cypress, cy, state, config) ->
 
       if not isBody and not isTextLike and not hasTabIndex
         node = $dom.stringify(options.$el)
-        $utils.throwErrByPath("type.not_on_text_field", {
+        $utils.throwErrByPath("type.not_on_typeable_element", {
           onFail: options._log
           args: { node }
         })
@@ -369,7 +369,7 @@ module.exports = (Commands, Cypress, cy, state, config) ->
       })
 
       ## blow up if any member of the subject
-      ## isnt a textarea or :text
+      ## isnt a textarea or text-like
       clear = (el, index) ->
         $el = $(el)
 

packages/driver/src/cypress/error_messages.coffee

@@ -101,7 +101,15 @@ module.exports = {
     invalid_element: "#{cmd('{{cmd}}')} can only be called on :checkbox{{phrase}}. Your subject {{word}} a: {{node}}"
 
   clear:
-    invalid_element: "#{cmd('clear')} can only be called on textarea or :text. Your subject {{word}} a: {{node}}"
+    invalid_element: """
+      #{cmd('clear')} failed because it requires a valid clearable element. 
+      
+      The element cleared was:
+
+        > {{node}}
+      
+      Cypress considers a 'textarea', any 'element' with a 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid clearable elements.
+    """
 
   clearCookie:
     invalid_argument: "#{cmd('clearCookie')} must be passed a string argument for name."
@@ -748,8 +756,16 @@ module.exports = {
     invalid_month: "Typing into a month input with #{cmd('type')} requires a valid month with the format 'yyyy-MM'. You passed: {{chars}}"
     invalid_week: "Typing into a week input with #{cmd('type')} requires a valid week with the format 'yyyy-Www', where W is the literal character 'W' and ww is the week number (00-53). You passed: {{chars}}"
     invalid_time: "Typing into a time input with #{cmd('type')} requires a valid time with the format 'HH:mm', 'HH:mm:ss' or 'HH:mm:ss.SSS', where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is 000-999. You passed: {{chars}}"
-    multiple_elements: "#{cmd('type')} can only be called on a single textarea or :text. Your subject contained {{num}} elements."
-    not_on_text_field: "#{cmd('type')} can only be called on textarea or :text. Your subject is a: {{node}}"
+    multiple_elements: "#{cmd('type')} can only be called on a single element. Your subject contained {{num}} elements."
+    not_on_typeable_element: """
+      #{cmd('type')} failed because it requires a valid typeable element. 
+      
+      The element typed into was:
+
+        > {{node}}
+      
+      Cypress considers the 'body', 'textarea', any 'element' with a 'tabindex' or 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid typeable elements.
+    """
     tab: "{tab} isn't a supported character sequence. You'll want to use the command #{cmd('tab')}, which is not ready yet, but when it is done that's what you'll use."
     wrong_type: "#{cmd('type')} can only accept a String or Number. You passed in: '{{chars}}'"
 

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

@@ -2158,22 +2158,24 @@ describe "src/cy/commands/actions/type", ->
 
         cy.get("input:first").type("a").type("b")
 
-      it "throws when not textarea or :text", (done) ->
+      it "throws when not textarea or text-like", (done) ->
         cy.get("form").type("foo")
 
         cy.on "fail", (err) ->
-          expect(err.message).to.include "cy.type() can only be called on textarea or :text. Your subject is a: <form id=\"by-id\">...</form>"
+          expect(err.message).to.include "cy.type() failed because it requires a valid typeable element."
+          expect(err.message).to.include "The element typed into was:"
+          expect(err.message).to.include "<form id=\"by-id\">...</form>"
+          expect(err.message).to.include "Cypress considers the 'body', 'textarea', any 'element' with a 'tabindex' or 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid typeable elements."
           done()
 
       it "throws when subject is a collection of elements", (done) ->
-        cy
-          .get("textarea,:text").then ($inputs) ->
+        cy.get("textarea,:text").then ($inputs) ->
             @num = $inputs.length
             return $inputs
           .type("foo")
 
         cy.on "fail", (err) =>
-          expect(err.message).to.include "cy.type() can only be called on a single textarea or :text. Your subject contained #{@num} elements."
+          expect(err.message).to.include "cy.type() can only be called on a single element. Your subject contained #{@num} elements."
           done()
 
       it "throws when the subject isnt visible", (done) ->
@@ -2570,34 +2572,46 @@ describe "src/cy/commands/actions/type", ->
 
         cy.get("input:first").clear().clear()
 
-      it "throws if any subject isnt a textarea", (done) ->
+      it "throws if any subject isnt a textarea or text-like", (done) ->
         cy.on "fail", (err) =>
           lastLog = @lastLog
 
           expect(@logs.length).to.eq(3)
           expect(lastLog.get("error")).to.eq(err)
-          expect(err.message).to.include "cy.clear() can only be called on textarea or :text. Your subject contains a: <form id=\"checkboxes\">...</form>"
+          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 "<form id=\"checkboxes\">...</form>"
+          expect(err.message).to.include "Cypress considers a 'textarea', any 'element' with a 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid clearable elements."
           done()
 
         cy.get("textarea:first,form#checkboxes").clear()
 
       it "throws if any subject isnt a :text", (done) ->
         cy.on "fail", (err) ->
-          expect(err.message).to.include "cy.clear() can only be called on textarea or :text. Your subject contains a: <div id=\"dom\">...</div>"
+          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 "Cypress considers a 'textarea', any 'element' with a 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid clearable elements."
           done()
 
         cy.get("div").clear()
 
       it "throws on an input radio", (done) ->
         cy.on "fail", (err) ->
-          expect(err.message).to.include "cy.clear() can only be called on textarea or :text. Your subject contains a: <input type=\"radio\" name=\"gender\" value=\"male\">"
+          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 "<input type=\"radio\" name=\"gender\" value=\"male\">"
+          expect(err.message).to.include "Cypress considers a 'textarea', any 'element' with a 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid clearable elements."
           done()
 
         cy.get(":radio").clear()
 
       it "throws on an input checkbox", (done) ->
         cy.on "fail", (err) ->
-          expect(err.message).to.include "cy.clear() can only be called on textarea or :text. Your subject contains a: <input type=\"checkbox\" name=\"colors\" value=\"blue\">"
+          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 "<input type=\"checkbox\" name=\"colors\" value=\"blue\">"
+          expect(err.message).to.include "Cypress considers a 'textarea', any 'element' with a 'contenteditable' attribute, or any 'input' with a 'type' attribute of 'text', 'password', 'email', 'number', 'date', 'week', 'month', 'time', 'datetime', 'datetime-local', 'search', 'url', or 'tel' to be valid clearable elements."
           done()
 
         cy.get(":checkbox").clear()

packages/example/cypress/integration/examples/traversal.spec.js

@@ -110,7 +110,7 @@ context('Traversal', () => {
   it('.prevUntil() - get all previous sibling DOM elements until el', () => {
     // https://on.cypress.io/prevUntil
     cy.get('.foods-list').find('#nuts')
-      .prevUntil('#veggies')
+      .prevUntil('#veggies').should('have.length', 3)
   })
 
   it('.siblings() - get all sibling DOM elements', () => {