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.
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
3) Configure conforme o código abaixo:
https://github.com/r0nunes/cypress-percy/blob/main/.github/workflows/percy.yml
Feito isso, basta realizar o commit.
- 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.
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.
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.
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.
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.
❗ Ponto importante.
- 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.
💻 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
Top comments (0)