Skip to content

2-Fixtures.md

Latest commit

 

History

History
143 lines (113 loc) · 3.65 KB

2-Fixtures.md

File metadata and controls

143 lines (113 loc) · 3.65 KB
Raw

4.2 - Fixtures

Fixtures são arquivos estáticos de dados usados nos testes. Em vez de escrever dados diretamente no código do teste, você os armazena em arquivos separados na pasta cypress/fixtures/. Isso facilita a manutenção e reutilização dos dados.

Criando uma fixture

Crie um arquivo JSON em cypress/fixtures/:

// cypress/fixtures/usuario.json
{
  "valido": {
    "email": "usuario@exemplo.com",
    "senha": "Senha@123",
    "nome": "João Silva"
  },
  "invalido": {
    "email": "naoexiste@exemplo.com",
    "senha": "senhaerrada"
  },
  "admin": {
    "email": "admin@exemplo.com",
    "senha": "Admin@456",
    "role": "admin"
  }
}

Usando fixtures com cy.fixture()

describe('Login', () => {
  it('deve fazer login com usuário válido', () => {
    cy.fixture('usuario').then((usuario) => {
      cy.visit('/login')
      cy.get('[data-cy="email"]').type(usuario.valido.email)
      cy.get('[data-cy="password"]').type(usuario.valido.senha)
      cy.get('[data-cy="submit"]').click()
      cy.url().should('include', '/dashboard')
    })
  })
})

Usando fixtures com alias

Uma forma mais limpa de usar fixtures é através de aliases com as():

describe('Login', () => {
  beforeEach(() => {
    cy.fixture('usuario').as('dadosUsuario')
  })

  it('deve fazer login com usuário válido', function () {
    // Usa function() em vez de arrow function para ter acesso ao this
    cy.visit('/login')
    cy.get('[data-cy="email"]').type(this.dadosUsuario.valido.email)
    cy.get('[data-cy="password"]').type(this.dadosUsuario.valido.senha)
    cy.get('[data-cy="submit"]').click()
    cy.url().should('include', '/dashboard')
  })

  it('deve exibir erro com usuário inválido', function () {
    cy.visit('/login')
    cy.get('[data-cy="email"]').type(this.dadosUsuario.invalido.email)
    cy.get('[data-cy="password"]').type(this.dadosUsuario.invalido.senha)
    cy.get('[data-cy="submit"]').click()
    cy.get('[data-cy="erro"]').should('be.visible')
  })
})

Importante: Ao usar aliases com this, use function() em vez de arrow functions (() =>), pois arrow functions não têm seu próprio contexto this.

Fixtures para mockar respostas de API

Fixtures são muito úteis com cy.intercept() para simular respostas de API:

// cypress/fixtures/produtos.json
[
  { "id": 1, "nome": "Notebook Pro", "preco": 4999.90 },
  { "id": 2, "nome": "Mouse Gamer", "preco": 199.90 },
  { "id": 3, "nome": "Teclado Mecânico", "preco": 349.90 }
]
it('deve exibir lista de produtos', () => {
  cy.intercept('GET', '/api/produtos', { fixture: 'produtos' }).as('getProdutos')

  cy.visit('/produtos')
  cy.wait('@getProdutos')

  cy.get('[data-cy="produto"]').should('have.length', 3)
  cy.contains('Notebook Pro').should('be.visible')
})

Outros formatos de fixture

Além de JSON, o Cypress suporta outros formatos:

// Arquivo de texto
cy.fixture('contrato.txt')

// Imagem (retorna base64)
cy.fixture('logo.png')

// CSV (retorna como string)
cy.fixture('usuarios.csv')

Dicas de organização

Para projetos maiores, organize as fixtures em subpastas:

cypress/fixtures/
├── usuarios/
│   ├── admin.json
│   ├── cliente.json
│   └── vendedor.json
├── produtos/
│   ├── catalogo.json
│   └── produto-detalhes.json
└── api/
    ├── resposta-sucesso.json
    └── resposta-erro.json

Para usar:

cy.fixture('usuarios/admin').then((admin) => { ... })
cy.intercept('GET', '/api/produtos', { fixture: 'produtos/catalogo' })

Ir para: 4.3 Comandos customizados