Guia Completo: Testes E2E com Cypress e Angular

🔎 Visão Geral

De acordo com a página oficial da extensão, a Cy‑Fi "records user actions on a web page and generates Cypress code for automation and testing." Ela oferece:

• Uso de comandos do @testing-library/cypress para seletores melhores
• Interface amigável, grava cliques, digitação, navegação e submissões
• Geração automática de código + editor integrado para editar/remover ações
• Pausar/retomar gravação e copiar o código para a área de transferência
• Inspector para encontrar o melhor seletor do elemento
• Inserção de assertions baseada no elemento

Fonte: Cy‑Fi — Chrome Web Store.

⚙️ Como Usar

🧩 Exemplo de Código Gerado

Após gravar um fluxo de login simples, um resultado típico pode ser:

it('fluxo básico de login (Cy‑Fi)', () => {
  cy.visit('/login');
  cy.get('[data-cy="username-input"]').type('user@teste.com');
  cy.get('[data-cy="password-input"]').type('SenhaSegura123');
  cy.get('[data-cy="submit-login"]').click();
  cy.url().should('include', '/dashboard');
});

Ajuste seletores para data-cy, centralize credenciais via Cypress.env e adicione asserções de negócio.

✅ Boas Práticas ao usar a Cy‑Fi

• Substitua seletores frágeis (classes/ids dinâmicos) por data-cy
• Inclua asserções claras após cada ação importante
• Refatore o código gerado em commands.ts quando reaproveitável
• Use fixtures e intercept para dados/mocks

Referência: Cy‑Fi — Chrome Web Store.

🎥 Evidências em Vídeo

O Cypress grava vídeos automaticamente no modo headless. Você também pode forçar a gravação por configuração.

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    video: true,
    videosFolder: 'cypress/videos',
    screenshotOnRunFailure: true
  }
});

npx cypress run --browser chrome

📸 Evidências em Screenshots

O Cypress cria screenshots automaticamente em falhas no modo headless e permite capturas manuais em pontos estratégicos.

it('captura evidências do fluxo de login', () => {
  cy.visit('/login');
  cy.screenshot('login-inicial');
  cy.get('[data-cy="username-input"]').type('user@teste.com');
  cy.get('[data-cy="password-input"]').type('SenhaSegura123');
  cy.screenshot('login-pre-submit');
  cy.get('[data-cy="submit-login"]').click();
  cy.screenshot('login-sucesso');
});

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    screenshotOnRunFailure: true,
    screenshotsFolder: 'cypress/screenshots'
  }
});

🚀 Workflow GitHub Actions

Crie o arquivo .github/workflows/cypress.yml:

name: Angular CI with Cypress

on:
  push:
    branches: [ "main", "develop" ]
  pull_request:
    branches: [ "main", "develop" ]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm

      - name: Install
        run: npm ci

      - name: Build
        run: npm run build --if-present

      - name: Start app (background)
        run: |
          npm run start &
        env:
          CI: true

      - name: Wait for app
        run: npx wait-on http://localhost:4200

      - name: Cypress Run
        run: npx cypress run --browser chrome
        env:
          CYPRESS_baseUrl: http://localhost:4200

      - name: Upload videos
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: cypress-videos
          path: cypress/videos

      - name: Upload screenshots
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: cypress-screenshots
          path: cypress/screenshots

⚡ Dicas de Otimização

🔐 Segredos e Variáveis

Configure segredos no repositório e injete-os como variáveis de ambiente:

- name: Cypress Run
  run: npx cypress run
  env:
    CYPRESS_login_user: ${{ secrets.LOGIN_USER }}
    CYPRESS_login_password: ${{ secrets.LOGIN_PASSWORD }}

✨ Visão Geral

O Cypress Studio agora, em versão preview, permite:

• Gravar interações do usuário e gerar código Cypress automaticamente
• Edição em tempo real dos testes direto na interface do Cypress
• Geração de seletores aprimorada e sugestões de assertions com IA
• Base técnica preparada para entender intenção do usuário e criar cenários mais complexos

⚙️ Como habilitar a versão Preview

npm i -D cypress@latest
npx cypress open

Configuração

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:4200',
    experimentalStudio: true // habilita o Studio em modo preview
  }
});

🎬 Vídeo: Primeiro teste E2E (visita e asserção)

Assista a uma gravação curta demonstrando a criação e execução de um teste E2E no Cypress.

Fonte: Cypress Docs - First test video.

🧪 Usando o Cypress Studio com IA

it('preenche o formulário e valida sucesso', () => {
  cy.visit('/cadastro');
  cy.get('[data-cy="nome-input"]').type('João Teste');
  cy.get('[data-cy="email-input"]').type('joao@teste.com');
  cy.get('[data-cy="submit-button"]').click();
  cy.get('[data-cy="toast-success"]').should('contain', 'Cadastro realizado');
});

🔍 Outras novidades da versão

• Comandos como cy.url(), cy.hash(), cy.go(), cy.reload(), cy.title() e cy.location() passam a usar CDP/WebDriver BiDi, evitando erros de origem cruzada
• Suporte a Vite 7 e Angular 20 no Teste de Componentes

Exemplo de configuração de Component Testing

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'vite' // Vite 7
    }
  }
});

📦 Instalação de pacotes

Exemplo baseado em um projeto Angular (pasta totvs-hgp-hvp-config/thf2 no VSCode).

npm i cypress@10.2.0 --save-dev

npm i cypress-iframe@1.0.1 --save-dev

npm i mochawesome@7.1.3 --save-dev

⚙️ Configuração (cypress.config.ts)

Exemplo de opções úteis: requestTimeout estendido (ambientes lentos) e reporter do Mochawesome.

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:4200',
    requestTimeout: 60000, // padrão 5000ms
    experimentalStudio: false
  },
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'report',
    overwrite: true,
    html: true,
    json: true
  }
});

🧩 Suporte a Iframe (cypress-iframe)

// support/e2e.ts
import 'cypress-iframe';
// outros imports/support

it('interage dentro do iframe', () => {
  cy.visit('/po-ui-exemplo');
  cy.frameLoaded('iframe#po-ui');
  cy.iframe().find('[data-cy="botao-confirmar"]').click();
});

🧪 Estrutura de Testes (e2e)

Organize cypress/e2e por módulos/funcionalidades. Exemplo simples:

cypress/
  e2e/
    auth/
      login.cy.ts
    pedidos/
      checkout.cy.ts
  fixtures/
  support/
    commands.ts
    e2e.ts

▶️ Execução e Relatórios

npx cypress open

npx cypress run