🧪 Cypress E2E Testing - update

Este projeto é um estudo prático e abrangente de testes end-to-end (E2E) usando Cypress que explora diversos cenários complexos de automação, desde verificação de emails até integração com IA.

📋 Descrição do Projeto

O projeto demonstra como implementar testes automatizados avançados que cobrem:

🔐 Autenticação & Email

✅ Preenchimento de formulários de signup
✅ Envio de emails de confirmação
✅ Captura e validação de códigos de confirmação via email
✅ Verificação do fluxo completo de autenticação

📊 Operações CRUD

✅ Create - Criação de registros
✅ Read - Leitura e listagem de dados
✅ Update - Atualização de informações
✅ Delete - Remoção de registros

📎 Upload de Arquivos

✅ Upload de diferentes tipos de arquivo
✅ Validação de arquivos enviados
✅ Testes de limites e restrições

🖼️ Interação com iFrames

✅ Navegação dentro de iframes
✅ Interação com elementos embedados
✅ Validação de conteúdo em contextos isolados

🤖 Avaliação com IA (Futuro)

🔄 Integração com APIs de IA externa
🔄 Validação automatizada via chave de API
🔄 Análise inteligente de resultados

🔧 Tecnologias Utilizadas

Core Testing

Cypress v15.1.0 - Framework de testes E2E
Cypress Mailosaur v2.17.0 - Plugin para testes com email
Faker.js v6.6.6 - Geração de dados fictícios

Relatórios & Qualidade

Allure - Relatórios avançados e interativos
ESLint v9.34.0 - Linting e qualidade de código

Integrações Futuras

API de IA Externa - Para validação automatizada inteligente
Plugins de Upload - Para testes de arquivos
Cypress iframe - Para interação com elementos embedados

🎯 Funcionalidades Testadas

1. Autenticação e Email ✅

Cadastro com confirmação por email via Mailosaur
Login e logout de usuários
Recuperação de senha

2. Operações CRUD 🔄

Create: Criação de novos registros (notas, usuários, etc.)
Read: Listagem e visualização de dados
Update: Edição de informações existentes
Delete: Remoção de registros com confirmação

3. Upload de Arquivos 🔄

Upload de imagens, documentos e arquivos diversos
Validação de tipos de arquivo permitidos
Testes de limites de tamanho
Verificação de upload bem-sucedido

4. Interação com iFrames 🔄

Navegação dentro de elementos iframe
Preenchimento de formulários embedados
Validação de conteúdo em contextos isolados
Switching entre frames

5. Interceptação de Requisições ✅

Monitora chamadas para APIs (**/notes, **/users, etc.)
Validação de payloads de requisições
Simulação de respostas de erro

6. Avaliação com IA 🔄 (Implementação Futura)

Integração com APIs de IA externa
Validação automatizada de resultados
Análise inteligente de comportamentos

🚀 Como Executar

Pré-requisitos

Node.js instalado
Conta no Mailosaur (para testes de email)

Configuração

Clone o repositório:

git clone <repository-url>
cd e2e-cypress-update

Instale as dependências:

npm install

Configure as variáveis de ambiente:

cp cypress.env.example.json cypress.env.json

Edite o arquivo cypress.env.json com suas credenciais:

{
  "USER_PASSWORD": "sua_senha_de_teste",
  "MAILOSAUR_SERVER_ID": "seu_server_id_mailosaur",
  "MAILOSAUR_API_KEY": "sua_api_key_mailosaur",
  "AI_API_KEY": "sua_chave_api_ia",
  "BASE_URL": "https://sua-aplicacao.com"
}

Executando os Testes

Modo Interativo (Interface Gráfica):

npx cypress open

Modo Headless (Terminal):

npx cypress run

Gerar Relatórios Allure:

# Executar testes e gerar dados para Allure
npx cypress run --reporter allure

# Gerar e abrir relatório Allure
npx allure generate --clean && npx allure open

📁 Estrutura do Projeto

