Cypress: Introdução aos testes End2End #01
O que é Cypress? O que é teste de ponta a ponta?
O Cypress é um framework de testes automatizados end-to-end usando JavaScript, usa o Selenium para poder fazer a comunicação com os elementos do DOM enviando comandos de forma remota e isso tudo envelopado (wrapper) pelo Protractor ou Webdriver, etc.
Teste de ponta a ponta , ou teste de interface do usuário, é uma das muitas abordagens para testar um aplicativo da web.
Um teste de ponta a ponta verifica se um aplicativo da web funciona conforme o esperado ou não, testando o chamado fluxo do usuário .
O teste de ponta a ponta é importante? Sim, ele é. Mas ninguém gosta de testes E2E. Eles podem ser lentos, complicados e caros de escrever.
Por outro lado, o teste lhe dá confiança . Você enviaria um produto quebrado para seus usuários propositalmente?
Requisitos para esse tutorial
Para acompanhar este tutorial, você precisa de uma instalação funcional do Node.js em seu sistema. Além disso, um entendimento básico de JavaScript é uma vantagem. Certifique-se que as seguintes ferramentas estão instaladas em seu sistema:
- Git;
- Nodejs;
- Editor de Código(Estou utilizando o VSCode);
Para começarmos, crie uma nova pasta em um local de sua preferência, chamei o meu de end2end:
mkdir end2end && cd end2end
Dentro desta pasta, crie dois novos arquivos. Um documento HTML em index.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Cypress: Introdução aos testes End2End</title>
</head>
<body>
<main>
<form>
<div>
<label for="name">Nome</label>
<input type="name" required name="name" id="name" />
</div>
<div>
<label for="email">Email</label>
<input type="email" required name="email" id="email" />
</div>
<div>
<label for="message">Mensagem</label>
<textarea id="message" name="message" required></textarea>
</div>
<div>
<button type="submit">Enviar</button>
</div>
</form>
</main>
</body>
<script src="form.js"></script>
</html>
É um formulário HTML com vários inputs e uma área de texto.
Em seguida, crie um arquivo JavaScript form.jscom uma lógica mínima para lidar com o envio do formulário:
const form = document.forms[0];
form.addEventListener("submit", event => {
event.preventDefault();
});
Observe que não adicionarei estilos para manter as coisas simples. Com este projeto simples implementado, estamos prontos para instalar o Cypress.
Instalando Cypress
Para instalar o Cypress, ainda na pasta do projeto, execute:
npm install cypress
Aguarde um minuto (é necessário fazer o download do binário) e execute:
npx cypress open
O Cypress será iniciado pela primeira vez e várias novas pastas aparecerão em seu projeto. Você pode remover com segurança a pasta de exemplo.
Feche a janela por enquanto e vá para a próxima seção.
Iniciando o projeto
Para veicular o projeto na máquina local, certifique-se de ter uma versão mais recente do Node.js instalada e execute:
npx serve
Isso irá iniciar um servidor de desenvolvimento em http://localhost:5000/.Acesse o link e você deverá ver o nosso formulário:
Escrevendo seu primeiro teste
Crie um novo arquivo cypress/integration/form.spec.js e escreva seu primeiro bloco:
describe("Testando formulário", () => {
//content
});
describe é um método do Cypress (emprestado do Mocha) para conter um ou mais testes relacionados.Cada vez que você começa a escrever um novo conjunto de testes para uma funcionalidade, envolva-o em um bloco describe.
Como você pode ver, ele requer dois argumentos: uma string para descrever o conjunto de testes e uma função de retorno de chamada para envolver o teste real .
A seguir, vamos conhecer outra função chamada it que é o bloco de teste real:
describe("Testando formulário", () => {
it("Preenchendo o formulário", () => {
//
});
});
Se você já conhece Jest, deve se lembrar que ele utiliza it ou test indiferentemente. Esse não é o caso do Cypress. it é o único bloco reconhecido.
Agora é hora de testarmos! No bloco `it` escreva:
describe("Testando formulário", () => {
it("Preenchendo o formulário", () => {
//Acessando a URL base
cy.visit("/");
//Selecionando o FORM
cy.get("form");
});
});
Aqui cy representa o próprio Cypress. `visit` é um método para navegar até um determinado caminho.
get em vez disso, é um método para selecionar elementos na página . Com esse código, dizemos ao Cypress “Vá até a página especificada e selecione o formulário”.
Em um minuto veremos o Cypress em ação, mas primeiro, um pouco de configuração!
Configurando o Cypress
Para agilizar um pouco as coisas, vamos configurar o Cypress. Para começar, abra package.json e crie um script chamado e2e apontando para o binário Cypress:
"scripts": {
"e2e": "cypress open"
},
Em seguida, abra cypress.json e configure o URL base:
{
"baseUrl": "http://localhost:5000"
}
Com esta opção, dizemos ao Cypress para visitar a nossa URL de desenvolvimento.(5000 é a porta padrão para o package service).
Agora estamos prontos para executar nosso primeiro teste! Hehe
Executando o teste
Pronto? Com o servidor de desenvolvimento ainda em execução em um terminal:
npx serve
abra outro terminal e execute:
npm run e2e
Você deverá ver o Cypress abrindo um navegador e percorrendo a página:
Essa é a sua primeira aprovação no teste! Ambos visit e get são comandos do Cypress que atuam também como asserções implícitas,ou seja, se o elemento estiver na página o Cypress considerará o teste aprovado.
Agora, vamos continuar estendendo seu teste para ver se o usuário pode preencher o formulário:
describe("Testando formulário", () => {
it("Preenchendo o formulário", () => {
cy.visit("/");
cy.get("form");
cy.get('input[name="name"]').type("Isabella");
});
});
Aqui está outro comando Cypress type: que sem surpresa digita em nosso primeiro input [name]. Além disso, observe que foi utilizado um seletor CSS para obter o elemento de entrada. Você pode utilizar seletores css para obter os dados necessários(id,tags,classes etc), mas o Cypress recomenda que você utilize data-* attributes para fornecer contexto aos seus seletores e isolá-los das alterações de CSS ou JS.
Vamos também adicionar um outro comando: should. Este comando cria uma asserção e é usado, por exemplo, para verificar se uma entrada está atualizando seu estado conforme o esperado:
describe("Testando formulário", () => {
it("Preenchendo o formulário", () => {
cy.visit("/");
cy.get("form");
cy.get('input[name="name"]')
.type("Isabella")
.should("have.value", "Isabella");
});
});
Observe have.value. Se você é novo neste conceito, pode aprender mais sobre asserções aqui.
Com um teste mínimo implementado, daremos continuidade no próximo capítulo desse tutorial.
Precisando de um site?
Ter um site é colocar sua empresa na internet. Construir estratégias para que a imagem da sua empresa seja agregada a um valor é presença online. Um site projetado profissionalmente, é fundamental para aumentar as vendas, impulsionar os resultados e expandir seus negócios. Se você quer ser levado a sério como empresa, precisa levar a sério a tarefa de assumir negócios. Nada se conecta mais com seus clientes online do que seu próprio site profissional.
Quais as vantagens para uma empresa?
Está em dúvida se vale a pena investir na presença online da sua empresa? Veja as principais vantagens dessa prática:
- Facilidade em ser encontrado por novos clientes;
- Aumento da credibilidade e reputação da empresa;
- Auxilia na fidelização dos clientes atuais;
- Divulgação dos trabalhos desenvolvidos;
- Crescimento da empresa pela valorização da marca;
- Desenvolvimento de ações de marketing a um custo mais baixo;
- Expansão da visibilidade da sua empresa para um público maior;
- Maior interação com seus clientes e, assim, melhor compreensão sobre seus perfis.
Você sabia que a CleanDesign pode ajudar você e sua empresa a ter mais e melhores resultados com a internet? Clique no botão abaixo e conheça os nossos pacotes de Webdesign Premium, com tarifas únicas e sem mensalidades.
Ganhe dinheiro encurtando links!
E se você pudesse receber dinheiro pelos links que você compartilha nas redes sociais? Cadastre-se agora mesmo na exe.io e comece a faturar encurtando os seus links. ;)
Leia também:
-
Entendendo funções callback em JavaScript 21 May 2021
-
Descomplicando o método Reduce() 21 May 2021
-
Arrow functions - JavaScript 20 May 2021