Como digitar e pressionar ENTER com Cypress

Hoje em “pitadas de Cypress”, aprenda como testar uma funcionalidade de busca como um usuário real

Quando escrevemos testes end-to-end, é importante que os testes simulem o uso da aplicação da forma mais próxima à qual um usuário real faria.

Vejamos o site de busca DuckDuckGo como exemplo.

Quando um usuário faz uma busca, normalmente ele (ou ela) digita o que está procurando e então pressiona a tecla ENTER.

Obs.: Nada o(a) impede de digitar no campo de busca e pressionar o botão da lupa, mas normalmente, usuários usam a tecla ENTER.

Porém, ambos os cenários devem estar cobertos por testes, certo?

Vejamos como testar tais cenários com Cypress.

// search.cy.js

describe('DuckDuckGo', () => {
  beforeEach(() => {
    cy.visit('http://duckduckgo.com')
  })

  it('busca digitando e pressionando ENTER', () => {
    cy.get('#search_form_input_homepage')
      .should('be.visible')
      .type('Cypress.io{enter}')

    cy.get('.results')
      .should('contain', 'cypress.io')
  })

  it('busca digitando e clicando na lupa', () => {
    cy.get('#search_form_input_homepage')
      .should('be.visible')
      .type('Cypress.io')
    cy.get('#search_button_homepage')
      .should('be.visible')
      .click()

    cy.get('.results')
      .should('contain', 'cypress.io')
  })
})

Como você pode perceber no primeiro teste (busca digitando e pressinando ENTER), quando chamo o método type(), além de passar o termo o qual quero buscar (cypress.io), passo entre chaves o texto enter ({enter}). Dessa forma, o Cypress vai digitar o texto e simular a tecla ENTER sendo pressionada.

🎉🎉🎉

No outro teste (busca digitando e clicando na lupa) não tem nada de novo. Primeiro digito no campo, depois clico no botão da lupa.

Pronto!

A mensagem principal é, teste a aplicação como seus usuários reais à utilizam e cubra o maior número de cenários possíveis. Dessa forma, você terá segurança em modificar a aplicação e saber se tudo continua funcionando como esperado, ou se você quebrou algo e precisa corrigir antes de seguir adiante.

Para conhecer mais sobre a funcionalidade cy.type(), recomendo a leitura da documentação oficial do Cypress.io.

Por fim, como uma alternativa para pressionar enter (ou outras teclas do teclado), confira o plugin @walmyr-filho/cy-press e seu comando customizado .press().

---

E aí, gostou?

Deixa um comentário.

---

Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.

---

Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça os cursos da Escola TAT.

• Cypress, do Zero à Nuvem
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

---

Bons testes! 🎉