DEV Community

loading...
Cover image for Testes de regressão visual com Cypress + Percy: Execução na plataforma Percy

Testes de regressão visual com Cypress + Percy: Execução na plataforma Percy

r0nunes profile image Renato O. Nunes ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

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.

Alt Text

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.

Alt Text

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.

Alt Text

Exemplo do nosso snapshot na resolução 375px

Alt Text

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.

Discussion (2)

Collapse
medeirosfernando profile image
Fernando Medeiros

Excelente artigo, Renato.
Parabéns e obrigado por compartilhar conhecimentos.

Collapse
r0nunes profile image
Forem Open with the Forem app