DEV Community

Gustavo Caetano
Gustavo Caetano

Posted on • Edited on

1 1

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay