Refactor readonly input typing

packages/driver/src/cy/actionability.coffee

@@ -241,7 +241,7 @@ verify = (cy, $el, options, callbacks) ->
         ## ensure its visible
         cy.ensureVisibility($el, _log)
 
-        ## ensure its 'receivable'
+        ## ensure its 'receivable' (not disabled, readonly)
         cy.ensureReceivability($el, _log)
 
       ## now go get all the coords for this element

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

@@ -89,7 +89,6 @@ module.exports = (Commands, Cypress, cy, state, config) ->
       isMonth     = $dom.isType(options.$el, "month")
       isWeek      = $dom.isType(options.$el, "week")
       hasTabIndex = $dom.isSelector(options.$el, "[tabindex]")
-      isReadonly  = options.$el.is('[readonly]')
 
       ## TODO: tabindex can't be -1
 
@@ -108,13 +107,6 @@ module.exports = (Commands, Cypress, cy, state, config) ->
           args: { num }
         })
 
-      if (isReadonly)
-        node = $dom.stringify(options.$el)
-        $utils.throwErrByPath("type.readonly", {
-          onFail: options._log
-          args: { node }
-        })
-
       if not (_.isString(chars) or _.isFinite(chars))
         $utils.throwErrByPath("type.wrong_type", {
           onFail: options._log

packages/driver/src/cy/ensures.coffee

@@ -112,6 +112,16 @@ create = (state, expect) ->
         args: { cmd, node }
       })
 
+    # readonly can only be applied to input/textarea
+    # not on checkboxes, radios, etc..
+    if $dom.isTextLike(subject) and subject.prop("readonly")
+      node = $dom.stringify(subject)
+
+      $utils.throwErrByPath("dom.readonly", {
+        onFail
+        args: { cmd, node }
+      })
+
   ensureVisibility = (subject, onFail) ->
     cmd = state("current").get("name")
 

packages/driver/src/cypress/error_messages.coffee

@@ -225,6 +225,15 @@ module.exports = {
 
       https://on.cypress.io/element-cannot-be-interacted-with
     """
+    readonly: """
+      #{cmd('{{cmd}}')} failed because this element is readonly:
+
+      {{node}}
+
+      Fix this problem, or use {force: true} to disable error checking.
+
+      https://on.cypress.io/element-cannot-be-interacted-with
+    """
 
   each:
     invalid_argument: "#{cmd('each')} must be passed a callback function."
@@ -894,7 +903,6 @@ module.exports = {
 
   type:
     empty_string: "#{cmd('type')} cannot accept an empty String. You need to actually type something."
-    readonly: "#{cmd('type')} cannot type into an element with a 'readonly' attribute. The element typed into was: {{node}}"
     invalid: "Special character sequence: '{{chars}}' is not recognized. Available sequences are: {{allChars}}"
     invalid_date: "Typing into a date input with #{cmd('type')} requires a valid date with the format 'yyyy-MM-dd'. You passed: {{chars}}"
     invalid_month: "Typing into a month input with #{cmd('type')} requires a valid month with the format 'yyyy-MM'. You passed: {{chars}}"

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

@@ -260,6 +260,28 @@ describe('src/cy/commands/actions/type', () => {
         })
       })
 
+      it('waits until element is no longer readonly', () => {
+        const $txt = cy.$$(':text:first').prop('readonly', true)
+
+        let retried = false
+        let clicks = 0
+
+        $txt.on('click', () => {
+          clicks += 1
+        })
+
+        cy.on('command:retry', _.after(3, () => {
+          $txt.prop('readonly', false)
+          retried = true
+        }))
+
+        cy.get(':text:first').type('foo').then(() => {
+          expect(clicks).to.eq(1)
+
+          expect(retried).to.be.true
+        })
+      })
+
       it('waits until element stops animating', () => {
         let retries = 0
 
@@ -4204,9 +4226,9 @@ describe('src/cy/commands/actions/type', () => {
           cy.get(`#${attrs.id}`).type('foo')
 
           cy.on('fail', (err) => {
-            expect(err.message).to.include('cy.type() cannot type into an element with a \'readonly\' attribute.')
-            expect(err.message).to.include('The element typed into was:')
+            expect(err.message).to.include('cy.type() failed because this element is readonly:')
             expect(err.message).to.include(`<input id="${attrs.id}" readonly="${attrs.val}">`)
+            expect(err.message).to.include('Fix this problem, or use {force: true} to disable error checking.')
 
             done()
           })