Testes de regressão visual com Cypress + Percy: Execução na plataforma Percy
Tags: tutorial, cypress, testing, automation
Published: 2021-05-06 23:17:19

# 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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mc9stqgb261fbniare3h.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5niq3duatws4phiy6uxa.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tfvkhaaom07o0oj9bhz.png)
	
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wnf3xqxrv1o7gnculoz.png)

Exemplo do nosso snapshot na resolução 375px
	
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o2hqa7u4vyljjvt6d7y.png)

> 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.