Cypress: type tab key

Question

I want to test that my forms are accessible and that I can tab between my input elements. I found this github issue asking for the feature here: https://github.com/cypress-io/cypress/issues/299

Currently I try to do .type('{tab}') and I get the following error:

CypressError: {tab} isn't a supported character sequence. You'll want to use the command cy.tab(), which is not ready yet, but when it is done that's what you'll use.

Is there a current workaround for the lack of tab support?

Solution

The Cypress team is currently working on implementing tab support along with other keyboard keys as part of Native Events

In the meantime I've made a plugin that adds a .tab() command. cypress-plugin-tab:

This enables you to do:

cy.get('input').tab()
// and
cy.get('input').tab({shift: true})

However, the actual tab implementation will not be a separate command, so know if you use this plugin, you'll have to refactor your test code when Native Events lands

As the cypress documentation says:

In the meantime, you can use the experimental cypress-plugin-tab and can thumbs up this issue.

Comments

[Asanka Siriwardena]

Hi bkucera, this did the magic for me. I improved the performance of a legacy combo box using this. I just type the text and invoked the tab function so that the value is selected. Hope this approach won't make any undesired behaviors. Using this I reduced test execution time from 40-50 seconds to 25 seconds

[Ashok kumar Ganesan]

Does it can be imported in .ts?

[Daniel Tonon]

@AshokkumarGanesan Yeah it has good TypeScript support :)