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?

score 25 · Accepted Answer · edited Jan 12 '22 at 05:22

25

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.

edited Jan 12 '22 at 05:22

Nate Anderson

18,334
18
100
135

answered Mar 05 '19 at 18:29

kuceb

16,573
7
42
56

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 – Asanka Siriwardena Nov 15 '20 at 15:48
Does it can be imported in .ts? – Ashok kumar Ganesan Dec 22 '20 at 07:56
@AshokkumarGanesan Yeah it has good TypeScript support :) – Daniel Tonon Aug 14 '21 at 03:02
Does not seem to work in Cypress 12 :( No such command ... – Marcus Jan 24 '23 at 16:07

Cypress: type tab key

1 Answers1

Linked