`;
35 | return div;
36 | }
37 |
38 | function calculateShipping(id, cep) {
39 | fetch('http://localhost:3000/shipping/' + cep)
40 | .then((data) => {
41 | if (data.ok) {
42 | return data.json();
43 | }
44 | throw data.statusText;
45 | })
46 | .then((data) => {
47 | swal('Frete', `O frete é: R$${data.value.toFixed(2)}`, 'success');
48 | })
49 | .catch((err) => {
50 | swal('Erro', 'Erro ao consultar frete', 'error');
51 | console.error(err);
52 | });
53 | }
54 |
55 | document.addEventListener('DOMContentLoaded', function () {
56 | const books = document.querySelector('.books');
57 |
58 | fetch('http://localhost:3000/products')
59 | .then((data) => {
60 | if (data.ok) {
61 | return data.json();
62 | }
63 | throw data.statusText;
64 | })
65 | .then((data) => {
66 | if (data) {
67 | data.forEach((book) => {
68 | books.appendChild(newBook(book));
69 | });
70 |
71 | document.querySelectorAll('.button-shipping').forEach((btn) => {
72 | btn.addEventListener('click', (e) => {
73 | const id = e.target.getAttribute('data-id');
74 | const cep = document.querySelector(`.book[data-id="${id}"] input`).value;
75 | calculateShipping(id, cep);
76 | });
77 | });
78 |
79 | document.querySelectorAll('.button-buy').forEach((btn) => {
80 | btn.addEventListener('click', (e) => {
81 | swal('Compra de livro', 'Sua compra foi realizada com sucesso', 'success');
82 | });
83 | });
84 | }
85 | })
86 | .catch((err) => {
87 | swal('Erro', 'Erro ao listar os produtos', 'error');
88 | console.error(err);
89 | });
90 | });
91 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Mini-Roteiro Prático sobre Testes End-to-End usando Cypress
2 |
3 | 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.
4 |
5 | No roteiro, vamos usar uma ferramenta de código aberto para testes end-to-end, chamada [Cypress](https://www.cypress.io), 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]([https://engsoftmoderna.info/cap8.html](https://engsoftmoderna.info/cap8.html#testes-de-sistema)) do livro [Engenharia de Software Moderna](https://engsoftmoderna.info).
6 |
7 | No roteiro, vamos usar o Cypress para escrever alguns testes end-to-end para uma livraria virtual. Mais especificamente, vamos reusar a [micro-livraria](https://github.com/aserg-ufmg/micro-livraria) do roteiro prático de microsserviços.
8 |
9 | ## Instalação e Execução do Cypress
10 |
11 | Para realização do roteiro, configure o seu ambiente da seguinte forma:
12 |
13 | **Passo 1:** Faça um fork deste repositório, usando o botão "Fork" no canto superior direito da tela.
14 |
15 | **Passo 2:** Clone o projeto para um diretório local:
16 |
17 | ```bash
18 | git clone https://github.com//demo-cypress.git
19 | ```
20 |
30 |
31 | **Passo 3:** Instale o [Docker](https://docs.docker.com/get-docker/). A micro-livraria (isto é, o sistema que vamos testar) e também o Cypress serão executados por meio de containers.
32 |
33 | **Passo 4:** Coloque o sistema da micro-livraria no ar. Primeiro gere uma nova imagem, executando o seguinte comando na raiz do projeto:
34 |
35 | ```bash
36 | docker build -t micro-livraria -f cypress/Dockerfile .
37 | ```
38 |
39 | Em seguida, execute a aplicação, chamando no mesmo diretório de antes:
40 |
41 | ```bash
42 | docker run -ti -p 3000:3000 -p 5000:5000 micro-livraria
43 | ```
44 |
45 | **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`):
46 |
47 |
52 |
53 | ```bash
54 | docker run --network="host" -it -v "$PWD":/e2e -w /e2e cypress/included:9.2.0
55 | ```
56 |
57 | 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.
58 |
59 | Veja também que essse comando já vai rodar um primeiro teste de exemplo, bem simples, que implementamos no no arquivo [spec1.js](https://github.com/aserg-ufmg/demo-cypress/blob/main/cypress/cypress/integration/spec1.js):
60 |
61 | ```javascript
62 | describe('Meu primeiro teste', () => {
63 | it('Não faz nada', () => {
64 | expect(true).to.equal(true)
65 | })
66 | })
67 | ```
68 |
69 | Antes de prosseguir com o roteiro, analise e entenda, com calma, a saída produzida pelo Cypress.
70 |
71 |
77 |
78 |
97 |
98 |
107 |
108 | ## Tarefa #1: Testando o Front-end da micro-livraria
109 |
110 | 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:
111 |
112 | 1. Abrir o site
113 | 2. Escolher o livro desejado
114 | 3. Inserir o CEP
115 | 4. Calcular o frete
116 | 5. Realizar a compra do livro
117 |
118 | Observe que um teste de front-end pode ser comparado com um "robô" simulando um usuário final utilizando as funcionalidades do sistema.
119 |
120 | **Passo 1:**
121 |
122 | Crie um arquivo `spec2.js` na mesma pasta do teste anterior (pasta `integration`), mas com o seguinte código:
123 |
124 | ```javascript
125 | describe('Teste End-to-End', () => {
126 | it('Teste 1: Visita Página', () => {
127 | // abre o site
128 | cy.visit('http://localhost:5000/')
129 | })
130 | })
131 | ```
132 |
133 | 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`.
134 |
135 | Em seguida, execute este teste usando sempre:
136 |
137 | ```bash
138 | docker run --network="host" -it -v "$PWD":/e2e -w /e2e cypress/included:9.2.0
139 | ```
140 |
141 | Você vai perceber que o teste vai passar.
142 |
143 | **Passo 2:**
144 |
145 | 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.
146 |
147 | Primeiro, precisamos garantir que o livro está sendo mostrado na página, do seguinte modo:
148 |
149 | ```javascript
150 | describe('Teste End-to-End', () => {
151 | it('Teste 1: Visita Página', () => {
152 | // abre o site
153 | cy.visit('http://localhost:5000/')
154 | })
155 | it('Teste 2: Verifica item na página', () => {
156 | // Verifica se existe o livro desejado
157 | cy.get('[data-id=3]').should('contain.text', 'Design Patterns')
158 | })
159 | })
160 | ```
161 |
162 | No código anterior, realizamos uma query usando a função `get` e assumimos que:
163 |
164 | * O catálogo de livros é exibido em três colunas.
165 | * O livro desejado está na terceira linha, cujo identificador é `data-id=3`.
166 |
167 | Por isso, usamos uma asserção que verifica se a terceira coluna inclui a string `Design Patterns`.
168 |
169 | 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`.
170 |
171 |
180 |
181 | **Passo 3:**
182 |
183 | 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`:
184 |
185 | ```javascript
186 | describe('Teste End-to-End', () => {
187 | it('Teste 1: Visita Página', () => {
188 | // abre o site
189 | cy.visit('http://localhost:5000/')
190 | })
191 | it('Teste 2: Verifica item na página', () => {
192 | // Verifica se existe o livro desejado
193 | cy.get('[data-id=3]').should('contain.text', 'Design Patterns')
194 | })
195 | it('Teste 3: Calcula Frete', () => {
196 | // Calcula o frete
197 | cy.get('[data-id=3]').within(() => {
198 | cy.get('input').type('10000-000')
199 | cy.contains('Calcular Frete').click().then
200 | cy.wait(2000)
201 | })
202 | cy.get('.swal-text').contains('O frete é: R$')
203 |
204 | // Fecha o pop-up com o preço do frete
205 | cy.get('.swal-button').click()
206 | })
207 | })
208 | ```
209 |
210 | 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`.
211 |
212 | Prosseguindo, espera-se 2 segundos na função `wait()`, para garantir que a janela com o valor do frete vai carregar corretamente.
213 |
214 | Então, nessa janela, selecionamos o `swal-text` e usamos uma asserção para garantir que a mensagem é aquela que esperamos.
215 |
216 | Por fim, clicamos no botão para fechar o pop-up.
217 |
218 | 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`.
219 |
220 | ## Tarefa #2: Testando a Compra de um Livro
221 |
222 | Agora é sua vez de incrementar o teste anterior!
223 |
224 | Basicamente, você deve acrescentar código no teste para simular a compra de um livro, conforme explicado a seguir:
225 |
226 | * Use a função `cy.contains` para selecionar o botão Comprar e para clicar nele (função `click`)
227 | * Espere que o pop-up seja exibido com a confirmação da compra (função `wait`)
228 | * Verifique se nesse pop-up temos a messagem: `Sua compra foi realizada com sucesso`
229 | * Feche o pop-up, clicando em seu botão
230 |
231 | ## Tarefa #3: Salve suas mudanças
232 |
233 | Realize um **COMMIT e PUSH** para salvar suas mudanças no teste.
234 |
235 | O commit pode usar qualquer mensagem e basta incluir o arquivo `spec2.js`
236 |
237 |
240 |
241 | ## Comentário Final
242 |
243 | 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.
244 |
245 | ## Créditos
246 |
247 | 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**.
248 |
--------------------------------------------------------------------------------
13 |