Testes de ponta a ponta no front-end com Cypress
Hoje veremos um teste bastante interessante do lado do front-end conhecido como testes ponta a ponta ou em inglês end to end(E2E). E para isso iremos utilizar uma ferramenta muito poderosa, simples de aprender e utilizar: o Cypress.
O que é o Cypress?
O Cypress é uma ferramenta focada exclusivamente em teste de última geração para front-end, com ele você pode escrever os tipos de testes:
- Testes de ponta a ponta
- Testes de integração
- Testes unitários
É possível testar com qualquer coisa que seja executada através do navegador, em estruturas com React, Angular, Vue, Elm, etc… e em páginas ou aplicativos que são renderizados pelo servidor.
Outras ferramentas de testes como por exemplo o Selenium rodam fora do navegador, executando comandos remotos pela rede. Já o Cypress é executado no mesmo loop de execução que sua aplicação.
Como o Cypress opera dentro da sua aplicação, isso significa que ele tem acesso nativo a todos os objetos, seja window, document, um elemento DOM, uma função, temporizador, ou qualquer outra coisa. Você tem acesso a tudo.
Antes do Cypress, para realizar um teste de ponta a ponta era necessário escolher, instalar e configurar diversas bibliotecas como: Mocha, Jasmine, Qunit, Chai, Expect.js, Selênio, Webdriver, Sinon, TestDouble. Já com o Cypress temos uma estrutura de tudo em um, facilitando e permitindo focar especificamente nos testes.
Outras vantagens do Cypress
Além de todas as características que vimos, o cypress também possui outras muito interessantes como:
- Viagem no tempo(time-travel)
O cypress faz prints durante a execução dos teste. Basta passar o mouse sobre os comandos no log para ver exatamente o que aconteceu em cada etapa. - Debugável
Depure diretamente de ferramentas conhecidas como Chrome DevTools. Os erros são apresentáveis de forma legível e o rastreamento de pilha tornam a depuração extremamente rápida. - Recarga em tempo real
O Cypress é recarregado automaticamente sempre que você faz alterações nos seus testes. - Espera automática
Nunca mais adicione esperas(waits) nos seus testes. O Cypress espera automaticamente por comandos e afirmações antes de prosseguir. O inferno assíncrono acabou. - Capturas de tela e vídeo
Em caso de falhas a tela é capturada automaticamente, ou um vídeo é gravado em todo o seu conjuntos de testes executados.
Hora da mão na massa!
Falar sobre características pode ser muito fácil né? Mas agora é a hora de ver o bichão funcionando ! ! !
Iremos reproduzir o desenvolvimento de uma Single Page Application utilizando o framework Vue.js e utilizar o Cypress como ferramenta de testes.
Apesar de utilizar Vue.js para o projeto de exemplo, na Kovi utilizamos diversos projetos em diferentes frameworks como React, Vue, Flutter. Cada um com sua finalidade. Porém no front-end o Vue.js vem sendo adotado como a melhor opção atualmente.
Requerimentos
Para criar nosso projeto Vue.js precisamos ter o Vue CLI instalado em nosso ambiente de desenvolvimento. É necessário Node.js na versão 12 ou superior.
Para instalar o Vue CLI globalmente, basta executar em seu terminal o comando:
npm install -g @ vue / cli
ou
yarn global add @ vue / cli
Após a instalação você pode verificar se a instalação ocorreu corretamente com o comando:
vue - version
Criando um projeto com Vue CLI
Agora iremos criar um projeto do zero. Para iniciarmos o processo utilizamos o seguinte comando:
vue create projeto-vue-cypress
O CLI irá solicitar qual tipo de preset iremos utilizar, selecionamos o Manually select features. Logo em seguida iremos escolher o que o nosso projeto irá conter, para selecionar basta utilizar a barra de espaço do seu teclado. Iremos selecionar as seguintes alternativas:
Após selecionar as alternativas iguais as da imagem, basta pressionar enter para prosseguir. A próxima pergunta do CLI é se iremos utilizar o modo history, basta apertar enter para prosseguir com o padrão.
Para o linter selecionamos a seguinte alternativa:
E deixamos o Lint on save ativo na alternativa seguinte.
Agora na hora de escolher a ferramenta de testes E22 selecionamos o Cypress:
Na próxima alternativa escolhemos arquivos dedicados para as configurações:
E por fim, apenas pressionamos enter sobre utilizar as predefinições do projeto para projetos futuros.
Agora o CLI irá baixar todos os pacotes necessários para o projeto. Pode levar alguns segundos dependendo da sua internet.
Ao finalizar a instalação de todos os pacotes vamos acessar a pasta do projeto criado e rodar o comando para iniciar o servidor local de desenvolvimento:
veiculação de execução por minuto
Caso tudo ocorra bem, iremos acessar no browser o endereço http://localhost:8080 e teremos nossa aplicação base rodando:
Criando um formulário básico
Para simular um projeto real faremos um pequeno formulário sem nenhuma biblioteca UI. Para isso dentro do diretório src/views iremos criar um novo componente Form.vue com o seguinte código:
No arquivo index.js dentro do diretório src/router adicionamos um nova rota para nosso formulário:
E agora acessando http://localhost:8080/form podemos visualizar o formulário criado:
Se tentarmos clicar no botão de cadastro sem termos preenchido os campos, a mensagem será exibida:
E quando todos os campos são preenchidos e apertamos o botão cadastrar é exibida a mensagem de sucesso:
Iniciando os testes
Agora que temos nossa aplicação front-end pronta vamos iniciar os testes com Cypress. Como utilizamos o vue-cli para adicionar o Cypress dentro do projeto front-end, ele adicionou um diretório chamado tests/cypress.
Dentro do diretório cypress temos um teste de exemplo no diretório specs chamado test.js com o seguinte código:
Vamos entender o está acontecendo neste teste de exemplo.
O comando describe() vem da biblioteca Mocha que é utilizada no Cypress. Ela serve para descrever o que iremos realizar naquele teste.
O comando it() também vem do Mocha e serve para descrever a ação que será realizada naquele teste.
Além disso utilizamos comandos do próprio Cypress como o cy.visit() que serve para acessar uma rota da nossa aplicação e o comando cy.contains() que nos permite acessar um elemento do DOM, neste caso um elemento <h1> que contenha o texto passado como segundo parâmetro.
Muito tranquilo de ler e entender este teste não é mesmo? Mas e agora como fazemos para executa-lo ?
Executando o Cypress
Se analisarmos o arquivo package.json do nosso projeto ele possui alguns comandos:
Para iniciarmos o Cypress, precisamos então rodar o comando:
npm run test:e2e
ou
yarn test:e2e
Mas é necessário que o nosso projeto Vue esteja rodando em ambiente de desenvolvimento ainda, então iremos abrir uma nova aba do terminal e executar um dos comandos citados acima dentro do diretório do projeto.
Aguardamos alguns segundos e a interface gráfica do Cypress será aberta. Nela será listada todos os testes que temos até o momento, que no nosso caso é apenas o test.js.
Para executar o nosso teste exemplo, basta clicar no test.js listado na lista de testes de integração e os testes irão executar automaticamente em um browser do Cypress baseado no chrome.
Na barra na lateral esquerda podemos visualizar tudo o que foi executado em nosso teste. Neste teste de exemplo teve apenas 1 teste e foi executado com sucesso. As etapas deste teste executado foi acessar a rota "/" e verificar se existe uma tag <h1> que contém o texto "Welcome to Your Vue.js App".
E se clicarmos em cima de um dos testes podemos visualizar o que ele executou. No caso do CONTAINS ele exibe onde encontrou a tag no DOM da aplicação.
Criando nosso teste
Agora iremos criar nosso próprio teste para o formulário que criamos. O primeiro passo é criar um novo arquivo chamado form.js no diretório tests/cypress/integrations.
Dentro do arquivo form.js adicionamos o describe() para descrever o que iremos realizar neste teste. E dentro dele, nosso primeiro it() com a ação que será realizada.
O primeiro passo para testar o formulário é acessar a rota /form. Então nosso código para realizar o acesso a essa rota ficará da seguinte maneira:
Para analisar se o teste está funcionando voltamos a interface do Cypress e clicamos no form.js listado, assim o teste será executado.
Agora iremos identificar se há um botão em nosso formulário visível para o usuário. Para isso usaremos 2 comandos novos, o get() para acessar um elemento do DOM e o should() para fazer uma afirmação se o botão está visível. Então criamos o nosso novo teste:
Como o Cypress consegue identificar modificações em tempo real nos arquivos de teste, ele automaticamente roda o teste quando salvamos o arquivo, e se tudo estiver correto, todos os testes irão passar:
Agora iremos clicar no botão já que sabemos que ele está visível para o usuário e verificar se há uma mensagem de erro para usuário. Para isso iremos usar outro comando click() do javascript. E como o erro é exibido em uma tag <h1>, verificaremos se tem o texto "Preencha os campos".
É possível verificar também se um elemento do DOM contém uma classe CSS, podemos verificar no <h1> se ele contém a classe validation-error que criamos para a mensagem de erro.
Adicionamos os seguinte comandos:
E podemos ver o resultado do teste no browser do Cypress:
E por fim precisamos preencher o formulário com dados, e apertar no botão de cadastrar. Lembram que colocamos nos inputs do formulário um data-test ? Agora é a hora de utiliza-lo!
Como temos mais de 1 input no nosso DOM, precisamos então acessa-los por algum identificador único. E esse identificador é o data-test que criamos.
Além disso para preencher o input com um dado iremos usar o comando type(). Após o preenchimento dos campos também temos que clicar no botão de cadastrar novamente e verificar se a mensagem "Sucesso!" será exibida. Vejamos o código necessário:
A execução irá mostrar o preenchimento dos campos, o clique do botão e a mensagem de sucesso sendo exibida:
E ao final de todos os testes implementados o arquivo form.js fica da seguinte maneira:
E assim conseguimos criar nosso primeiro teste ponta a ponta em uma aplicação front-end. 🤓
Conclusão
O Cypress vem sendo adotado na Kovi tanto para projetos legados quanto para novos produtos. Sua facilidade, simplicidade e adaptabilidade nos fez escolhe-lo para os testes E2E e possibilitar que os testes E2E caminhem alinhados ao desenvolvimento.
Além disso como vimos no decorrer deste artigo não é necessário um conhecimento profundo em testes, e basta o conhecimento básico de javascript,CSS e HTML para conseguir realizar os testes em sua aplicação.
O projeto executado neste artigo poderá ser encontrado no github. Basta clona-lo e executar os passos explicados para levantar o servidor local e iniciar os testes E2E.
Espero que tenha ajudado você de alguma forma. Até breve =)
Referência
Documentação do Cypress: https://www.cypress.io/
Github do projeto: https://github.com/kovihq/projeto-vue-cypress
