Automação Web com Cypress

Objetivo: Padronizar a criação de testes de interface (E2E) na Neppo, utilizando JavaScript e as melhores práticas de arquitetura (Page Objects e Custom Commands).

---

1. Introdução e Pré-requisitos

O Cypress é um framework de automação de próxima geração, construído para a web moderna. Ele roda diretamente no navegador, o que o torna mais rápido e menos "instável" que o Selenium.

Requisitos básicos:

• Node.js (Versão 18 ou superior)

• Visual Studio Code (Ou outra IDE de preferência)

• Extensão Cypress Snippets (Opcional, mas ajuda muito no VS Code)

---

2. Instalação e Configuração Inicial

Passo 1: Iniciar o projeto

Na pasta raiz do seu projeto de testes, execute:

Passo 2: Instalar o Cypress

Passo 3: Abrir o Cypress pela primeira vez

Isso criará a estrutura de pastas padrão do Cypress automaticamente.

---

3. Estratégia de Arquitetura: Page Object Pattern (PoP)

Para evitar repetição de código e facilitar a manutenção, utilizaremos o Page Objects. Cada página da aplicação terá uma classe correspondente que contém os elementos e as ações dessa página.

Estrutura de pastas sugerida:

Exemplo de Page Object (support/pages/LoginPage.js):

---

4. Comandos Personalizados (Custom Commands)

Comandos personalizados são ótimos para ações que se repetem em quase todos os testes, como fazer login via API ou limpar o Local Storage.

No arquivo cypress/support/commands.js:

{ cy.get('#user').type(user); // ... lógica de login });]]>

---

5. Variáveis de Ambiente (cypress.config.js)

Nunca coloque URLs ou credenciais diretamente no código do teste. Use o arquivo de configuração para gerenciar diferentes ambientes (QA, Produção).

---

6. O Primeiro Teste Completo (e2e/login.cy.js)

Aqui unimos tudo: o Page Object, as verificações e a fluidez do Cypress.

{ beforeEach(() => { LoginPage.acessar(); }); it('Deve realizar login com sucesso', () => { const user = Cypress.env('user_name'); const pass = Cypress.env('user_password'); LoginPage.preencherLogin(user, pass); LoginPage.clicarEntrar(); // Asserção (Validação) cy.url().should('include', '/dashboard'); cy.get('.welcome-message').should('contain', 'Olá, Admin'); }); it('Deve exibir erro ao inserir senha incorreta', () => { LoginPage.preencherLogin('usuario@erro.com', '123456'); LoginPage.clicarEntrar(); cy.get('.error-alert') .should('be.visible') .and('have.text', 'Credenciais inválidas'); }); }); ]]>

---

7. Melhores Práticas e "Pulos do Gato"

7.1. Seletores Resilientes

Evite seletores de CSS longos ou IDs que podem mudar. Use atributos de dados (data-cy ou data-testid) se possível.

• ❌ cy.get('.btn-primary > span > .v-btn')

• ✅ cy.get('[data-cy="btn-salvar"]')

7.2. Evite o cy.wait(tempo)

O Cypress tem esperas automáticas. Em vez de pausar o teste por 5 segundos, espere pelo elemento:

• ✅ cy.get('.loading', { timeout: 10000 }).should('not.exist')

7.3. Massa de Dados com Fixtures

Use arquivos JSON para testar múltiplos cenários.

{ cy.login(massa.user_valido, massa.senha_valida); });]]>

---

8. Execução via Linha de Comando (Headless)

Para rodar os testes sem abrir a interface gráfica (ideal para CI/CD):

---

9. Integração API + UI (Otimização Avançada)

Em testes E2E profissionais, não fazemos login pela interface em todos os testes. Se temos 50 testes de "Criação de Bot", não precisamos passar pela tela de login 50 vezes. Fazemos o login via API e os testes de interface começam já dentro do sistema.

9.1. Usando cy.request() para Setup de Teste

O comando cy.request() envia requisições HTTP sem usar a interface, o que é quase instantâneo.

Exemplo: Comando customizado para Login via API (support/commands.js):

{ cy.request({ method: 'POST', url: '/api/auth/login', // Endpoint de login da Neppo body: { email, password } }).then((response) => { // Armazena o token no LocalStorage ou Cookies conforme a aplicação window.localStorage.setItem('token', response.body.token); }); }); ]]>

9.2. Ganhando tempo nos testes

Agora, no seu arquivo de teste, você usa o login por API para chegar rápido onde interessa:

{ beforeEach(() => { // Login instantâneo por trás das câmeras cy.loginViaAPI(Cypress.env('user'), Cypress.env('pass')); // Vai direto para a página do construtor cy.visit('/botBuilder'); }); it('Deve criar um bot com sucesso', () => { // O teste já começa logado, economizando ~5 segundos por teste cy.get('[data-cy="novo-bot"]').click(); // ... restante do teste }); });]]>