1-Hooks.md

4.1 - Hooks

Hooks são funções que executam em momentos específicos do ciclo de vida dos testes. Eles servem para configurar o estado antes dos testes e limpar depois, evitando repetição de código.

Os quatro hooks

describe('Minha suíte', () => {
  before(() => {
    // Executa UMA VEZ antes de TODOS os testes do describe
    cy.log('Configuração inicial da suíte')
  })

  after(() => {
    // Executa UMA VEZ após TODOS os testes do describe
    cy.log('Limpeza final da suíte')
  })

  beforeEach(() => {
    // Executa ANTES de CADA teste
    cy.visit('/login')
    cy.login('user@example.com', 'senha123')
  })

  afterEach(() => {
    // Executa APÓS CADA teste
    cy.clearCookies()
    cy.clearLocalStorage()
  })

  it('teste 1', () => { ... })
  it('teste 2', () => { ... })
})

Quando usar cada um

Hook	Use quando
before	Preparar dados de teste que valem para toda a suíte (seed do banco, login único)
after	Limpar dados persistentes que afetariam outros testes
beforeEach	Navegar para a página, fazer login, resetar o estado
afterEach	Limpar cookies, localStorage, capturas de tela em falha

Exemplo real: testes de carrinho de compras

describe('Carrinho de compras', () => {
  before(() => {
    // Login uma vez só para toda a suíte
    cy.visit('/login')
    cy.get('[data-cy="email"]').type('user@example.com')
    cy.get('[data-cy="password"]').type('senha123')
    cy.get('[data-cy="submit"]').click()
    cy.url().should('include', '/home')
  })

  beforeEach(() => {
    // Garante que o carrinho começa vazio a cada teste
    cy.visit('/carrinho')
    cy.get('[data-cy="limpar-carrinho"]').click()
    cy.visit('/produtos')
  })

  afterEach(() => {
    // Tira screenshot quando o teste falha
    // (o Cypress já faz isso automaticamente, mas você pode personalizar)
  })

  it('deve adicionar um produto ao carrinho', () => {
    cy.get('[data-cy="produto-1"]').find('[data-cy="adicionar"]').click()
    cy.get('[data-cy="contador-carrinho"]').should('contain.text', '1')
  })

  it('deve remover um produto do carrinho', () => {
    cy.get('[data-cy="produto-1"]').find('[data-cy="adicionar"]').click()
    cy.visit('/carrinho')
    cy.get('[data-cy="remover-item"]').first().click()
    cy.get('[data-cy="carrinho-vazio"]').should('be.visible')
  })
})

Hooks globais em support/e2e.js

Você pode definir hooks que se aplicam a todos os testes do projeto no arquivo cypress/support/e2e.js:

// cypress/support/e2e.js

beforeEach(() => {
  // Preserva o token de autenticação entre testes
  cy.session('auth', () => {
    cy.visit('/login')
    cy.get('[data-cy="email"]').type(Cypress.env('USER_EMAIL'))
    cy.get('[data-cy="password"]').type(Cypress.env('USER_PASSWORD'))
    cy.get('[data-cy="submit"]').click()
  })
})

cy.session() — reutilizando sessões

O cy.session() é um hook poderoso que salva e restaura o estado da sessão (cookies, localStorage) entre testes, evitando o overhead de fazer login antes de cada teste:

// cypress/support/commands.js
Cypress.Commands.add('loginPorUI', (email, senha) => {
  cy.session([email, senha], () => {
    cy.visit('/login')
    cy.get('[data-cy="email"]').type(email)
    cy.get('[data-cy="password"]').type(senha)
    cy.get('[data-cy="submit"]').click()
    cy.url().should('include', '/dashboard')
  })
})

// No teste
beforeEach(() => {
  cy.loginPorUI('user@example.com', 'senha123')
})

Na primeira execução, o login é feito normalmente. Nas execuções seguintes, o Cypress restaura os cookies e o localStorage sem precisar refazer o login.

---

Ir para: 4.2 Fixtures