Skip to main content

How to Press Tab Key in Cypress

There is no direct support to trigger the tab key in Cypress. You can see here work is still going on and ticket is open. However, this can be fulfilled by using a simple plugin that efficiently utilizes the tab trigger and click on tab key.

Step 1: Install Cypress Tab Key Plugin

npm install -D cypress-plugin-tab

install Cypress tabs key plugin

Step 2: Add Cypress Tab Plugin Package In Index.js

Include the package in index.js situated in this path cypress/support/index.js

require("cypress-plugin-tab");

Add Cypress Tab Plugin Package In Index file

Step 3: Use tab() command

Let us Now Witness This Plugin In Action

it('Type Username And Password',()=>{
    cy.visit('https://www.programsbuzz.com/user/login')
    
    cy.get('form').within(()=>{
        cy.xpath("//input[@id='edit-name']").type('Rataalada').tab().type('mloo')
    })
})

Use tab() command in cypress

We can see here that it has typed in the username field, and using the tab chained to it, it went to the following input password field. This is how we can use the external tab plugin in cypress.

Video Tutorial: Cypress Press Tab Key

Tags
Submitted by arilio666 on March 15, 2022

Ashwin is working with iVagus as a Technical Lead. He has experience in various technologies like Cypress, JavaScript, TypeScript, Rest Assured, Selenium, Cucumber, and Java.

About

At ProgramsBuzz, you can learn, share and grow with millions of techie around the world from different domain like Data Science, Software Development, QA and Digital Marketing. You can ask doubt and get the answer for your queries from our experts.