Forem

Cover image for Testes de regressão visual com Cypress + Percy: Analisando os diffs
Renato O. Nunes
Renato O. Nunes

Posted on

Testes de regressão visual com Cypress + Percy: Analisando os diffs

Execução com diffs

Até o momento já conseguimos executar o teste, enviar o snapshot para a plataforma Percy e realizar o auto-approve. Com isso, já temos nossa baseline.

Baseline serão seus snapshots válidos, ou seja, aqueles que devem ser considerados como certo. Serão com base neles que toda execução nova será comparada.

Agora iremos alterar algo na aplicação e rodar os testes novamente para que o Percy identifique as inconsistências.

  1. Vamos remover a frase Treinando testes de regressão visual com Percy da nossa aplicação e rodar o teste novamente.

  2. Como já temos uma imagem aprovada como baseline, tudo que precisamos fazer nesse momento é executar o teste novamente, já com a nossa aplicação sem a frase.

Alt Text

Acessar o link da build gerada no final da execução: https://percy.io/4c61c7c3/tutorial/builds/10231561

E olha só, já podemos ver que o Percy identificou inconsistências na nova imagem com base na imagem que temos salva.

  • Versão Desktop
    Alt Text

  • Versão mobile
    Alt Text

A partir daí exitem algumas ações a serem tomadas, como:

  • Solicitar alterações do produto,impedindo que o teste seja salvo como "correto" até que a correção seja realizada. Para isso basta clicar no ponto de exclamação e colocar um comentário (não é obrigatório colocar) do porque está solicitando a request.

Alt Text

  • Você também pode simplesmente aprovar essa imagem como a nova baseline, considerando que a frase deve ser removida de fato. Para isso, basta clicar no sinal de ok.

Alt Text

No caso acima, fizemos apenas para uma imagem, pois temos apenas um testes. Claramente em seu projeto, haverá mais testes e consequentemente mais snapshot para validar. Caso queira aprovar todos os snapshots como corretos, basta clicar no botão Approve Build que toda sua build será aprovada.

Alt Text

No próximo capítulo iremos ver integração contínua com Github Actions.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay