Skip to content

Aprendizados de testes de regressão visual

Jump to bottom
Jalussa dos Santos edited this page Aug 6, 2021 · 26 revisions

Aprendizados relacionados ao projeto de testes de regressão visual com Percy

Instalação e Setup inicial

Tecnologias para execução:

- Todas as tecnologias do nível básico
- Percy
Percy é uma plataforma de análise e teste visual tudo-em-um, onde lida com tudo, desde capturar e renderizar screenshots, até detectar e notificar sua equipe sobre mudanças visuais. Permite automatizar o controle de qualidade manual para detectar bugs visuais e obter informações sobre as alterações da UI a cada implantação, além disso, possui integração com seus testes Cypress
  • Execute no terminal o comando para instalar o percy
npm install --save-dev @percy/cli @percy/cypress
  • Para adicionar instantaneamente o Percy aos seus testes Cypress, você precisará primeiro importar o pacote @percy/cypress para o seu arquivo cypress/support/index.js 
import '@percy/cypress';

Comandos Cypress

Capturando snapshot

Integração contínua

Integração Percy - Github Actions:

  • Para realizar a integração do percy com o Github, é necessário:
    • Acessar a opção Integrações, em Vincule um repositório, selecione o Github e clique em Instale o aplicativo Github, você será direcionado para tela de configurações do seu github, selecione o seu repositório e clique em Instalar
    • Ainda em Integrações selecione o repositório do github para vincular ao seu projeto percy
    • No Github, acessar a opção Definições , em Segredos, clicar em Novo segredo de repositório, em Nome informar PERCY_TOKEN e em valor o token do projeto percy
  • Veja mais em Configurando variáveis ​​de ambiente no Github
  • Veja mais em Instalando a integração do Percy com o GitHub

Configuração do yml para integração Percy - Cypress no Github Actions:

  • Para realizar a integração do percy com o GitHub Actions, é necessário:

    • Ter um arquivo yml, conforme exemplo: Configurações Github Actions
    • Incluir no arquivo yml do workflow a chamada para execução do script configurado no package.json, como por exemplo:
     - run: npm run test:exemploTesteRegressaoVisualPercy
    • Incluir em script do arquivo package.json, a linha de comando para execução do teste, como por exemplo:
     percy exec -- cypress run

Integração Percy - Gitlab CI:

  • Para realizar a integração do percy com o Gitlab, é necessário:
    • No Gitlab, em Preferências do perfil, acessar a opção Tokens de acesso, em Nome informar percy e clique em api e em read_user e clique em Criar token de acesso pessoal
    • No seu projeto Percy, acessar a opção Integrações, em Vincule um repositório, selecione o Gitlab e clique em Instale o aplicativo Gitlab, informe o token de acesso pessoal do Gitlab e clique em Salvar
    • Ainda em Integrações selecione o repositório do gitlab para vincular ao seu projeto percy e após clique em Salvar
    • No Gitlab, acessar a opção Definições , em CI/CD, clicar em Expandir de Variáveis, em Nome informar PERCY_TOKEN, em valor o token do projeto percy e marcar a opção Variável de máscara
  • Veja mais em Configurando variáveis ​​de ambiente no Gitlab
  • Veja mais em Integrando GitLab com Percy

Configuração do yml para integração Percy - Cypress no Gitlab CI:

  • Para realizar a integração do percy com o Gitlab CI, é necessário:

    • Ter um arquivo yml, conforme exemplo: Configurações Gitlab CI
    • Incluir no arquivo yml a chamada para execução do script configurado no package.json, como por exemplo:
     - run: npm run test:exemploTesteRegressaoVisualPercy
    • Incluir em script do arquivo package.json, a linha de comando para execução do teste, como por exemplo:
     percy exec -- cypress run

Aprendizados relacionados ao projeto de testes de regressão visual com cypress plugin snapshots

Instalação e Setup inicial

Tecnologias para execução:

- Todas as tecnologias do nível básico
- Cypress plugin snapshots
Cypress plugin snapshots é um plug-in para testes de instantâneo no Cypress.io. Mesma API do Jest, mas com interface gráfica para revisar e aprovar mudanças.

Comparativo entre os testes de regressão visual com Percy e testes de regressão visual com cypress plugin snapshots

Percy Cypress-plugin-snapshots
Plataforma de análise e teste visual tudo-em-um Plugin for snapshot tests in Cypress.io.Mesma API do Jest, mas com interface gráfica para revisar e aprovar mudanças.
Instalação e configuração do projeto sem muitas linhas de código Instalação e configuração do projeto com muitas linhas de código
Ferramenta desenvolvida pela BrowserStack Ferramenta open source
Ferramenta considerada estável Ferramenta considerada instável, possui mais de 60 issues em seu projeto
Possibilita executar vários testes ao mesmo tempo Apresenta erros ao executar todos os testes ao mesmo tempo
Imagens salvas em um servidor externos para análise das mudanças Imagens salvas dentro do projeto, gerando "arquivos desnecessários" para análise das mudanças
Dashboard externo para analise das mudanças ao executar via Cypress Open Gera feedback dentro da interface do Cypress ao executar via Cypress Open
Limitação de snapshots para a versão free Sem limitação de snapshots visto que trata-se de ferramenta open source
Clone this wiki locally