O objetivo deste pequeno roteiro é ter um primeiro contato com testes do tipo end-to-end. Esses testes são chamados também de testes de front-end, testes de sistemas, testes de interface Web ou testes de interface com o usuário.
No roteiro, vamos usar uma ferramenta de código aberto para testes end-to-end, chamada Cypress, que permite a escrita desses testes em JavaScript. O Cypress é parecido com o Selenium, para o qual foi mostrado um exemplo de teste no Capítulo 8 do livro Engenharia de Software Moderna.
No roteiro, vamos usar o Cypress para escrever alguns testes end-to-end para uma livraria virtual. Mais especificamente, vamos reusar a micro-livraria do roteiro prático de microsserviços.
Para realização do roteiro, configure o seu ambiente da seguinte forma:
Passo 1: Faça um fork deste repositório, usando o botão "Fork" no canto superior direito da tela.
Passo 2: Clone o projeto para um diretório local:
git clone https://github.com/<SEU USUÁRIO>/demo-cypress.gitPasso 3: Instale o Docker. A micro-livraria (isto é, o sistema que vamos testar) e também o Cypress serão executados por meio de containers.
Passo 4: Coloque o sistema da micro-livraria no ar. Primeiro gere uma nova imagem, executando o seguinte comando na raiz do projeto:
docker build -t micro-livraria -f cypress/Dockerfile .Em seguida, execute a aplicação, chamando no mesmo diretório de antes:
docker run -ti -p 3000:3000 -p 5000:5000 micro-livrariaPasso 5: Agora, vamos executar o Cypress, pela primeira vez, usando o seguinte comando na pasta cypress (ou seja, se estiver na raiz do projeto, execute antes cd cypress; essa pasta é a que contém o arquivo cypress.json):
docker run --network="host" -it -v "$PWD":/e2e -w /e2e cypress/included:9.2.0Observação: na primeira vez que for executado, esse comando pode demorar alguns minutos. pois ele vai baixar a imagem do Cypress e realizar o seu build.
Veja também que essse comando já vai rodar um primeiro teste de exemplo, bem simples, que implementamos no no arquivo spec1.js:
describe('Meu primeiro teste', () => {
it('Não faz nada', () => {
expect(true).to.equal(true)
})
})Antes de prosseguir com o roteiro, analise e entenda, com calma, a saída produzida pelo Cypress.
Vamos agora implementar um teste end-to-end para a micro-livraria. Esse teste vai "simular" um usuário realizando as seguintes operações no site:
- Abrir o site
- Escolher o livro desejado
- Inserir o CEP
- Calcular o frete
- Realizar a compra do livro
Observe que um teste de front-end pode ser comparado com um "robô" simulando um usuário final utilizando as funcionalidades do sistema.
Passo 1:
Crie um arquivo spec2.js na mesma pasta do teste anterior (pasta integration), mas com o seguinte código:
describe('Teste End-to-End', () => {
it('Teste 1: Visita Página', () => {
// abre o site
cy.visit('http://localhost:5000/')
})
})Os comandos do Cypress são sempre executados sobre um objeto cy. A função visit() visita uma página, que, no caso da nossa micro-livraria, está no endereço localhost:5000.
Em seguida, execute este teste usando sempre:
docker run --network="host" -it -v "$PWD":/e2e -w /e2e cypress/included:9.2.0Você vai perceber que o teste vai passar.
Passo 2:
Vamos agora acrescentar novos comportamentos no teste. Especificamente, vamos supor um cenário no qual um usuário compra o livro de Padrões de Projeto.
Primeiro, precisamos garantir que o livro está sendo mostrado na página, do seguinte modo:
describe('Teste End-to-End', () => {
it('Teste 1: Visita Página', () => {
// abre o site
cy.visit('http://localhost:5000/')
})
it('Teste 2: Verifica item na página', () => {
// Verifica se existe o livro desejado
cy.get('[data-id=3]').should('contain.text', 'Design Patterns')
})
})No código anterior, realizamos uma query usando a função get e assumimos que:
- O catálogo de livros é exibido em três colunas.
- O livro desejado está na terceira linha, cujo identificador é
data-id=3.
Por isso, usamos uma asserção que verifica se a terceira coluna inclui a string Design Patterns.
Para rodar o teste, use o mesmo comando de antes. Procure também ver os vídeos que o Cypress grava automaticamente na pasta cypress\cypress\videos.
Passo 3:
Vamos agora incrementar nosso teste, para simular um usuário que insere o CEP no campo indicado e, sem seguida, clica no botão Calcular Frete:
describe('Teste End-to-End', () => {
it('Teste 1: Visita Página', () => {
// abre o site
cy.visit('http://localhost:5000/')
})
it('Teste 2: Verifica item na página', () => {
// Verifica se existe o livro desejado
cy.get('[data-id=3]').should('contain.text', 'Design Patterns')
})
it('Teste 3: Calcula Frete', () => {
// Calcula o frete
cy.get('[data-id=3]').within(() => {
cy.get('input').type('10000-000')
cy.contains('Calcular Frete').click().then
cy.wait(2000)
})
cy.get('.swal-text').contains('O frete é: R$')
// Fecha o pop-up com o preço do frete
cy.get('.swal-button').click()
})
})Primeiro, o teste busca pela terceira coluna e procura pelo campo de input. Em seguida, ele insere o CEP 10000-000 e pressiona o botão Calcular Frete.
Prosseguindo, espera-se 2 segundos na função wait(), para garantir que a janela com o valor do frete vai carregar corretamente.
Então, nessa janela, selecionamos o swal-text e usamos uma asserção para garantir que a mensagem é aquela que esperamos.
Por fim, clicamos no botão para fechar o pop-up.
Se ainda não o fez, rode o teste acima e assista também o vídeo com o passo a passo da sua execução que está na pasta cypress\cypress\videos.
Agora é sua vez de incrementar o teste anterior!
Basicamente, você deve acrescentar código no teste para simular a compra de um livro, conforme explicado a seguir:
- Use a função
cy.containspara selecionar o botão Comprar e para clicar nele (funçãoclick) - Espere que o pop-up seja exibido com a confirmação da compra (função
wait) - Verifique se nesse pop-up temos a messagem:
Sua compra foi realizada com sucesso - Feche o pop-up, clicando em seu botão
Realize um COMMIT e PUSH para salvar suas mudanças no teste.
O commit pode usar qualquer mensagem e basta incluir o arquivo spec2.js
Este roteiro teve como objetivo proporcionar uma primeira experiência prática com o Cypress, para que o aluno possa entender a "mecânica" básica de funcionamento de testes de interface. O site do Cypress possui uma extensa documentação sobre a ferramenta, com diversos exemplos, que pode ser útil para aqueles que quiserem aprofundar no estudo desse tipo de teste.
Este roteiro foi elaborado por Rodrigo Moreira, aluno de mestrado do DCC/UFMG, como parte das suas atividades na disciplina Estágio em Docência, cursada em 2021/1, sob orientação do Prof. Marco Tulio Valente.