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.

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

Bons testes! 🎉

Publicado por Walmyr

I'm a software engineer that loves testing. I'm also a clean coder, blogger, YouTuber, Cypress.io 🌲 ambassador, writer, online instructor, mentor, consultant, speaker, an active member of the testing automation and JavaScript communities, and a fan of good music, tattoos, vegan 🌱 food, and skateboarding.

12 comentários em “Como aguardar uma requisição acabar antes de seguir adiante com Cypress”

  1. Pingback: Por que você deve usar Cypress para automação de testes – TALKING ABOUT TESTING

      1. Boa noite Walmyr, acompanho todos seus posts, queria pedir ajuda em um teste para entrar em uma vaga de emprego, tem como me ajudar? É para testar a primeira versão de uma API pública. Esta API possui os principais métodos HTTP (get, post, put, patch, delete) com exemplos na sua documentação.
        O seu objetivo é criar um projeto de automação de API utilizando Cypress, criando cenários em BDD com Cucumber, os cenários que você julgar os mais importantes para a cobertura de testes da API.
        Você tem total autonomia para sugerir melhorias para aumentar a qualidade desta API, conforme os resultados dos seus cenários de teste.
        Meu whatsapp é esse 91 984478864

      2. O que posso te recomendar são meus conteúdos, tanto aqui no blog quando em meu canal no YouTube, sobre os assuntos de testes de API, BDD e Cucumber.

  5. Olá Walmyr. Primeiramente parabéns pelo conteúdo.
    Gostaria de saber se consigo montar um método quer aguarde todas as requisições serem concluídas para aí sim realizar a próxima ação. Interceptar todas as requisições, sem precisar passar exatamente quais são

    Responder

      1. No sistema que estou testando, em uma tela específica são enviadas diversas requisições do tipo GET. Preciso esperar que todas elas sejam concluídas parte depois clicar em um elemento. Mas isso não está acontecendo. O teste falha ao tentar clicar no elemento que ainda não está disponível antes de acabar as requisições. Queria uma forma de aguardar esse elemento sem ser simplesmente um cy.wait com alguns segundos

Deixe um comentário