DEV Community

Gustavo Caetano
Gustavo Caetano

Posted on • Updated on

Fixtures do Cypress para testes

Conhecimentos prévios

Cypress, Cucumber, BDD

Veja a aplicação no Slave One:
https://dev.to/marcela_lage_094e814c6a4e/documentacao-dos-testes-do-sistema-slave-one-2kmb

Fixtures

As fixtures do Cypress são dados estáticos que podem ser utilizados pelos testes. O arquivo é em formato JSON.

Intercept

O intercept é um comando do Cypress que pode ser usado para capturar, vigiar ou modificar uma requisição.
Link da documentação

Testes com os dados da fixture

Inicialmente, deve-se criar os arquivos de fixture que terão os dados utilizados na página.

Estrutura das pastas

A estrutura do JSON deve ser a mesma da resposta da requisição.

Exemplo arquivo JSON da fixture com os valores de name e id de cada objeto que aparecerá na aplicação

Para encontrar qual requisição interceptar, execute seu teste Cypress e observe-se no passo a passo qual requisição retorna os dados que pretende substituir.

Exemplo de requisição no Cypress

Após, deve-se capturar e alterar a resposta usando o intercept:

Código de intercept passando primeiro o parâmetro da requisição e depois a fixture que será usada

O intercept trocará a resposta da requisição https://localhost:3000/api/Function pela fixture do arquivo Function e o comando as permitirá que o Cypress acesse essa ação pelo wait para esperar que a mudança aconteça.

Resultado da mudança

OBS: o intercept deve ser usado antes da requisição acontecer e o wait deve ser utilizado após. No exemplo, o clique de elements.functionPageBtn().click() precede a requisição.

Dessa forma, os dados das fixtures estarão sendo utilizados para aplicação. Para que funcione sem nenhum dado, utilize o intercept em todas as requisições, mesmo aquelas que não retornam dados para apresentar na tela.

Exemplos:

Código após fazer um delete

Nessa função, são feitas duas interceptações. A primeira, retorna um JSON vazio para que a página entenda que a ação de deletar foi concluída com sucesso.
FunctionDeleteComplete.json

Arquivo json vazio

FunctionAfterDelete.json

Arquivo com as informações, sem o cadastro que supostamente foi deletado

Resultado final:

Resultado final das ações

Top comments (0)