Teste de Software
Setup Cypress
O setup do Cypress é muito mais do que apenas instalar o software; é a arquitetura de testes do seu projeto.
A Importância do Setup
Explica como um setup bem-feito garante consistência, reutilização de código (Princípio DRY) e escalabilidade para que seu projeto de automação possa crescer e ser facilmente integrado ao CI/CD.
O Setup para Cypress refere-se ao conjunto de ações e configurações necessárias para iniciar e manter um ambiente de automação de testes de ponta a ponta (E2E) utilizando o framework Cypress. É o alicerce que garante que os testes sejam executados de forma consistente, eficiente e escalável.
O setup não se limita apenas à instalação do software, mas abrange a estrutura de pastas, os arquivos de configuração e a integração com o projeto de desenvolvimento.
Componentes Essenciais do Setup
O setup do Cypress é composto por três pilares principais: a Instalação, a Estrutura de Pastas e os Arquivos de Configuração.
A Importância do Setup para a Automação
Um setup bem-feito é o que permite que o Cypress seja uma ferramenta poderosa e eficiente:
•Consistência: Definir a baseUrl e os timeouts no cypress.config.js garante que todos os testes rodem no ambiente correto e esperem o tempo adequado, reduzindo flakiness (testes instáveis).
•Reutilização de Código: O uso da pasta support para comandos customizados evita a repetição de código (Princípio DRY - Don't Repeat Yourself), tornando os testes mais curtos e fáceis de manter.
•Escalabilidade: A separação clara entre testes (e2e), dados (fixtures) e configuração permite que o projeto cresça, suportando centenas de testes sem se tornar caótico.
•Integração com CI/CD: O package.json define os comandos de execução (cy:run) que serão chamados pelo Jenkins ou outra ferramenta de CI/CD.
Em resumo, o setup do Cypress é a definição da arquitetura de testes do seu projeto, transformando um conjunto de scripts em um framework de automação robusto e pronto para produção.
Passo a Passo.:
Instalar GIT na máquina https://git-scm.com/downloads
Instalação rápida
- Via winget (Windows 10/11 recente):
- winget install --id Git.Git -e --source winget
1 - Instalar Node.JS https://nodejs.org/pt/download Marcar instalação automatica das pastas - phyton e chocolate.
2 - Validar instalação > abrir CMD e digitar - ver versões instaladas. node -v e npm -v
3 - baixar o VS Code - editor de código. Pode ser a IA TRAE também.
4 - Criar pasta na raiz do computador C: Nome do projeto
5 - Instalar Cypress saber as versões do cypress npm show cypress versions --json Acessa a pasta do projeto no editor de código conforme abaixo. Iniciar o npm: C:\PastadoProjeto > npm init -y
Após iniciar npm, instalar cypress C:\PastadoProjeto > npm install cypress@14.0.1 --save-dev
[serve para registrar o pacote(cypress) como uma dependência de desenvolvimento no arquivo package.json do seu projeto. Isso significa que o Cypress é necessário apenas para o desenvolvimento e testes do projeto, mas não para a execução da aplicação em produção. ]
6 - Abrir a pasta do projeto no editor de codigo - acessar o package.json e inserir o comando: < "cypress:open": "cypress open", > dentro da sessão Scripts, assim:
{
"name": "atomacaopaula",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"cypress:open": "cypress open",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs",
"devDependencies": {
"@faker-js/faker": "^10.1.0",
"cypress": "^14.0.1"
}
}
7 - Criar pasta Pages na raiz da pasta Cypress
7.1 - Criar o arquivo nomedafuncionalidade.js
OBS.: se o a pasta CYPRESS nao for criada, pode-se digitar o comando npx cypress open, forçando ele a abrir e criar a pasta. Depois feche tudo e recomece.
8 - ir no terminal e digitar "npx cypress open" para abrir o Test Runner do cypress
Continue > E2E Testing> > Selecionar Browser > Start > Clicar em Specs no menu > clicar em Criar Specs e nomear o arquivo Cy, exemplo: "cadastro.cy.js" continuar. É criada automaticamente a pasta E2E com o arquivo de acesso a aplicação no formato informado acima,
9 - ir no arquivo cypress.config.js realizar a configuração do arquivo
const { defineConfig } = require('cypress');
module.exports = defineConfig({
video: true,
// grava vídeo no cypress run
// opcional
videosFolder: 'cypress/videos',
screenshotOnRunFailure: true,
trashAssetsBeforeRuns: false,
videoCompression: 32,
// videoCompression: 32, // opcional para comprimir o mp4
// trashAssetsBeforeRuns: false, // mantém vídeos/screenshots de execuções anteriores
e2e: {
baseUrl: 'http://localhost:8000',
setupNodeEvents(on, config) {
// listeners
},
},
});
10 - Ir no e2e > no arquivo .cy.js e deixar p describe dessa forma:
describe('template spec', () => { it('passes', () => { cy.visit('/') // Aqui, o visit vai na baseURL informada no config.js }) })
11 - INSTALAR BIBLIOTECA faker para senhas e nomes aleatórios
npm i -D @faker-js/faker
11.1 - No arquivo .js que for usar o faker, deve-se incluir o comando:
import { fakerPT_BR } from '@faker-js/faker'
class formulario {
forumulariopassos() {
const nomeSanitizado = (fakerPT_BR.person.fullName() || 'Ana Maria')
.normalize('NFD') // separa acentos
.replace(/[\u0300-\u036f]/g, '') // remove acentos
.replace(/[^A-Za-z\s]/g, ' ') // remove pontuação/dígitos, mantém letras e espaço
.replace(/\s+/g, ' ') // compacta múltiplos espaços
.trim()
.slice(0, 255);
Comandos Cypress
Como Esperar Elemento Aparecer
- Use cy.get com assert e timeout:
- cy.get('#mensagemSucesso', { timeout: 10000 }).should('be.visible')
- Para existir no DOM (mesmo que escondido):
- cy.get('#mensagemSucesso', { timeout: 10000 }).should('exist')
- Para texto específico:
- cy.get('#mensagemSucesso', { timeout: 10000 }).should('contain.text', 'Login realizado com sucesso!')
Redirecionamento/URL
- Espera até ir para a rota:
- cy.location('pathname', { timeout: 10000 }).should('eq', '/cadastro')
- ou cy.url({ timeout: 10000 }).should('include', '/cadastro')
Esperar Requisição de API
- Intercepte e espere a resposta antes de checar o elemento:
- cy.intercept('POST', '/api/login').as('loginApi')
- cy.get('#btnAcessar').click()
- cy.wait('@loginApi')
- cy.get('#mensagemSucesso').should('be.visible')
Timer/SetTimeout (seu caso do login)
- Controlar o tempo do app em testes:
- cy.clock() no começo do teste
- Após clicar, avance o tempo:
- cy.tick(2000)
- Depois faça asserções:
- cy.get('#mensagemSucesso').should('be.visible')
- cy.location('pathname').should('eq', '/cadastro')
Ajustar Timeout Padrão (opcional)
- Config global (aplica a todos os get/contains ):
- No cypress.config.js dentro de e2e :
- defaultCommandTimeout: 10000
- Por teste:
- Cypress.config('defaultCommandTimeout', 10000)
Padrão Completo para Login
describe('Login', () => {
it('aguarda sucesso e redireciona', () => {
cy.visit('/login')
cy.clock()
cy.get('#email').type('teste@email.com')
cy.get('#senha').type('123456')
cy.get('#btnAcessar').click()
cy.tick(2000)
cy.get('#mensagemSucesso', { timeout: 10000 }).should('be.visible')
cy.location('pathname', { timeout: 10000 }).should('eq', '/cadastro')
})
})
class Login {
loginpassos() {
// Opcional: controlar timers (para o setTimeout do app)
cy.clock();
cy.get('#email', { timeout: 10000 })
.should('be.visible')
.type('teste@gmail.com', { delay: 100 });
cy.get('#senha', { timeout: 10000 })
.should('be.visible')
.type('1234', { delay: 100 });
// Espera pela requisição de login
cy.intercept('POST', '/api/login').as('loginApi');
cy.get('#btnAcessar', { timeout: 10000 })
.should('be.visible')
.click();
cy.wait('@loginApi')
.its('response.statusCode')
.should('eq', 200);
// Mensagem de sucesso
cy.get('#mensagemSucesso', { timeout: 10000 })
.should('be.visible')
.and('contain', 'Login realizado com sucesso');
// Avança o relógio do app (2s do setTimeout)
cy.tick(2000);
// Verifica redirecionamento
cy.location('pathname', { timeout: 10000 })
.should('eq', '/cadastro');
cy.screenshot('formulario-acessado-com-sucesso');
}
}
export default new Login;