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.

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.

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.

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.

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.

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:

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.

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

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