Testes de regressão visual com Cypress + Percy: Configuração

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';