Cypress: cy.get('button').type() only works if button has `tabindex` specified

[kyleoliveiro]

Current behavior:

When calling cy.type() on a <button> element, Cypress throws:

CypressError: cy.type() failed because it requires a valid typeable element.

However if the <button> has a tabindex attribute of any value specified, then calling cy.type() will succeed.

Desired behavior:

cy.type() should succeed in any case, since <buttons> are naturally focusable.

Steps to reproduce:

Call cy.type() on <button> (will throw).
Call cy.type() on <button tabindex="-1"> (will succeed).
Call cy.type() on <button tabindex="0"> (will succeed).
Call cy.type() on <button tabindex="1"> (will succeed).

Versions

Cypress 3.0.2

[Bkucera]

Hi @kyleoliveiro,
type is for typing text into the element. If you want to focus the element you should use .focus

[kyleoliveiro]

I know. I'm trying to simulate a keypress on a button with .type(). In my actual code I'm doing .get().focus().type().

[jennifer-shehane]

Hi @kyleoliveiro, the error should have also given you information about what we consider typeable including:

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.

If you want to simulate a specific event on the button, I'd suggest using trigger to trigger that event like:

cy.get('button').trigger('keypress', {
      keyCode: 35,  // whatever code for the key you wanted to press
      which: 35 // whatever which for the key you wanted to press
}) 

Let me know if this works for you.

[kyleoliveiro]

Yes it will work; but are there plans to include a keypress helper? Cypress already has stuff like .click() etc, I assume that .type() is intended as a shorthand for triggering a keypress event.

[Bkucera]

@kyleoliveiro have you tried cy.type('foobar', {force:true}) ?

[GandalfM]

I tried cy.type('something', {force:true}) - unfortunately the result is the same.

[mendax02]

@jennifer-shehane I am still not able to click the button on my page using the above.
_"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."_

If there is any work around. What if we can introduce the attribute while it is running and then we try to simulate the key press event???

I am not able to click on the button no matter what I try :(

[Bkucera]

@mendax02 if you're trying to click a button, you should refer to our docs on cy.click

[Bkucera]

Re-opened this since we want to allow typing into any element that is focusable. This is fixed in #4870

[cypress-bot[bot]]

The code for this is done in cypress-io/cypress#4870, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[cypress-bot[bot]]

Released in 3.5.0.