Na “pitada de Cypress” de hoje, aprenda como simular uma demora (ou atraso) em uma requisição HTTP para testar este estado intermediário da aplicação

Imaginemos uma funcionalidade de busca. Quando tal funcionalidade é invocada, uma requisição HTTP é disparada para uma API externa, e enquanto a API não responde, o texto Loading... é exibido junto com um ícone.

As vezes a resposta à requisição é rápida e mal dá pra ver o estado da aplicação enquanto a mesma está carregando. Porém, em outros casos a resposta demora um pouco, e aí dá pra ver o estado de Loading...

Mas e se eu quiser testar exatamente este estado intermediário, ou seja, testar quando o Loading... está sendo exibido?

Neste caso, quero garantir que uma certa demora ocorra, para que o Cypress sempre encontre o elemento de Loading... e assim evito flaky tests, ou seja, testes que as vezes passam e outras vezes falham, sem nenhuma mudança no código.

Vejamos um exemplo abaixo.

context('Delay simulation', () => {
  beforeEach(() => {
    cy.intercept(
      'GET',
      '**/search?query=cypress',
      {
        delay: 1000,
        fixture: 'stories'
      }
    ).as('getDelayedStories')
  })

  it('shows a loading state before showing the results', () => {
    cy.visit('https://example.com/search')

    cy.get('[data-cy="search-field"]')
      .should('be.visible')
      .type('cypress{enter}')

    cy.get('p:contains(Loading...)')
      .should('be.visible')
    cy.get('.loading-icon')
      .should('be.visible')

   cy.wait('@getDelayedStories')
  }) 
})

Para simular o atraso na requisição, utilizo a funcionalidade cy.intercept(), onde além de passar como argumento o método GET e o endereço **/search?query=cypress, passo também um objeto com a propriedade delay com o valor de 1000 milisegundos (1 segundo). Ao mesmo objeto, passo também uma fixture, pois não quero depender da API, uma vez que estou testando somente o comportamento do frontend.

Então faço a busca e durante este um segundo de atraso testo que um parágrafo com o texto Loading... e um elemento com a classe loading-icon são exibidos.

Por fim, aguardo pela requisição acabar.

E é assim que você pode simular o atraso em uma requisição com Cypress. Legal né?

Espero que o post seja útil caso precise lidar com uma situação como esta.

Para mais detalhes sobre a funcionalidade cy.intercept(), recomendo consultar a documentação oficial do Cypress.


E aí, gostou?

Deixa um comentário.


Este foi foi traduzido para inglês e pode ser encontrado no DEV Community.


Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy, e bons testes! 🎉

3 comentários em “Como simular a demora em uma requisição com Cypress

  1. Muito bom, no meu caso, estava apresentando erro “If you do not want status codes to cause failures pass the option: failOnStatusCode: false”.
    Depois de inserir “cy.visit(‘/’, {failOnStatusCode: false})” na url, foi tranquilo.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s