├── cypress/
│   ├── e2e/
│   │   ├── auth/
│   │   │   ├── signup.cy.js          # Teste de cadastro com email
│   │   │   ├── login.cy.js           # Teste de login
│   │   │   └── password-reset.cy.js  # Recuperação de senha
│   │   ├── crud/
│   │   │   ├── notes-crud.cy.js      # Operações CRUD de notas
│   │   │   ├── users-crud.cy.js      # Operações CRUD de usuários
│   │   │   └── categories.cy.js      # CRUD de categorias
│   │   ├── upload/
│   │   │   ├── file-upload.cy.js     # Upload de arquivos
│   │   │   ├── image-upload.cy.js    # Upload de imagens
│   │   │   └── bulk-upload.cy.js     # Upload em lote
│   │   ├── iframe/
│   │   │   ├── embedded-forms.cy.js  # Formulários em iframe
│   │   │   └── widgets.cy.js         # Widgets embedados
│   │   ├── ai-evaluation/
│   │   │   ├── content-analysis.cy.js # Análise com IA
│   │   │   └── smart-validation.cy.js # Validação inteligente
│   │   └── spec.cy.js                # Teste template básico
│   ├── pages/                        # 📋 Page Object Model (POM)
│   │   ├── auth/
│   │   │   ├── SignupPage.js         # Página de cadastro
│   │   │   ├── LoginPage.js          # Página de login
│   │   │   └── PasswordResetPage.js  # Página de recuperação
│   │   ├── dashboard/
│   │   │   ├── DashboardPage.js      # Página principal
│   │   │   ├── NotesPage.js          # Página de notas
│   │   │   └── ProfilePage.js        # Página de perfil
│   │   ├── crud/
│   │   │   ├── NotesListPage.js      # Lista de notas
│   │   │   ├── NoteFormPage.js       # Formulário de nota
│   │   │   ├── UsersListPage.js      # Lista de usuários
│   │   │   └── UserFormPage.js       # Formulário de usuário
│   │   ├── upload/
│   │   │   ├── FileUploadPage.js     # Página de upload
│   │   │   └── MediaGalleryPage.js   # Galeria de mídia
│   │   ├── iframe/
│   │   │   ├── EmbeddedFormPage.js   # Formulários embedados
│   │   │   └── WidgetPage.js         # Widgets em iframe
│   │   └── base/
│   │       ├── BasePage.js           # Classe base para todas as páginas
│   │       ├── NavigationComponent.js # Componente de navegação
│   │       └── HeaderComponent.js    # Componente de cabeçalho
│   ├── fixtures/
│   │   ├── example.json              # Dados de teste estáticos
│   │   ├── test-files/               # Arquivos para upload
│   │   ├── ai-responses/             # Respostas mockadas da IA
│   │   └── users/                    # Dados de usuários para teste
│   │       ├── valid-users.json      # Usuários válidos
│   │       └── invalid-users.json    # Usuários inválidos
│   └── support/
│       ├── commands.js               # Comandos customizados
│       ├── e2e.js                   # Configurações globais
│       ├── ai-helpers.js            # Funções auxiliares para IA
│       ├── data-helpers.js          # Helpers para manipulação de dados
│       └── page-helpers.js          # Helpers específicos para POM
├── allure-results/                   # Dados dos relatórios Allure
├── allure-report/                    # Relatórios HTML gerados
├── cypress.config.js                 # Configuração do Cypress
├── cypress.env.example.json          # Template de variáveis de ambiente
├── cypress.env.json                 # Variáveis de ambiente (não versionado)
├── package.json                     # Dependências e scripts
├── eslint.config.mjs                # Configuração do ESLint
└── README.md                        # Este arquivo

🧪 Detalhes dos Testes

Autenticação (signup.cy.js) ✅

Geração de dados: Cria email único usando UUID + domínio Mailosaur
Navegação: Acessa página de cadastro via SignupPage.visit()
Preenchimento: Insere dados usando SignupPage.fillForm(userData)
Submissão: Clica no botão através de SignupPage.submitForm()
Aguarda email: Usa Mailosaur para capturar email de confirmação
Extração de código: Usa regex para extrair código de 6 dígitos
Confirmação: Insere código com SignupPage.enterConfirmationCode(code)
Validação: Verifica redirecionamento usando DashboardPage.isVisible()

Exemplo de uso do POM:

// signup.cy.js
import { SignupPage } from '../pages/auth/SignupPage'
import { DashboardPage } from '../pages/dashboard/DashboardPage'

const signupPage = new SignupPage()
const dashboardPage = new DashboardPage()

