Como realizar testes de regressão visual com Cypress e Percy

Hoje em “pitadas de Cypress”, aprenda como integrá-lo com o serviço Percy.io para a realização de testes de comparação de snapshots

Essa é pro Pedro Hyvo, que esses dias sugeriu o seguinte tema para a série.

Testes de regressão visual seria uma boa.

Boa mesmo Pedro.

Então vamos lá!

Mas antes deixa eu contextualizar o que são testes de regressão visual.

Testes de regressão visual são aqueles que interagem com a aplicação como um usuário real faria, porém, além de interagir (e as vezes fazer verificações, ou assertions), tais testes também tiram snapshots ao longo da execução, e estas são comparadas com outras previamente aprovadas. Caso haja uma diferença visual, você saberá antes de publicar a nova versão do software para seus usuários.

Em alguns casos, a diferença visual pode ser esperada, devido a adição de uma nova funcionalidade ou uma mudança de layout.

Por outro lado, as vezes a diferença pode ser devido a um bug real. Neste casos, você achou o bug antes de seus tão preciosos clientes (os usuários do software).

Vejamos um exemplo de uma aplicação para a compra de ingressos.

Antes de mais nada, precisamos instalar os pacotes do Cypress e do Percy como dependências de desenvolvimento. Tal processo pode ser realizado com o seguinte comando.

npm i cypress @percy/cypress -D

Depois de tudo instalado e com o Cypress inicializado (ou seja, depois de rodar o comando  npx cypress open pela primeira vez), é hora de fazer alguns ajustes nos arquivos do Cypress, antes de partir pra escrita do teste.

No topo do arquivo cypress/support/commands.js, importe a biblioteca @cypress/percy. Veja como abaixo.

// cypress/support/commands.js

import '@percy/cypress'

Depois disso, atualize o arquivo cypress/plugins/index.js com o seguinte.

// Isso não é mais necessário.
// Leia a atualização no final do conteúdo.
// cypress/plugins/index.js

let percyHealthCheck = require('@percy/cypress/task')

module.exports = (on, config) => {
  on("task", percyHealthCheck)
}

Agora vejamos o teste.

// cypress/integration/ingressos.spec.js

describe('Ingressos', () => {
  beforeEach(() => cy.visit('https://exemplo.com/ingressos'))

  it('habilita o botão "Enviar" após preencher os campos obrigatórios', () => {
    cy.percySnapshot('O teste começou e o formulário está vazio')

    cy.get('#name')
      .should('be.visible')
      .type('Walmyr')
    cy.get('#email')
      .should('be.visible')
      .type('walmyr@exemplo.com')

    cy.contains('Enviar')
      .should('be.visible')
      .and('be.disabled')

    cy.percySnapshot('Chegando no preenchimento do último campo obrigatório')
    cy.get('#i-agree')
      .should('be.visible')
      .check()

    cy.percySnapshot('Todos campos obrigatórios foram preenchidos')
    cy.contains('Enviar')
      .should('be.visible')
      .and('not.be.disabled')
  })
})

Por fim, basta criar uma conta no serviço Percy.io, um projeto no dashboard do Percy, e exportar o project_token como uma variável de ambiente que fique disponível no terminal onde os testes serão executados.

Obs.: Veja abaixo como exportar variáveis de ambiente no Windows e em sistemas baseados em Unix (Linux e OSX).

# Windows
$ set PERCY_TOKEN=<your token here>

# Unix 
$ export PERCY_TOKEN=<your token here>

Além disso, e em vez de rodar npx cypress run para executar os testes, você deve rodar npx percy exec -- cypress run.

Com isso, o teste irá tirar três snapshots durante sua execução. Uma no início, quando o formulário ainda não foi preenchido; outra antes de preencher o último campo obrigatório (onde o botão de enviar ainda deve estar desabilitado); e por fim, uma uma após o preenchimento de todos os campos obrigatórios, onde enfim, o botão de enviar deve estar habilitado para submissão do formulário.

Visite o projeto criado no dashboard do Percy para vizualiar as snapshots tiradas durante a execução dos testes.

Deixo aqui a documentação oficial do serviço Percy.io para integração com o Cypress.

Atualização: O Percy atualizou para a versão 3.x.x e algumas mudanças são necessárias. Segue a documentação para a realização do upgrade.

---

E aí, gostou?

Deixa um comentário com o que devo escrever em uma próxima “pitada de Cypress“.

---

Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.

---

Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos no Udemy.

• Cypress básico
• Cypress intermediário
• Cypress avançado
• Boas práticas em automação de testes com Cypress
• Testes end-to-end com Cypress

---

Bons testes! 🎉