Como aguardar uma requisição acabar antes de seguir adiante com Cypress

Hoje em “pitadas de Cypress“, aprenda um mecanismo para tornar seus testes mais robustos.

Imagine uma aplicação para a simples criação de anotações.

Após realizar o login na aplicação, o usuário é redirecionado para uma lista com todas suas anotações.

Além disso, após criar, editar ou deletar uma anotação, o mesmo também é direcionado para a mesma lista de anotações.

Vejamos um exemplo.

describe('Anotacoes', () => {
  beforeEach(() => {
    cy.intercept('GET', '**/notes').as('getNotes')

    cy.login()
    cy.wait('@getNotes')
  })

  it('cria uma anotacao com sucesso', () => {
    const minhaAnotacao = 'Comprar café'

    cy.get('[href="/notes/new"]').click()
    cy.get('#content').type(minhaAnotacao)
    cy.contains('Criar').click()
    cy.wait('@getNotes')

    cy.contains(minhaAnotacao).should('be.visible')
  })
})

Na primeira linha dentro do callback da função beforeEach, utilizo o cy.intercept() para interceptar uma requisição HTTP do tipo GET para uma rota que acabe com a string /notes, e então crio um alias para esta requisição, chamado getNotes.

Depois, logo após o login na aplicação, utilizo o cy.wait(), passando o alias criado anteriormente (‘@getNotes’). Dessa forma, o Cypress irá aguardar por tal requisição acabar antes de seguir adiante para a execução do teste que cria uma anotação com sucesso.

Daí então chegamos no teste propriamente dito.

Inicialmente armazeno uma string em uma variável chamada minhaAnotacao.

Depois executo os passos para a criação de uma anotacão, onde primeiro clico em um link, depois digito a anotação em um campo de texto, e por fim clico em um botão que possui o texto ‘Criar’.

Então, antes da verificação, chamo novamente o cy.wait(), passando o alias criado anteriormente (‘@getNotes’), para novamente aguardar a requisição acabar antes de seguir adiante.

Enfim, com a requisição completa, faço a verificação de que minha anotação está visível. 🥳

E aí, gostou?

Aguardo teu feedback.

Este conteúdo 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.