Executando seus testes na plataforma Percy

Bom, já que temos certeza que os nossos testes não possuem nenhum erro e estão executando perfeitamente em nosso ambiente local, é hora de fazer a integração com o ambiente do Percy Cloud.

Para isso, você deve executar via CLI (command line) o comando:

npx percy exec -- cypress run

Uma vez que temos nossa PERCY_KEY exportada em nosso ambiente, quando passamos o comando percy em nossa execução, automaticamente faremos a sincronização com a plataforma Percy.

No final da execução do teste, você deverá ter o resultado abaixo, caso ocorra tudo certo.

O próximo passo é acessar a plataforma do Percy. Copie o link que é gerado no final do teste e acesse no seu navegador de preferência.

Ex.: No nosso caso o link foi: https://percy.io/4c61c7c3/tutorial/builds/10214530

Conhecendo a plataforma Percy

Assim que você acessar o link acima e fizer login na plataforma, você será direcionado para a build que foi executada na sua máquina e com os testes que foram executados.

Veja que já temos um snapshot da tela home da nossa aplicação, exatamente como pedimos para o nosso teste fazer.

Alguns detelhes que precisamos saber antes de prosseguir:

1) Quando realizamos o merge dos testes diretamente na master/main, o Percy irá aprovar automaticamente os snapshot.

O que você quer dizer com aceito automaticamente Renato? O que eu quero dizer é que se você já tiver uma imagem como baseline, ele irá substituir pela imagem nova. E se você não tiver, a plataforma irá considerar a imagem nova como baseline, ok?

A solução para isso é simplesmente sempre trabalhar em uma branch diferente da master/main, como normalmente já fazemos no dia a dia, ou ir nas configurações do projeto e alterar para que o auto-approve seja realizado em uma branch diferente. Particularmente, eu não altero essa configuração.

Mas, caso queira, basta ir em no seu projeto > Settings e procurar por Branch Settings.

2) Por padrão, a sua execução é realizada nos navegadores Chrome e Firefox, e nas resoluções 375px (mobile) e 1280px (Desktop). Você pode alterar os modos para verificar como fica a sua aplicação clicando nas opções acima da imagem localizada ao lado direito. Também é possível executar seu teste com uma resolução especifica, porém não iremos ver agora.

Exemplo do nosso snapshot na resolução 375px

Por hora, apenas o Chrome e Firefox são aceitos pelo Percy. Mais detalhes veja em: https://docs.percy.io/docs/cross-browser-visual-testing

No próximo tópico, iremos analisar as diferenças encontradas nos snapshots.