Testes e2e com Cypress

Automatizar testes é fundamental no trabalho de uma equipe, pois garante uma maior produtividade (mais testes são executados em menos tempo), segurança no código (novas regras não interferiram nas regras antigas) e desempenho. A automação consiste em escrever testes uma única vez e executá-los inúmeras vezes, automaticamente. Isso deixa o time mais confiante, protegidos de resultados inesperados, o que torna todo o processo menos custoso.

Isso é o que o QA Rafael Berçam faz na MaxMilhas e mostrou, no meetup #6 Automação com Cypress, como uma das ferramentas que utiliza funciona.

Organização dos testes

De acordo com Martin Fowler, testes automatizados podem ser separados em Testes Unitários (Unit), Testes de Serviço (Service) e Testes de Interface do Usuário (UI), onde ele criou a seguinte pirâmide:

Pirâmede de teste

Testes unitários têm por objetivo testar a menor parte testável do sistema, como um método, e por isso representa a maior parte dos testes. Geralmente são fáceis de construir e rápidos de serem executados.

Testes de serviço ou de integração representam um avanço no caminho de cobertura do sistema, pois testam a conexão das diversas pequenas partes (unit) a partes externas, as chamadas de serviços, como APIs, ou as de acesso ao banco de dados.

Testes de interface do usuário ou aceitação validam aspectos da interface e execução correta em diferentes browsers. Como validam como a interação do usuário reflete após serem executadas regras e acessos a serviços, são os testes mais completos, representam fluxos.

Cypress.io

Visando os objetivos impostos na pirâmide de testes, cypress é a ferramenta que utiliza o Javascript para sua escrita e possibilita que sejam realizados testes para cada camada da pirâmide, se destacando no âmbito dos testes end-to-end (e2e) . Tal ferramenta oferece a proposta de ser de fácil instalação, configuração e utilização, além de ser enxuto e leve. Neste contexto, é explicado como utilizá-lo em testes de UI, de modo desacoplado de um projeto.

Hands-on — A configuração do Cypress

Inicialmente, é necessário ter instalado na máquina o NodeJS e o VSCode, como IDE/editor de texto para javascript.

Ao abrir o VSCode, seleciona-se uma pasta onde conterá o projeto:

Após selecionar o local do projeto. Abre-se o terminal:

Em seguida, cria-se o projeto com o seguinte comando:

  • npm init

Após isso, será solicitado:

  • Nome do pacote (package name)
  • Versão (version)
  • Descrição (description)
  • Ponto de iniciação (entry point)
  • Comando de teste (test command)
  • Repositório no git (git repository)
  • Palavras chaves (keywords)
  • Autor (author)
  • Licença (license)

Ao preencher todas as informações ou selecionar a alternativa padrão, será exibido um json para verificação das informações fornecidas.

Então, concluída a criação do projeto, instala-se o pacote referente ao Cypress, com o comando:

  • npm i cypress

Após instalação, o cypress será colocado como dependência do projeto, no arquivo package.json. Neste mesmo arquivo, modifica-se a seção de scripts, para que os comandos do cypress possam ser executados de duas maneiras:

  • [cypress:open] — executa os testes abrindo o browser e podendo ver as interações
  • [cypress:run] — executa os testes onde mostra apenas os status através do terminal

Posteriormente à modificação do arquivo, executa-se o seguinte comando para iniciar o cypress:

  • npm run cypress:open

Uma pasta para o cypress será criada no projeto, contento testes de exemplo, conforme exibido na figura abaixo:

Também será aberto um dashboard, mostrando os testes existentes no projeto:

Com tudo pronto e configurado, pode-se criar o primeiro teste.

Hands-on — A escrita do teste

Primeiramente, cria-se um arquivo dentro da pasta cypress/integration como o nome do teste.

No exemplo, o nome do arquivo é “teste_cy.spec.js”, e contém o seguinte código de teste:

Analisando o código:

  • describe: tem dois argumentos, o primeiro é uma descrição do que é o teste e o segundo é uma função de callback que executa qualquer código.
  • beforeEach: possui um parâmetro que é uma função de callback e, nesta parte garante-se que o código inserido irá executar antes de qualquer teste ser executado.
  • cy.visit: avisar ao código qual página estará sendo testada
  • it: caso de teste o qual possui dois parâmetros, onde o primeiro seria uma descrição do caso de teste e o segundo uma função de callback que teria os códigos de teste. Podem existir vários casos de teste no teste.
  • cy.get: recuperar um elemento da tela com base em id, class, tag ou alguma outra anotação
  • cy.get(‘…’).type(‘…’): digita os caracteres no campo de texto ou realiza alguma ação, no caso de ter ‘{enter}’
  • cy.contains(‘…’).click({force:true}): recupera um elemento na tela que contém uma cadeia de caracteres definida e simula um click de mouse no mesmo

Então este caso de teste acessa a página do google, digita alguns caracteres no campo de busca, pressiona o “enter” para iniciar a pesquisa e clica-se no link que contém alguns caracteres pré-definidos. Ao abrir a nova página, é verificado se existe algum conteúdo determinado.

Obs.: É necessário inserir o seguinte código no arquivo cypress.json para poder habilitar o cross origin (nesse caso é permitir que o site do google seja acessado pelo cypress):

  • { "chromeWebSecurity": false }

Escrito o código do teste, pode-se executá-lo.

Hands-on — A execução do teste

De forma simplificada, apenas executa-se o comando:

  • npm run cypress:open

E o resultado desta execução, pode-se conferir no vídeo abaixo:

Conclusão

Nota-se que com pequenos passos e com poucas configurações consegue-se criar um teste automatizado na camada de UI. Em comparação com demais ferramentas presentes no mercado, como o Selenium, onde necessita-se de ferramentas auxiliares para o seu funcionamento, o Cypress atende o objetivo de modo simples, leve e rápido.

Contribuidores

Bachelor in Computer Science, MBA in Software Architecture and .NET Developer.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alex Alves

Alex Alves

Bachelor in Computer Science, MBA in Software Architecture and .NET Developer.

More from Medium

How to make a test using Serenity Bdd and Github Copilot?

Hello Cypress!!

Introducing Testsigma CE: An open source test automation platform for all web, mobile apps & APIs

Visual testing with Cypress