Welcome file

Manual de Testes Automatizados com Cypress

Introdução

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.

Pré-requisitos

  • Node.js instalado (versão 16 ou superior)

  • NPM ou Yarn instalado

  • Projeto NFSe-emissao configurado e funcionando localmente

Estrutura dos Testes

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

Configuração Inicial

Antes de executar os testes, é necessário configurar o ambiente:

  1. Certifique-se de que o sistema NFSe-emissao está rodando localmente na porta 3000

  2. Verifique se os dados de teste em cypress/fixtures estão de acordo com o ambiente de testes

Executando os Testes

Scripts de Execução

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:

  1. Selecione "E2E Testing" na tela inicial do Cypress
  2. Escolha o navegador "Electron" na próxima tela
  3. Clique em "Start E2E Testing in Electron"
  4. Selecione o arquivo de teste que deseja executar (ex: login.cy.ts)

Executando todos os testes

Para executar todos os testes de uma vez, use o comando:


npx  cypress  run

Executando testes específicos

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.

Modo interativo

Para abrir o Cypress em modo interativo, onde você pode selecionar os testes visualmente:


npx  cypress  open

Adicionando ao package.json

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

Comandos Personalizados

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.

Solução de Problemas

Erro de Permissão

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

Erro de Arquivo Bloqueado

Se você encontrar erros como "resource busy or locked" ao limpar o cache do Cypress, tente:

  1. Fechar todas as instâncias do Cypress em execução
  2. Executar o script sem limpar o cache: executar-testes-sem-limpar-cache.ps1
  3. Se o problema persistir, reinicie o computador e tente novamente

Problemas de Codificação de Caracteres

Se 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:

  1. Abra o arquivo com problemas no VS Code
  2. Clique em "Salvar com Codificação" no menu inferior direito
  3. Selecione "UTF-8"
  4. Salve o arquivo

É importante que todos os arquivos de teste estejam em UTF-8 para evitar problemas com caracteres especiais.

Erros de Tipo

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.

Testes Implementados

Testes de Login

  • Validação de campos obrigatórios

  • Validação de credenciais inválidas

  • Login bem-sucedido

  • Limite de caracteres nos campos

Testes de Prestadores

  • 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

Testes de Tomadores

  • 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

Testes de Serviços

  • 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

Testes de Emissão de NFSe

  • 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

Testes de Relatórios

  • Acesso aos diferentes relatórios

  • Preenchimento de filtros

  • Validação de datas

  • Geração de relatórios

Testes de Dashboard e Navegação

  • 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

Manutenção dos Testes

Atualizando Dados de Teste

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.

Adicionando Novos Testes

Para adicionar novos testes:

  1. Crie um novo arquivo .cy.ts na pasta cypress/e2e

  2. Siga o padrão dos testes existentes

  3. Use os comandos personalizados definidos em cypress/support/commands.ts

Comandos Personalizados

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

Boas Práticas

  1. Mantenha os testes independentes entre si

  2. Use dados de teste que não afetem o ambiente de produção

  3. Limpe os dados após os testes quando necessário

  4. Mantenha os seletores CSS atualizados

  5. Evite dependências entre testes

  6. Use timeouts adequados para operações assíncronas

Solução de Problemas

Testes falhando devido a elementos não encontrados

  • 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

Testes lentos

  • Reduza o número de interações com a UI

  • Use rotas personalizadas para preparar o estado da aplicação

  • Agrupe testes relacionados

Erros de autenticação

  • 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

Conclusão

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.