Cypress: Update/improve cy.type validation logic

[chrisbreiding]

It appears fairly common that users need to type into an input that has an invalid type attribute (type="STRING", type="username"), triggering the error cy.type() can only be called on textarea or :text.

Here are two possible ways to improve the experience for this use case:

1. Allow validation to be bypassed with either { force: true} or { validation: false }. Also, improve the error message so it's clear what :text means and include details on how to bypass validation.

2. Instead of whitelisting input types, blacklist certain types instead (e.g. checkbox). This would provide a good error message if typing into something that's blacklisted, but allow users to type into inputs with types that aren't accounted for, just as a browser actually allows.

[noah-potter]

Having a { force: true } option would be great for our use case. We have a div listening for keyboard shortcuts such as ctrl + b, ctrl + m, etc. These are used to access power-user/admin windows. We're able to work around the issue by attaching these to the body, but ideally we would be able to force cypress to type into any element.

[jennifer-shehane]

.type() code can be found here: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/commands/actions/type.coffee#L23

[anocaj]

Is this something that will be added? We are struggling to make cypress type into a paragraph that is inside a content editable div.

cy.type() can only be called on textarea or :text. Your subject is a: <p>...</p>

[patrickdorn]

Is there any kind of "workaround" or "dirty hack" available to bypass this issue until this is solved?

[Magneticmagnum]

My company is also exploring Cypress and wondering if this will be a feature that will be supported by the Cypress team in the future?

Our use case is similar to anocaj; We want to simulate typing into a complex text editor that is a div.

[jennifer-shehane]

Yes, we do intend this to be done in the future, but currently it is not assigned to anyone. The code can be found here if anyone wants to begin a Work in Progress PR: https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/cy/commands/actions/type.coffee#L23

[Bkucera]

@Magneticmagnum that is not addressed by this issue...however we should already support typing into divs with attribute contenteditable .

[Bkucera]

This will be fixed by an upcoming patch release. It's really as simple us using the type property instead of type attribute.
The type property of <input type="asdf"> is "text"

So we can still whitelist input types, as long as we use the type property getter

[wasiqkhan786]

nothing is working with cy.type when subject is not typeable.please create some solution.

[jennifer-shehane]

@wasiqkhan786 This issue has been resolved and there are tests against it. This issue will be closed to further comment.

If you're experiencing a bug similar to this in Cypress, please open a new issue with a fully reproducible example that we can run. There may be a specific edge case with the issue that we need more detail to fix.