Testes e2e com Cypress. Automatizar testes é fundamental no… | by Alex Alves | Medium
Testes e2e com Cypress
Mar 25, 2019·5 min read
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.
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:
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)
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:
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:
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:
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.
https://medium.com/@faelbercam/um-overview-sobre-cypress-io-framework-de-automa%C3%A7%C3%A3o-de-testes-end-to-end-dc438b9ee7a1