Mini-Roteiro Prático sobre Testes End-to-End usando Cypress

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.

Instalação e Execução do Cypress

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

Passo 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-livraria

Passo 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.0

Observaçã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.

Tarefa #1: Testando o Front-end da micro-livraria

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

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.

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.

Tarefa #2: Testando a Compra de um Livro

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.contains para selecionar o botão Comprar e para clicar nele (função click)
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

Tarefa #3: Salve suas mudanças

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

Comentário Final

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.

Créditos

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.

ifpi-picos / exemplo-cypress-DiesonSDB