Testes de regressão visual com Cypress + Percy:  CI com Github Actions
Tags: tutorial, cypress, testing, automation
Published: 2021-05-06 23:40:03

# Integração Percy + Github + Actions

Por último, mas não menos importante, vamos fazer a integração dos nossos testes + percy com o Github Actions. 
> Antes de prosseguir, garanta que seu projeto já esteja no github. 

1) Crie uma *Secret Token* no seu projeto com o nome PERCY_TOKEN. O Conteúdo será o token que você pode pegar lá na plataforma do Percy, como já vimos anteriormente. 
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg6iu5ql6cefflds418a.png)
  
2) Crie um GitHub Actions novo. Se você não sabe criar, basta ir no seu projeto, em Actions, e clicar na opção *Set up a workflow yourself*

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

3) Configure conforme o código abaixo:
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25v6lpkzb6zrtb9broa7.png)

> https://github.com/r0nunes/cypress-percy/blob/main/.github/workflows/percy.yml
	
Feito isso, basta realizar o commit. 
	
4. Clicando novamente na aba Actions, você verá que nossa build foi executada com sucesso. De agora em diante, qualquer pull_request que houver na branch 'main', o nosso Github Actions será executado e teremos uma nova build lá na plataforma do Cypress. 

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

## Bonus#1

Da forma que fizemos, só vamos ter a integração contínua rodando nossos testes, porém se houver alguma diferença nas imagens, a build não irá falhar. Para que isso ocorra, basta fazer a integração do Percy com o seu repositório do github. 

1) Vá no seu projeto, na plataforma Percy. Clique na opção Integrations¹ e depois clique na opção *Connect to Github*.


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

Clique na opção *Install Github App*. Na janela que abrir para liberar permissão, selecione todos os repositórios ou, caso deseje, selecione o repositório do seu projeto em questão. Após isso clique em *Install*.

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

Feito isso, a partir de agora quando você fizer um pull_request de uma branch, o seu Actions irá executar juntamente com o *job* do percy, onde qualquer diferença encontrada irá travar a build. 

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

Para liberar, ou você ajustar a aplicação para que fique como estava antes, ou, caso seja uma nova feature, você deve ir na plataforma do Percy, e na build que acabou de executar, aprovar o novo snapshot como sua baseline. 

Você não precisa fazer mais nada além disso, o Percy automaticamente irá mandar uma requisição para o github e rodar o Actions novamente, liberando para o merge.

## Conclusão

Com base nesse artigo/tutorial, espero por ajudar todos vocês que queiram implementar mais uma camada de testes automatizados que traz um grande ganha na qualidade do produto. 

:exclamation: Ponto importante.
1. Essa camada de testes estão basicamente na mesma camada de testes UI. Logo, são testes que podem ter um custo/tempo alto na hora da execução. Portanto, a minha sugestão é para que analise bem quais são as páginas/funcionalidades mais importantes da sua aplicação, e não saía automatizando todas as telas que você tiver pois isso não irá te trazer ganhos. 

:computer: Link da aplicação: https://ronunes-proffyaglz.netlify.app/
📂 Link do repositório: https://github.com/r0nunes/cypress-percy
📄 Documentação do Percy: https://docs.percy.io/docs