Olá pessoal, hoje iremos aprender como implementar testes E2E no Quasar Framework utilizando a ferramenta Cypress.io. O Cypress é uma ferramenta de teste de front-end e código aberto, criada para a Web moderna.
Caso você ainda não tenha conhecimento no Quasar Framework, pode ter algumas dicas neste artigo:
Criando nosso projeto com Quasar Framework
O primeiro passo é criar um projeto com o quasar-cli, através do comando no seu terminal de preferência:
quasar init quasar-cypress
Durante a instalação, irei escolher apenas o necessário para realizarmos nosso primeiro teste. Caso você esteja usando um projeto já existente poderá pular essa etapa.
Decidi instalar Axios e Vuex, caso você venha a prosseguir seus estudos de testes.
Criando uma nova página
A partir do quasar-cli, nós iremos criar uma nova página. Iremos criar uma page chamada Usuario. Isso é feito através do comando:
quasar new page Usuario
E agora precisamos adicionar a rota referente à nossa nova página. Para isso entramos no arquivo src/router/routes.js
Construindo um formulário
Precisamos editar a nossa página de Usuário. Ela encontra-se no caminho src/pages/Usuario.vue. Adicionamos então a classe container em nossa page e criamos um título com a classe q-display-2, depois criamos nossa row com 3 col-12 onde ficam nossos q-inputs. Os inputs são nome, sobrenome e endereço.
Além disso adicionamos um botão para confirmação do cadastro, com um método apenas para mostrar uma mensagem de confirmação.
Então nossa página ficará assim:
Observe que cada input e button do nosso formulário, contém a propriedade data-cy. Utilizamos essa propriedade para facilitar os testes com cypress no futuro, pois como não é uma boa prática utilizar id para elementos HTML numa Single Page Applications, utilizamos uma propriedade personalizada. Isso será fundamental para nossos testes, não esquece de colocar em cada um.
Como estamos usando o q-input que nada mais é que um componente do Quasar, precisamos então importa-lo em nosso quasar.conf.js:
Podemos estar construindo nosso formulário com o quasar rodando em modo de desenvolvimento sem problemas, pois com o “hot reload” do seu CLI todas as modificações são atualizadas em tempo real.
Para rodar em modo de desenvolvimento basta entrar na pasta de seu projeto e executar o comando:
quasar dev
Nosso ambiente de desenvolvimento então será levantado na porta 8080(ou caso esteja ocupada em outra) e o console mostrará:
Com nosso projeto rodando, precisamos acessar a rota de usuários que criamos. Então acessamos http://localhost:8080/#/usuario para visualizar nosso formulário, que fica com uma aparência mais ou menos assim:
Faça o teste preenchendo os campos, e clicando no botão confirmar para exibir a mensagem de confirmação. Ao clicar no botão, a mensagem é exibida logo abaixo do formulário:
Porém , levando em consideração que seu sistema cresça e tenha muitos formulários de cadastros. Testa-los a cada nova versão manualmente será uma tarefa repetitiva e cansativa! Para isso iremos automatizar essa tarefa com o Cypress.
Instalando o Cypress no projeto
Então agora vamos parar nosso servidor de desenvolvimento no terminal, e executar o comando de instalação:
npm install cypress --save-dev
A versão que estou utilizando neste artigo do cypress é a ^3.1.4.
Ao finalizar a instalação, iremos agora criar 2 novos comandos em nosso package.json:
Agora vem uma estratégia para não termos trabalho para configurar a estrutura de pastas do Cypress. O comando cypress:open serve para abrir a interface do cypress. Então em nosso terminal, vamos executar este comando e aguardar um pouco:
npm run cypress:open
A primeira vez que executado, demora um pouquinho para abrir a interface, então seja paciente e aguarde. A interface será essa:
Com isso ele automaticamente via criar uma pasta cypress e um arquivo cypress.json em nosso projeto.
Em diretório cypress temos algumas subdiretórios:
- fixtures = basicamente são dados fixos para utilizarmos em nossos testes
- integration = onde ficarão nossos testes
- plugins = permitem que você toque, modifique ou estenda o comportamento interno do cypress
- support = commandos personalizados e importação de arquivos
E no nosso arquivo cypress.json é onde ficarão as configurações globais do cypress.
Com nossa interface aberta, podemos agora no terminal rodar novamente o comando do quasar para o modo de desenvolvimento:
quasar dev
Escrevendo nossos testes
No diretório cypress/integration onde atualmente vem com um diretório de exemplos, podemos apagar, ou você manter para ter como referência para outros testes. Criamos um arquivo dentro do diretório com o nome CadastroUsuarios.spec.js.
Logo no início do arquivo, precisamos adicionar essa tag personalizada para que o cypress identifique que este arquivo é um arquivo de testes do cypress:
O primeiro passo vai ser escrever o contexto de nosso teste que será “Cadastro de Usuário”. Posteriormente iremos fazer o nosso primeiro teste através do it. A primeira coisa que precisamos para testar o cadastro de usuários, é entrar na rota onde existe o formulário, para isso usamos o comando cy.visit() para acessar a rota. Só que para evitar que tenhamos que escrever a url completa a cada teste, e caso tenhamos mudado a porta ou endereço do servidor, tenhamos que mudar em todos os nossos testes, iremos configurar uma urlBase no nosso arquivo cypress.json :
E nosso arquivo de teste fica desta forma:
Agora na interface do cypress, verificamos se nosso arquivo de teste de integração está sendo exibido corretamente:
Verificamos na aba Settings se a baseUrl foi carregada corretamente, caso não tenha sido carregada é necessário fechar o cypress, abrir um novo terminal acessando o projeto e rodar o comando:
npm run cypress:open
Caso contrário, ele já aparecerá desta forma:
Com tudo funcionando vamos executar o nosso teste!
Executando testes
Com nossa interface do cypress aberta, basta você clicar em cima do nome do teste que deseja executar, que no nosso caso é o CadastroUsuario.spec.js. E então o teste será executado em um navegador integrado do cypress que pode ser o chrome ou electron.
Obs: não se esqueça que para o teste funciona e acessar a rota corretamente é necessário que o seu projeto esteja rodando no modo de desenvolvimento!
Então, após clicar no teste o navegador será aberto e executará as tarefas. Por enquanto apenas acessamos a rota http://localhost:8080/usuario. Após executar o teste será exibido uma lista com os testes de sucesso e falhas, até aqui só obtivemos sucesso. \o/
Acessando um campo e preenchendo com valor
Acessar um campo com cypress é uma tarefa muito fácil se você sabe o mínimo de HTML e CSS. Para acessar o primeiro campo nome iremos usar o comando cy.get(), ele serve para pegarmos algo em nosso DOM.
Na nossa página de usuário, nós criamos o formulário com data-cy=”nome” justamente para facilitar nossos testes com cypress, pois em Single Page Applications não é uma boa prática utilizar id, então criamos nosso identificador personalizado. Então através do get iremos pegar o o input com data-cy=”name” desta forma:
cy.get('input[data-cy="nome"]')
O próximo passo é dar o foco no input, pois como nós fizemos um input que tem o label flutuante, precisamos primeiro focar no input para depois preenchermos ele com um valor.
Para isso adicionamos o comando focus():
cy.get('input[data-cy="nome"]').focus()
E por fim, iremos preencher o o valor do campo com o comando type():
cy.get('input[data-cy="nome"]').focus().type('Patrick')
Então nosso teste ficará desta forma:
Como o cypress identifica as modificações no arquivo de teste, ele automaticamente executa o teste caso esteja aberto em sua interface. Mas se quisermos executa-lo novamente, basta clicar no botão de recarregar e aguardar a execução dos testes:
Observe como agora ele foca no campo de nome e o preenche automaticamente como mágica!✨
A tarefa de preenchimento de dados irá se repetir para os outros campos, porém agora iremos clicar no botão de confirmar. Para isso utilizaremos o comando click() para executar a ação de clicar no botão, bem parecido como fizemos nos input’s.
Nosso teste ficará desta forma:
E agora iremos validar se o cadastro foi bem sucedido, verificando se após clicar no botão cadastrar a mensagem de sucesso foi exibida. Para isso iremos utilizar o comando contains(), no qual podemos verificar a existência de um texto dentro de um elemento do DOM:
E ao recarregar nossos testes, vemos que todos passaram com sucesso!
Executando Testes a partir do Terminal
Outra forma de executar os testes, é usando o próprio termina. Utilizando o comando que configuramos no nosso package.json podemos executar e visualizar o resultado todo no terminal, o cypress faz tudo no background:
npm run cypress:run
Considerações Finais
Este artigo é apenas uma introdução de como utilizar o cypress com o quasar. A partir dai você pode construir os testes para seu projeto e poupar bastante trabalho a cada novo teste executado. No meu github, tenho um repositório com um projeto quasar já integrado com cypress.
