Já ouviu falar sobre testes de regressão visual? Não?
Testes de regressão visual são basicamente testes de alto nível que conseguem identificar qualquer alteração visual de um sistema. Para que isso ocorra, o teste realiza um snapshot da página em questão, e realiza uma comparação
com uma versão estável, conhecida como baseline.
O que vamos ver nessa série de artigos é como fazer testes de regressão visual utilizando os frameworks Cypress e Percy.
Pré-requisitos
- Ter o cypress instalado e configurado em sua máquina. No nosso caso, usaremos a versão mais recente (7.x), mas funcionará nas versões anteriores também.
- Ter um cadastro no https://percy.io (Não se assuste quando for direcionado para o browserstack. Você terá que fazer o login por lá mesmo).
- Ter o PERCY_TOKEN como variável de ambiente. (Caso não tenha, basta acessar o portal do percy.io e criar um novo projeto que você verá o token). Se você já tiver o projeto e não sabe seu token, acesse seu projeto do percy, vá na opção Project Settings. Lá você achará seu token.
Configuração
1) Adicione seu PERCY_TOKEN nas variáveis de ambiente.
Unix
export PERCY_TOKEN="<your token here>"
Windows
set PERCY_TOKEN="<your token here>"
2) Acesse o repositório do seu projeto Cypress através do terminal (Windows/Unix) e instale a dependência do Percy:
npm install --save-dev @percy/cli @percy/cypress
Obs: Lembre-se que a versão do Node deve ser no mínimo a 12.0.x. Caso contrário, ocorrá erro no seu console na hora de instalar as dependências acima.
3) Agora precisamos importar o package do Percy no projeto. Para isso, adicione a linha abaixo no seu arquivo Cypress/Support/index.js.
import '@percy/cypress';
Top comments (2)
Você tá usando a versão free mesmo? Inicialmente dá pra usar os recursos sem problemas? Acho que vou fazer alguns testes com ele.
Desculpa pelo Delay na resposta @rosariotech. Usei a versão free mesmo. O que mais muda na versão paga é questão de suporte e quantidade de screenshots que você pode tirar.
Da para usar os recursos normalmente. :)