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 meus cursos no Udemy.

Bons testes! 🎉

Publicado por Walmyr

I'm a software engineer that loves testing. I'm also a clean coder, blogger, YouTuber, Cypress.io 🌲 ambassador, writer, online instructor, mentor, consultant, speaker, an active member of the testing automation and JavaScript communities, and a fan of good music, tattoos, vegan 🌱 food, and skateboarding.

3 comentários em “Como digitar e pressionar ENTER com Cypress”

  1. Pingback: Por que você deve usar Cypress para automação de testes – TALKING ABOUT TESTING

    1. Oi Priscila,
      Por favor, faça um commit do seu código (com todas suas mudanças), publique no GitHub (com um git push) e compartilhe o link do seu repositório para que eu possa baixar o código em meu computador e tentar reproduzir o problema. Dessa forma, mais facilmente poderei te ajudar.
      Fico no aguardo.

      Responder

Deixe um comentário