Como simular a demora em uma requisição com Cypress

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 conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.

Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos no Udemy.

• Cypress básico
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

Bons testes! 🎉