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

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

Hands-on — A configuração do Cypress

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

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

  • npm run cypress:open

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

Conclusão

Contribuidores

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

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