cypress-plugin-tab

What is cypress-plugin-tab?

The cypress-plugin-tab package is a Cypress plugin that allows you to simulate tab key events in your Cypress tests. This is particularly useful for testing keyboard navigation and accessibility features in web applications.

What are cypress-plugin-tab's main functionalities?

Simulate Tab Key Press

This feature allows you to simulate a tab key press to move focus from one input element to the next. The code sample demonstrates how to focus on the first input element and then simulate a tab key press to move to the next focusable element.

cy.get('input').first().focus().tab();

Simulate Shift+Tab Key Press

This feature allows you to simulate a Shift+Tab key press to move focus backward to the previous input element. The code sample demonstrates how to focus on the last input element and then simulate a Shift+Tab key press to move to the previous focusable element.

cy.get('input').last().focus().tab({ shift: true });

Other packages similar to cypress-plugin-tab

cypress-real-events

The cypress-real-events package allows you to simulate real user interactions like key presses, mouse clicks, and more. It provides more comprehensive interaction capabilities compared to cypress-plugin-tab, which is focused specifically on tab key events.

cypress-commands

The cypress-commands package extends Cypress with additional commands for various user interactions, including keyboard events. While it offers a broader range of commands, it may not be as specialized in handling tab key events as cypress-plugin-tab.

README

cypress-plugin-tab beta

A Cypress plugin to add a tab command

:warning: this module is in beta, and might cause some strange failures. Please report bugs in the issues of this repo.

Note: please refer to this issue for updates about official cypress tab support

Installation

Add the plugin to devDependencies

npm install -D cypress-plugin-tab

At the top of cypress/support/index.js:

require('cypress-plugin-tab')

Usage

• .tab() must be chained off of a tabbable(focusable) subject, or the body
• .tab() changes the subject to the newly focused element after pressing tab
• .tab({ shift: true }) sends a shift-tab to the element

  cy.get('input').type('foo').tab().type('bar') // type foo, then press tab, then type bar
  cy.get('body').tab() // tab into the first tabbable element on the page
  cy.focused().tab() // tab into the currently focused element

shift+tab:

cy.get('input')
  .type('foop').tab()
  .type('bar').tab({ shift: true })
  .type('foo') // correct your mistake

License

MIT