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.

// 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.


E aí, gostou?

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


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


Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy.

Um comentário em “Como realizar testes de regressão visual com Cypress e Percy

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s