Simulando navegação por teclado com as novas teclas do comando cy.press na versão 15.1.0 do Cypress

TAB, SPACE e muito mais agora fazem parte da sua estratégia de testes automatizados

A versão 15.1.0, o Cypress introduziu uma melhoria importante para quem testa acessibilidade e navegação por teclado: o comando cy.press agora suporta novas teclas, como ENTER, SPACE e outras, além da tecla TAB (disponível desde a versão 14.3.0). Essa mudança, destacada no changelog oficial, amplia o leque de cenários que conseguimos cobrir com testes end-to-end.

Se antes precisávamos de workarounds para simular o pressionamento de teclas específicas, ou mesmo de testes manuais, agora podemos testar fluxos completos de interação apenas com o teclado, garantindo que pessoas que dependem dessa forma de navegação também tenham uma boa experiência. E tudo isso de forma automatizada!

Vejamos um exemplo.

O cenário de teste

No exemplo abaixo, criamos um teste que valida a navegação por um messenger de uma aplicação fictícia, utilizando apenas TAB para avançar entre os campos e SPACE para acionar os botões:

Para digitar nos campos, utilizamos a conhecido comando cy.type(), existente desde as primeiras versões do Cypress.

// cypress/e2e/spec.cy.js

describe('TAB navigation', () => {
  beforeEach(() => {
    // Set a cookie before visiting the page to prevent it from showig up
    cy.setCookie('cookieConsent', 'accepted')
    // Visit the app
    cy.visit('/')
    cy.get('table').should('be.visible')
    // Press TAB 20 times to reach the open messenger button
    Cypress._.times(20, () => {
      cy.pressTAB()
    })
    // Make sure the open messenger button is focused
    cy.get('[aria-label="Open messenger"]')
      .should('be.focused')
    // Open the messager by pressing SPACE on the focused button
    cy.pressSPACE()
  })

  it('navigates through the messenger using the TAB key', () => {
    // Ensure the messenger opens with its first field pre-focused and types the required info on it (i.e., the name field)
    cy.get('#messenger-name')
      .should('be.focused')
      .type('John Doe')
    // Press TAB to move to the email field
    cy.pressTAB()
    // Make sure the email field is focused and type a valid email in it
    cy.get('#email')
      .should('be.focused')
      .type('[e-mail]')
    // Press TAB to move to the message textarea
    cy.pressTAB()
    // Make sure the textarea field is focused and type a message in it
    cy.get('#message')
      .should('be.focused')
      .type('The client with ID 5 has no contact info available.')
    // Press TAB to move to the send button
    cy.pressTAB()
    // Make sure the button is focused
    cy.contains('button', 'Send')
      .should('be.focused')
    // Press SPACE to submit the form
    cy.pressSPACE()
    // Ensure the success message is displayed (which could be read by a screen reader)
    cy.contains('Your message has been sent.').should('be.visible')
    // Press TAB to move to the close messenger button
    cy.pressTAB()
    // Ensure the closed button is focused
    cy.get('button[aria-label="Close messenger"]')
      .should('be.focused')
    // Press SPACE to close the messenger
    cy.pressSPACE()
    // Ensure the messenger was closed by checking that the open messenger button is now visible
    cy.get('button[aria-label="Open messenger"]').should('be.visible')
  })
})

Os comandos customizados

Para simplificar a leitura do teste, criamos dois comandos customizados no arquivo cypress/support/commands.js:

Cypress.Commands.add('pressTAB', () => {
  cy.press(Cypress.Keyboard.Keys.TAB)
})

Cypress.Commands.add('pressSPACE', () => {
  cy.press(Cypress.Keyboard.Keys.SPACE)
})

Esses comandos são carregados automaticamente pelo arquivo cypress/support/e2e.js:

import './commands'

O que mudou no cy.press?

Antes (entre as versões 14.3.0 e 15.0.0), o suporte era limitado somente a tecla TAB. Agora, podemos acessar atalhos e teclas especiais como ENTER, BACKSPACE, SPACE, entre outras.

Isso abre espaço para testes de:

• Acessibilidade: garantir que os elementos da página são alcançáveis por TAB e ativáveis por SPACE ou ENTER.
• Fluxos reais de formulários: preencher campos apenas com navegação por teclado.
• Interações avançadas: menus suspensos, modais e tooltips acionados por teclas específicas.

Conclusão

Com o suporte expandido do comando cy.press, fica mais simples criar testes que refletem o uso real da aplicação por usuários que dependem de navegação por teclado.

Essa evolução do Cypress não só melhora a cobertura de testes, mas também reforça o compromisso com experiências inclusivas e acessíveis.

👉 Confira a documentação oficial do comando cy.press e explore suas possibilidades para seus próximos testes.

---

Quer aprender mais sobre testes de acessibilidade com Cypress? Conheça o curso Cypress Simulator da Escola Talking About Testing.