How to Press Tabs in Cypress

Currently, there is no official support for trigger the tab key on your keyboard in Cypress. However, as the official documentation suggests, we can us the cypress-plugin-tab package. After running:

npm install -D cypress-plugin-tab

You need to include the package in your support file (by default, located at cypress/support/index.js):

require('cypress-plugin-tab');

Then in your test cases, you can use it by calling the tab command by chaining off from cy.get, or using on the currently focused element:

cy.get('body').tab(); // Tab into the first tabbable element on the page
cy.get('input').type('1').tab().type('2'); // type 1, then press tab, then type 2
cy.focused().tab(); // Tab into the currently focused element

You can also keep calling tab to keep tabbing into further elements. Apart from the tab, a couple of special keys are also supported in Cypress out of the box. Some of the most commonly used ones can be:

cy.get('input').type('{enter}');     // Hit the enter
cy.get('input').type('{backspace}'); // Hit the backspace
cy.get('input').type('{del}');       // Hit the delete key
cy.get('input').type('{selectall}'); // Select everything in the input

Want to learn Cypress from end to end? Check out my Cypress course on Educative where I cover everything:

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Documentation on tabbing in Cypress
• The repository for cypress-plugin-tab
• All supported special sequences