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.


👋  Até a próxima e bons testes!

3 comentários em “Controle o relógio do navegador com Cypress

Deixe um comentário

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

Logo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. 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