Este documento descreve como utilizar os testes automatizados implementados com Cypress para o sistema NFSe-emissao. Os testes cobrem todas as funcionalidades principais do sistema, incluindo login, cadastro de prestadores, tomadores, serviços, emissão de notas fiscais e relatórios.
Node.js instalado (versão 16 ou superior)
NPM ou Yarn instalado
Projeto NFSe-emissao configurado e funcionando localmente
Os testes estão organizados na pasta cypress na raiz do projeto, com a seguinte estrutura:
cypress/
├── e2e/ # Testes end-to-end
│ ├── login.cy.ts # Testes de login
│ ├── prestadores.cy.ts # Testes de prestadores
│ ├── tomadores.cy.ts # Testes de tomadores
│ ├── servicos.cy.ts # Testes de serviços
│ ├── nfse.cy.ts # Testes de emissão de NFSe
│ ├── relatorios.cy.ts # Testes de relatórios
│ ├── dashboard.cy.ts # Testes do dashboard
│ ├── navegacao.cy.ts # Testes de navegação
│ └── all-tests.cy.ts # Execução de todos os testes
├── fixtures/ # Dados de teste
│ ├── usuario.json # Dados de usuários
│ ├── prestador.json # Dados de prestadores
│ ├── tomador.json # Dados de tomadores
│ └── servico.json # Dados de serviços
└── support/ # Arquivos de suporte
├── commands.ts # Comandos personalizados
└── e2e.ts # Configurações para testes e2e
Antes de executar os testes, é necessário configurar o ambiente:
Certifique-se de que o sistema NFSe-emissao está rodando localmente na porta 3000
Verifique se os dados de teste em cypress/fixtures estão de acordo com o ambiente de testes
Para facilitar a execução dos testes, o projeto inclui scripts PowerShell prontos para uso:
| Script | Descrição | Quando Usar |
|---|---|---|
executar-testes-cypress.ps1 |
Instala o Cypress, verifica se o servidor está rodando e inicia o Cypress no modo interativo | Para desenvolvimento e criação de testes com interface gráfica |
executar-testes-sem-limpar-cache.ps1 |
Instala o Cypress e executa os testes em modo headless (sem interface gráfica) | Para execução automática dos testes em ambientes de CI/CD |
Exemplos de uso:
# Para executar testes com interface gráfica (modo interativo)
.\executar-testes-cypress.ps1
# Para executar testes sem interface gráfica (modo headless)
.\executar-testes-sem-limpar-cache.ps1
Ao executar o script executar-testes-cypress.ps1, o Cypress será aberto em modo interativo, permitindo selecionar e executar os testes individualmente:
login.cy.ts)Para executar todos os testes de uma vez, use o comando:
npx cypress run
Para executar um teste específico, use o comando:
npx cypress run --spec "cypress/e2e/login.cy.ts"
Substitua login.cy.ts pelo arquivo de teste que deseja executar.
Para abrir o Cypress em modo interativo, onde você pode selecionar os testes visualmente:
npx cypress open
Para facilitar a execução dos testes, você pode adicionar os seguintes scripts ao seu package.json:
"scripts": {
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"test": "cypress run"
}
Assim, você pode executar os testes com:
npm run cypress:open # Modo interativo
npm run cypress:run # Execução em linha de comando
npm test # Atalho para cypress run
O projeto utiliza comandos personalizados do Cypress para facilitar a escrita dos testes. Abaixo estão os principais comandos disponíveis:
| Comando | Descrição | Exemplo |
|---|---|---|
cy.fazerLogin(username, password) |
Realiza o login no sistema | cy.fazerLogin('admin', 'senha123') |
cy.irPara(rota) |
Navega para uma rota específica | cy.irPara('/prestadores') |
cy.verificarTitulo(titulo) |
Verifica se o título da página está correto | cy.verificarTitulo('Prestadores') |
cy.selecionarOpcao(seletor, valor) |
Seleciona uma opção em um select personalizado | cy.selecionarOpcao('.select', 'Opção 1') |
cy.anexarArquivo(seletor, nomeArquivo, tipoArquivo) |
Anexa um arquivo a um input de arquivo | cy.anexarArquivo('input[type="file"]', 'logo.png', 'image/png') |
Estes comandos estão definidos no arquivo cypress/support/commands.ts e os tipos estão declarados em cypress/support/index.d.ts.
Se você encontrar erros relacionados a permissões ao executar o Cypress, tente usar o navegador Electron em vez do Chrome:
npx cypress run --browser electron
Se você encontrar erros como "resource busy or locked" ao limpar o cache do Cypress, tente:
executar-testes-sem-limpar-cache.ps1Se você encontrar problemas com caracteres especiais nos arquivos de teste (como á, é, í, etc. aparecendo incorretamente), certifique-se de que todos os arquivos estão salvos com codificação UTF-8.
Para corrigir problemas de codificação, você pode usar o Visual Studio Code:
É importante que todos os arquivos de teste estejam em UTF-8 para evitar problemas com caracteres especiais.
Se você encontrar erros de tipo relacionados aos comandos personalizados, verifique se o arquivo cypress/support/index.d.ts está configurado corretamente com as definições de tipo para todos os comandos personalizados.
Validação de campos obrigatórios
Validação de credenciais inválidas
Login bem-sucedido
Limite de caracteres nos campos
Listagem de prestadores
Criação de novo prestador
Edição de prestador existente
Inativação de prestador
Validação de campos obrigatórios
Validação de formato de CNPJ
Filtros na listagem
Listagem de tomadores
Criação de novo tomador
Edição de tomador existente
Inativação de tomador
Validação de campos obrigatórios
Validação de formato de CNPJ
Filtros na listagem
Listagem de serviços
Criação de novo serviço
Edição de serviço existente
Inativação de serviço
Validação de campos obrigatórios
Validação de formato de valores numéricos
Filtros na listagem
Preenchimento do formulário de emissão
Validação de campos obrigatórios
Cálculo automático de valores
Adição e remoção de itens de serviço
Validação de formato de valores numéricos
Acesso aos diferentes relatórios
Preenchimento de filtros
Validação de datas
Geração de relatórios
Exibição de cards e estatísticas
Navegação pelo menu lateral
Responsividade em dispositivos móveis
Logout
Redirecionamento para página não encontrada
Os dados de teste estão localizados na pasta cypress/fixtures. Se houver mudanças no sistema que afetem os dados de teste, atualize os arquivos JSON correspondentes.
Para adicionar novos testes:
Crie um novo arquivo .cy.ts na pasta cypress/e2e
Siga o padrão dos testes existentes
Use os comandos personalizados definidos em cypress/support/commands.ts
Foram criados comandos personalizados para facilitar a escrita dos testes:
cy.login(username, password): Realiza login no sistema
cy.navegarPara(rota): Navega para uma página específica
cy.verificarPagina(titulo): Verifica se está na página correta
cy.selecionarItem(seletor, valor): Seleciona um item em um select personalizado
Mantenha os testes independentes entre si
Use dados de teste que não afetem o ambiente de produção
Limpe os dados após os testes quando necessário
Mantenha os seletores CSS atualizados
Evite dependências entre testes
Use timeouts adequados para operações assíncronas
Verifique se os seletores CSS estão corretos
Aumente o timeout para elementos que demoram a carregar
Verifique se a aplicação está rodando corretamente
Reduza o número de interações com a UI
Use rotas personalizadas para preparar o estado da aplicação
Agrupe testes relacionados
Verifique se os dados de login em cypress/fixtures/usuario.json estão corretos
Certifique-se de que o sistema de autenticação está funcionando corretamente
Os testes automatizados com Cypress ajudam a garantir a qualidade do sistema NFSe-emissao, permitindo identificar problemas rapidamente durante o desenvolvimento. Mantenha os testes atualizados conforme o sistema evolui para garantir sua eficácia.