Este conteúdo foi inicialmente publicado na Newsletter da Talking About Testing.
Hoje tenho boas práticas em automação de testes de regressão visual pra compartilhar contigo.
Testes de regressão visual são scripts que navegam pela aplicação em teste tirando screenshots ao longo do caminho e procurando por diferenças visuais com base em screenshots previamente aprovadas.
Quando escrevendo tais testes, alguns pontos devem ser levados em consideração para evitarmos resultados falsos-negativos.
Falsos-negativos são testes que falham quando deveriam estar passando, gerando aos times a falsa sensação de que algo está errado e fazendo-os perder a confiança nos testes.
Alguns motivos para testes de regressão visual gerarem resultados falsos-negativos são:
– O frontend não havia acabado de renderizar todos os elementos quando a screenshot foi tirada
– Animações ainda estavam ocorrendo quando a screenshot foi tirada
– A cada execução dos testes, dados dinâmicos são exibidos pela aplicação em teste
– A aplicação exibe a data atual durante a execução dos testes
– Campos de input de texto estão focados durante a execução dos testes e o cursor fica piscando
– Elementos dinâmicos são escondidos com base em coordenadas X e Y, não sendo precisas quando tais dimenssões mudam.
Porém, existem formas para lidar com todos os problemas citados acima.
Seguem algumas alternativas para evitar resultados falsos-negativos em testes automatizados de regressão visual:
– Esperar pela visibilidade dos principais elementos antes de tirar a screenshot
– Quando usando Cypress, utilizar fixtures para evitar dados dinâmicos
– Quando usando Cypress, congelar o relógio do navegador com o comando cy.clock(), onde caso a aplicação exiba a data e hora, a mesma estará “congelada” com a mesma data e hora da screenshot utilizada como baseline.
– Quando não se pode evitar dados dinâmicos, ignorá-los com uso de seletores CSS, em vez de coordenadas X e Y
– Fazer o blur de inputs de texto para não correr o risco do cursor piscando na hora da screenshot. Segue um exemplo usando Cypress: cy.get(…).type(…).blur()
– Tirar novas screenshots (re-tentativas) um certo número de vezes (por exemplo 3x) antes de falhar o teste, dando tempo à aplicação para finalizar animações e renderizar todos os elementos corretamente.
Aplicando tais práticas, podemos tirar melhor proveito desta técnica de prevenção de defeitos.
Bons testes!
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
👋 Até a próxima e bons testes!
TALKING ABOUT TESTING 