Menu
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?
523
Cypress does not have a specific command to work with tabs. It has a workaround method in jQuery through which it handles the tabs. In the html code, a link or button opens to a new tab, because of the attribute target. If the target attribute has value blank, it opens to a new tab.
Cypress automatically matches the spec and browser behavior for pressing the {enter} key when the input belongs to a <form> . This behavior is defined here: Form Implicit Submission. For instance the following will submit the form.
As you can see in the first test ( searches by typing and pressing ENTER ), when I call the type() method, in addition to passing the term I want to search for ( cypress.io ), I pass the text enter wrapped in curly braces ( {enter} ). This way, Cypress will type the text and simulate the ENTER key is pressed.
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-taband can thumbs up this issue.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With