Olá, pessoal!

Hoje veremos como implementar testes E2E no Quasar Framework utilizando a Cypress.io, uma ferramenta de teste de front-end e código aberto criada para a Web moderna.

Caso ainda não tenha conhecimento do Quasar Framework, acesse algumas dicas no link abaixo:

• Curso em vídeo de Quasar Framework

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 esteja usando um projeto já existente, você 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 criaremos uma nova página – uma chamada Usuario. Isso é feito através do comando:

quasar new page Usuario

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 e 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, então não esqueça de colocar em cada um.

Como estamos usando o q-input, que nada mais é do que um componente do Quasar, precisamos importá-lo em nosso quasar.conf.js:

Podemos construir 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 será então levantado na porta 8080 (ou caso esteja ocupada, em outra) e o console mostrará o seguinte:

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, testá-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 dois 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 ele é executado demora um pouquinho para abrir a interface, então seja paciente e aguarde. A interface será essa:

Com isso, ele automaticamente vai criar uma pasta cypress e um arquivo cypress.json em nosso projeto.

Em diretório cypress temos alguns 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

As configurações globais do cypress ficarão dentro do cypress.json.

Agora com a nossa interface aberta podemos, 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 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 faremos 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.

Observação: não se esqueça que para o teste funcionar e acessar a rota corretamente é necessário que seu projeto esteja rodando no modo de desenvolvimento!

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á exibida uma lista com os testes de sucesso e falhas. Até aqui só obtivemos sucesso.

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 usaremos o comando cy.get(). Ele serve para pegarmos algo em nosso DOM.

Em nossa página de usuário 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. Através do get pegaremos 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, preencheremos o o valor do campo com o comando type():

cy.get('input[data-cy="nome"]').focus().type('Patrick')

Nosso teste ficará da seguinte 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 executá-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 se repetirá para os outros campos, porém, agora clicaremos no botão de confirmar. Para isso, utilizaremos o comando click() para executar a ação de clicar no botão, bem parecido com o que fizemos nos inputs.

Nosso teste ficará desta forma:

Agora validaremos 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:

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 terminal. 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

Conclusão

Este artigo é apenas uma introdução de como utilizar o cypress com o quasar. A partir daí 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.