Posted by Testes end-to-end ou E2E são essenciais para garantir que uma aplicação web funcione corretamente do início ao fim. O Cypress é um framework de automação de testes front-end amplamente utilizado por sua simplicidade, velocidade e capacidade de executar testes diretamente no navegador.
Neste guia completo você aprenderá como implementar um teste ponta a ponta usando Cypress simulando o processo de login com validação de credenciais inválidas e redirecionamento correto para a tela do dashboard após o acesso bem-sucedido.
Por Que Usar Cypress Para Testes E2E
Cypress é uma ferramenta moderna de automação de testes front-end, projetada especificamente para aplicações web dinâmicas. Sua simplicidade, velocidade e feedback visual em tempo real fazem dele uma escolha popular entre desenvolvedores.
Principais vantagens:
- Execução direta no navegador
- Interface gráfica intuitiva
- Suporte a frameworks como React, Vue e Angular
- Depuração fácil com logs detalhados
- Funciona bem em pipelines de CI/CD
Principais Tipos de Testes Realizados com Cypress
Com Cypress, você pode automatizar diversos cenários do usuário. Alguns dos tipos de testes mais comuns são:
| Tipo de Teste | Descrição |
|---|---|
| Validação de Login | Testa autenticação com credenciais válidas e inválidas |
| Navegação entre Páginas | Confirma que links internos redirecionam corretamente |
| Interação com Formulários | Simula preenchimento, submissão e validação |
| Mensagens de Erro | Verifica se mensagens aparecem quando esperadas |
| Fluxos Completos | Testa processos completos como cadastro ou checkout |
Principais Comandos do Cypress
Abaixo estão alguns dos comandos mais utilizados na escrita de testes E2E com Cypress:
| Comando | Descrição | Exemplo |
|---|---|---|
cy.visit() | Acessa uma URL específica | cy.visit('/login') |
cy.get() | Seleciona elementos da página | cy.get('#email') |
cy.type() | Digita texto em campos de entrada | cy.get('#password').type('senha123') |
cy.click() | Clica em um elemento | cy.get('button[type="submit"]').click() |
cy.contains() | Encontra elementos pelo texto visível | cy.contains('Entrar') |
cy.url().should() | Verifica a URL atual | cy.url().should('include', '/dashboard') |
cy.contains().should('be.visible') | Confirma que um elemento está visível | cy.contains('Senha incorreta').should('be.visible') |
cy.fixture() | Carrega arquivos JSON ou outros fixos | cy.fixture('usuarios.json') |
cy.intercept() | Intercepta requisições HTTP | cy.intercept('POST', '/api/login', { status: 200 }) |
Configuração Inicial do Cypress
Antes de escrever os testes certifique-se de instalar o Cypress em seu projeto Node.js:
npm install cypress --save-devPara iniciar a interface gráfica do Cypress execute:
npx cypress openEsse comando cria a estrutura padrão de pastas incluindo cypress/e2e onde devem ser criados os arquivos de teste com extensão .cy.js ou .cy.ts.
Estrutura da Aplicação
Vamos considerar uma aplicação com duas rotas principais:
/login– Página de autenticação do usuário./dashboard– Página acessada após login bem-sucedido.
O objetivo dos testes será:
- Acessar a página de login.
- Validar mensagem de erro ao tentar entrar com credenciais incorretas.
- Realizar login com sucesso e verificar navegação correta para o dashboard.
Código HTML da Tela de Login
Abaixo está o exemplo da tela de login utilizada nos testes. Ele contém os elementos básicos necessários para interação com o Cypress:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Login</title>
</head>
<body>
<h1>Faça seu login</h1>
<form id="loginForm">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required />
<label for="password">Senha:</label>
<input type="password" id="password" name="password" required />
<button type="submit">Entrar</button>
</form>
<div id="error-message" style="color: red; display: none;">
Credenciais inválidas. Tente novamente.
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const errorMessage = document.getElementById('error-message');
errorMessage.style.display = 'none';
if (email === '[email protected]' && password === 'senhacorreta') {
window.location.href = '/dashboard';
} else {
errorMessage.style.display = 'block';
}
});
</script>
</body>
</html>Código HTML da Tela do Dashboard
Aqui está um exemplo básico da tela de dashboard acessada após login bem-sucedido:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Dashboard</title>
</head>
<body>
<h1>Bem-vindo ao Dashboard</h1>
<p>Esta é a área restrita do usuário autenticado.</p>
</body>
</html>Escrevendo o Teste com Cypress
Com as páginas configuradas agora vamos criar o arquivo de teste dentro da pasta cypress/e2e. Abaixo está o código do teste Cypress que cobre os cenários descritos:
describe('Teste de Login com Cypress', () => {
beforeEach(() => {
cy.visit('/login');
});
it('Deve exibir mensagem de erro ao inserir credenciais inválidas', () => {
cy.get('#email').type('[email protected]');
cy.get('#password').type('senhaerrada');
cy.get('button[type="submit"]').click();
cy.contains('Credenciais inválidas. Tente novamente.').should('be.visible');
});
it('Deve redirecionar para o dashboard após login bem-sucedido', () => {
cy.get('#email').type('[email protected]');
cy.get('#password').type('senhacorreta');
cy.get('button[type="submit"]').click();
cy.url().should('include', '/dashboard');
cy.contains('Bem-vindo ao Dashboard').should('be.visible');
});
});Este código demonstra como Cypress permite simular ações do usuário de forma clara e eficiente. Os seletores usados estão alinhados com os IDs definidos na estrutura HTML da tela de login.
Vantagens de Usar Cypress para Testes E2E
O Cypress oferece diversas vantagens sobre outras ferramentas de automação de testes:
- Velocidade: Executa rapidamente sem depender de drivers externos.
- Feedback visual imediato: Mostra em tempo real cada passo do teste.
- Ferramentas de depuração integradas: Permite inspecionar elementos logs e até mesmo fazer screenshots automáticas.
- Gratuito e de código aberto: Ideal para projetos pequenos e grandes.
Conclusão
Implementar testes ponta a ponta com Cypress é uma prática eficaz para validar o fluxo completo de uma aplicação. Este artigo mostrou como realizar testes reais de login com validação de mensagens de erro e navegação para o dashboard.
Ao seguir este exemplo você pode adaptar o conteúdo para seus próprios projetos garantindo maior confiabilidade e qualidade no desenvolvimento front-end.
Se precisar de ajuda para configurar um ambiente local com servidor web ou integrar Cypress a frameworks como React Vue ou Angular posso te ajudar nisso também.
One comment