// Uso limpo e legível
signupPage.visit()
signupPage.fillForm({
  email: emailAddress,
  password: password,
  confirmPassword: password
})
signupPage.submitForm()
signupPage.enterConfirmationCode(confirmationCode)
dashboardPage.shouldBeVisible()

CRUD Operations 🔄 (Em Desenvolvimento)

Criação: Testa formulários de criação com validação
Leitura: Verifica listagens, paginação e filtros
Atualização: Edição inline e formulários de update
Exclusão: Confirmações e soft/hard deletes

Upload de Arquivos 🔄 (Em Desenvolvimento)

Drag & drop de arquivos
Seleção múltipla
Progress bars e feedbacks
Validação de tipos MIME

iFrame Testing 🔄 (Em Desenvolvimento)

Switching entre frames
Formulários embedados
Comunicação cross-frame

IA Integration 🔄 (Planejado)

Análise automatizada de conteúdo
Validação contextual inteligente
Relatórios enriquecidos com insights de IA

🏗️ Arquitetura - Page Object Model (POM)

Este projeto implementa o padrão Page Object Model para manter o código organizado, reutilizável e de fácil manutenção.

Estrutura do POM

📋 Base Classes

BasePage.js - Classe base com métodos comuns a todas as páginas
NavigationComponent.js - Componente reutilizável de navegação
HeaderComponent.js - Componente de cabeçalho e menu

🔐 Auth Pages

SignupPage.js - Encapsula elementos e ações da página de cadastro
LoginPage.js - Métodos para login e validações
PasswordResetPage.js - Funcionalidades de recuperação de senha

📊 CRUD Pages

NotesListPage.js - Lista, filtros e paginação de notas
NoteFormPage.js - Criação e edição de notas
UsersListPage.js - Gerenciamento de usuários
UserFormPage.js - Formulários de usuário

📎 Upload Pages

FileUploadPage.js - Upload de arquivos e validações
MediaGalleryPage.js - Visualização e gerenciamento de mídia

Benefícios do POM

✅ Reutilização de código entre testes
✅ Manutenção centralizada de seletores
✅ Legibilidade melhorada dos testes
✅ Separação clara entre lógica de teste e interação com UI
✅ Escalabilidade para projetos grandes

🔍 Scripts Disponíveis

npm run lint - Executa verificação de lint nos arquivos
npm run lint:fix - Corrige automaticamente problemas de lint
npm run test:open - Abre Cypress em modo interativo
npm run test:run - Executa testes em modo headless
npm run test:chrome - Executa testes especificamente no Chrome
npm run test:firefox - Executa testes especificamente no Firefox
npm run allure:generate - Gera relatórios Allure
npm run allure:open - Abre relatórios Allure no navegador
npm run test:smoke - Executa apenas testes de smoke
npm run test:regression - Executa suite completa de regressão

📚 Aprendizados e Conceitos

Este projeto demonstra conceitos avançados de automação:

Fundamentos

Integração com serviços de email para testes automatizados
Geração de dados dinâmicos com Faker.js
Interceptação de requisições HTTP com Cypress
Uso de variáveis de ambiente para configurações sensíveis

Técnicas Avançadas

Operações CRUD completas com validações robustas
Upload de arquivos com diferentes formatos e tamanhos
Manipulação de iFrames e contextos embedados
Extração de dados de emails com regex
Page Object Model para organização de código

Integrações Externas

APIs de terceiros para validação automatizada
Relatórios visuais com Allure Framework
Análise inteligente com APIs de IA
CI/CD pipelines para execução automatizada

Boas Práticas

Organização modular de testes por funcionalidade
Reutilização de código através de comandos customizados
Tratamento de erros e cenários edge cases
Performance testing e otimização de execução

🤝 Contribuindo

Este é um projeto de estudo, mas contribuições são bem-vindas! Sinta-se à vontade para:

Reportar bugs
Sugerir melhorias
Adicionar novos cenários de teste
Melhorar a documentação

📄 Licença

Este projeto está licenciado sob a licença ISC.

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
cypress		cypress
.gitignore		.gitignore
README.md		README.md
cypress.config.js		cypress.config.js
cypress.env.example.json		cypress.env.example.json
eslint.config.mjs		eslint.config.mjs
package.json		package.json

Folders and files

Latest commit

History

Repository files navigation