No último encontro da Comunidade de Prática de Qualidade de Software da SoftDesign*, compartilhei com os colegas meus conhecimentos sobre o Cypress. Ele é um framework de testes, de código aberto e de fácil configuração.
Totalmente baseado em uma nova arquitetura, isenta de outros frameworks de testes, o Cypress apresenta um painel próprio que exibe exatamente o que está acontecendo durante a execução dos testes. À medida que o script é escrito, é possível acompanhá-lo, auxiliando o Analista de Testes (QA) na visualização de quais partes do código necessitam de ajustes.
Cinco tipos de testes de software podem ser realizados com o framework. São eles:
Para realizar testes com o framework, as seguintes tecnologias podem ser utilizadas:
Para um Projeto Cypress, antes de qualquer coisa, é preciso preparar o ambiente com Node.JS e Visual Studio Code (VS Code). Em seguida, crie uma pasta com o nome do seu projeto e inicie um console para executar o comando: npm init –y. Ele criará o arquivo package.json.
Em seguida, no console, execute o comando: code. para abrir o projeto no VS Code.
Com o projeto criado, iremos abrir o terminal do VS Code e executar o comando: npm install cypress, que é o comando para instalar o Cypress no nosso projeto. Em seguida, será possível visualizar a versão instalada do framework no arquivo package.json, e nele iremos adicionar o script “cypress:open”:”cypress open”.
No terminal do VS Code, execute o comando: npm run cypress:open. Com o dashboard aberto, o projeto será iniciado com testes exemplos do próprio Cypress. Se você clicar em algum arquivo .spec.js, ele já irá executar os testes desse arquivo.
Para utilizar o Cypress da forma correta, é importante compreender alguns aspectos da sua estrutura, como:
Para criarmos um arquivo de testes, basta adicionar um arquivo com nome do seu teste e com a extensão .spec.js.
Na estrutura, iremos adicionar o describe para dar o contexto dos nossos testes, e o it para criar o teste.
Para facilitar o uso do framework, listarei agora alguns dos principais comandos do Cypress.
Para encontrar elementos em tela:
Para interagir com elementos de tela:
Asserções para nossos testes:
Na imagem abaixo, podemos ver um exemplo de teste funcional no Cypress. No primeiro bloco realizamos as interações de um cadastro; no segundo clicamos no botão de cadastro que chama o método post; e no último bloco realizamos as validações do nosso teste.
Nos testes de API, por sua vez, dividimos a estrutura do teste em três partes: na pasta test ficará o arquivo .spec.js, na pasta request ficará a estrutura da nossa requisição; e na pasta payload fica o corpo de nossa requisição. Podemos ver esse exemplo nas imagens abaixo:
No nosso arquivo .spec fica a validação do nosso teste.
Exemplo de arquivo request:
Exemplo de arquivo payload:
Espero ter esclarecido as principais dúvidas em relação ao Cypress. Se você quiser saber mais sobre o framework clique aqui.
*A Comunidade de Prática de Qualidade da SoftDesign é composta por Analistas de Testes (QA) e demais profissionais interessados. Mensalmente, o grupo se reúne online para compartilhar conhecimento e gerar aprendizado.