Controle o relógio do navegador com Cypress

Aprenda como controlar o relógio do navegador com os comandos cy.clock e cy.tick

Você já teve que lidar com situações em testes automatizados onde certa ação (ou verificação) só poderia ser feita após um tempo ter passado?

Quero dizer algo como o seguinte.

Imagine uma aplicação, onde após o envio de um formuário, uma mensagem de sucesso é exibida, porém, após um certo período de tempo (digamos três segundos), tal mensagem desaparece.

Como você faria para testar não só que a mensagem foi exibida, como também, que desapareceu depois de tal tempo passar, porém, sem perder esse tempo?

Te apresento os comandos cy.clock() e cy.tick().

Com a funcinalidade cy.clock(), você pode “congelar” 🧊 o relógio 🕐 do navegador.

E com a funcionalidade cy.tick(), você pode avançar no tempo. 🕒

Vejamos um exemplo.

it('exibe mensagem de sucesso por 3 segundos', () => {
  cy.visit('https://example.com/form')
  cy.clock() // congela o relógio do navegador

  cy.fillFormAndSubmit() // comando customizado que preenche o formulário e envia os dados

  cy.contains('.success', 'Mensagem enviada com sucesso')
    .should('be.visible') // verificação de que a mensagem de sucessso está visível

  cy.tick(3000) // avança o relógio do navegador três segundos (em milissegundos)

  cy.contains('.success', 'Mensagem enviada com sucesso')
    .should('not.be.visible') // verificação de que a mensagem de sucessso não está mais visível
})

No código acima, visto que usei a funcionalidade cy.clock() para “congelar” o relógio do navegador logo após visitar a página da aplicação em teste, depois que verifico que a mensagem de sucesso está visível, posso avançar no tempo três segundos (com a funcionalidade cy.tick()), passando tal valor em milissegundos (para não perder tempo esperando), e então, fazer a verificação final de que tal mensagem não está mais visível, tornando o teste otimizado para prover rápido feedback após sua execução.

É isso aí!

---

Espero que tenha gostado dessa “pitada de Cypress“.

Se gostou, deixa um comentário.

---

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
• Testes de regressão visual com Cypress e Percy (básico)

---

👋  Até a próxima e bons testes!