Confira na matéria do </ Felipe > essa ideia que representa o compromisso dos nxt_ gen devs com a inovação no desenvolvimento de uma experiência do usuário cada vez melhor. 

Esta biblioteca é um fruto de minha própria jornada como desenvolvedor. Durante anos, desenvolvi, refinei e utilizei essa ferramenta em todos os meus projetos. Ela nasceu da necessidade de assegurar a qualidade e a consistência da interface de usuário frente às constantes mudanças que um projeto pode sofrer ao longo de seu ciclo de vida.

A decisão de torná-la open source e compartilhá-la com a comunidade não foi apenas um passo para contribuir com ferramentas úteis para outros desenvolvedores, mas também uma forma de dar vida própria a este projeto. Acredito firmemente que, ao disponibilizá-la para o público, posso não só ajudar outros a superarem os desafios que enfrentei, mas também permitir que a biblioteca cresça e evolua com as contribuições da comunidade.

Meu compromisso com a manutenção e atualização da biblioteca segue firme, e é com grande entusiasmo que convido todos a explorar, usar e, claro, contribuir para que ela se torne ainda melhor. Afinal, a colaboração e o compartilhamento de conhecimento são pilares fundamentais do mundo open source e a base para construirmos soluções cada vez mais robustas e eficientes.

Seja para garantir a qualidade visual do seu projeto, economizar horas de revisão manual, ou simplesmente para explorar novas ferramentas que possam enriquecer seu fluxo de trabalho, a biblioteca de teste regressivo está aqui para ser uma aliada na sua jornada de desenvolvimento. Experimente, adapte-a às suas necessidades e, mais importante, compartilhe suas experiências e melhorias. Juntos, podemos fazer dessa ferramenta uma referência na área de testes de regressão visual.

Por que Testes Regressivos?

Num ambiente de desenvolvimento ágil, onde as iterações são rápidas e as mudanças constantes, garantir que cada atualização mantenha a integridade visual do site ou aplicação é essencial. Foi esta a motivação para criar uma ferramenta que automatiza a captura de screenshots e a comparação visual entre diferentes versões das páginas web.

O Poder do Puppeteer

A base da nossa biblioteca é o Puppeteer, uma ferramenta poderosa que permite automatizar ações em navegadores. Com ele, podemos simular interações do usuário como navegação, cliques e preenchimento de formulários, além de capturar screenshots em vários breakpoints, como desktop, tablet e mobile.

Como Funciona?

A biblioteca utiliza arquivos JSON para configuração, permitindo definir cenários de teste e viewports específicos. Cada cenário pode incluir ações como login, navegação para uma URL específica, e espera por elementos chave antes da captura da screenshot.

Configurando seu Primeiro Teste

Vamos começar com algo simples: uma captura da tela inicial do Google.

1. Adicione o seguinte cenário no seu arquivo scenariosConfig:

{
  "label": "Google Home",
  "pageInitial": "https://www.google.com",
  "targetElementToWait": "form[action='/search']",
  "fullPage": true
}

Este cenário instrui a biblioteca a navegar até a página inicial do Google e esperar pelo formulário de busca antes de tirar uma screenshot completa da página.

1. Para uma busca no Google por “Tesla”, o cenário seria:

{
  "label": "Google Search for Tesla",
  "pageInitial": "https://www.google.com",
  "targetElementToWait": "form[action='/search']",
  "fullPage": true,
  "pageScript": "../scripts/searchGoogle.js"
}

Neste caso, um pageScript adicional preenche o formulário de busca e submete antes da captura da tela.

Executando os Testes

Depois de configurar os cenários, é hora de fazer o build e executar os testes:

yarn build
yarn test --headless=false

O modo --headless=false permite visualizar o navegador durante o teste, ideal para entender o processo.

Benefícios e Impactos

Adotar testes de regressão visual com esta biblioteca significa:

• Minimizar o risco de mudanças indesejadas na UI
• Aumentar a confiança no processo de desenvolvimento
• Economizar tempo gasto na revisão manual das interfaces

Conclusão

A biblioteca de teste regressivo é mais do que uma ferramenta; é um escudo protetor para a sua interface de usuário, assegurando que a evolução do seu projeto não comprometa a experiência visual do usuário. Com ela, você ganha não apenas em eficiência, mas também na tranquilidade de saber que sua UI permanecerá consistente, não importa quantas alterações você faça no backend ou no CSS.

Explore, experimente e integre essa biblioteca ao seu fluxo de trabalho. É open source, então sinta-se à vontade para contribuir, adaptar e melhorá-la conforme sua necessidade. Juntos, podemos elevar o padrão de qualidade e consistência visual em projetos web por todo o mundo.

Para mais informações, acesse o repositório no GitHub e comece a explorar as possibilidades que os testes de regressão visual oferecem.