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).
O Cypress permite a criação, execução e depuração de testes. Ele deve ser instalado localmente e possui dois componentes principais: um componente responsável pela execução dos testes e um dashboard para apresentação dos resultados dos testes e realização de tarefas de depuração.
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 Cypress. A forma recomendada é via npm (necessário node.js). No diretório do projeto, execute:
npm install cypress --save-devApós a instalação, no diretório do projeto, será criada uma pasta cypress.
Passo 4: Instale o Docker. A micro-livraria (isto é, o sistema que vamos testar) será executada por meio de containers.
Passo 5: 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:
docker run -ti -p 3000:3000 -p 5000:5000 micro-livrariaPasso 6: Execute o Cypress, utilizando o comando:
npx cypress openSe quiser, faça um teste com algum exemplo simples de teste end-to-end fornecido junto com o Cypress.
Os arquivos de testes do Cypress são uma sequência de funções, em JavaScript, que testam o front-end da aplicação.
Como primeiro teste, iremos apenas observar o resultado de uma simples asserção. Primeiro, crie um novo arquivo de teste chamado meu_teste.js com o seguinte código:
describe('Meu primeiro teste', () => {
it('Não faz nada', () => {
expect(true).to.equal(true)
})
})Salve este arquivo na pasta default na qual ficam os testes do Cypress, normalmente chamados também de specs.
O teste acima é trivial, pois ele apenas checa se true é igual a true. Após salvar o arquivo, procure por ele na lista de testes (specs) do Cypress e clique duas vezes no seu nome para executá-lo. Os resultados serão apresentados na interface do 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 meu_teste_end_to_end.js na mesma pasta anterior, 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 a interface do Cypress. Você 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.
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.
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 meu_teste_end_to_end.js
IMPORTANTE O Cypress instala centenas de arquivos na sua pasta, mas basta fazer o commit do arquivo indicado, ou seja, de um único arquivo.
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.