Cypress com Google Lighthouse para testes de perfomance

Logos Lighthouse e Cypress

Desde a época em que a pandemia atingiu o mundo, os aplicativos e sites se tornaram a fonte ideal para cumprir todos os principais requisitos (por exemplo, compras de supermercado, pagamentos de contas, pedido de comidas, compra de viagens, etc.).

E devido a esses avanços tecnológicos, estamos ficando cada vez mais acostumados com a gratificação instantânea, ou seja, quando queremos alguma informação ou algo, queremos para ontem, e qualquer atraso no recebimento dessas informações ou processo é acompanhado de frustração e seria catastrófico se um site ou aplicativo demorasse para carregar, pois foi comprovado por inúmeros estudos que a nossa capacidade de atenção diminuiu ao longo do tempo; e falando no contexto de desempenho de uma página, se uma página tem baixa velocidade, rapidamente vamos para o site de um concorrente em vez de esperar que o site termine de carregar.

Isso pode, em uma última análise, significar perda de receita para as empresas, e como o desempenho e a experiência do usuário andam de mãos dadas, é imperativo considerar os testes de desempenho com alta prioridade; como defensores da qualidade, precisamos garantir que a experiência dos nossos usuários sejam positivas.

Portanto não basta validar apenas se os requisitos funcionam conforme esperado, precisamos garantir que o desempenho e a experiência dos usuários não sejam afetadas, e é aí que entra o Google Lighthouse.

Pré Requisitos

• Conhecimento: Nenhum 🙌
• IDE de Desenvolvimento (estou utilizando o VSCode) ✅
• Node e NPM instalado ✅

Recapitulando… 🤔

Quando falamos em teste de perfomance, normalmente dividimos em duas áreas: lado do cliente e lado do servidor. Uma das abordagens mais comuns no teste de desempenho do lado do servidor, é o teste de carga, que tem como principal objetivo verificar se os servidores podem lidar com uma determinada carga de acordo com as várias solicitações que são enviadas de diferentes usuários simultaneamente, usando ferramentas como JMeter, K6 ou Gatling, por exemplo.

Por outro lado, quando falamos de testes de desempenho do lado do cliente, o objetivo é validar a rapidez com que um único usuário pode ver as respostas da aplicação. Os servidores podem ser capazes de lidar com a carga simultânea, mas a maneira como diferentes navegadores processam dados de servidores também tem um impacto no desempenho. Por exemplo, o JavaScript torna os sites interativos, mas também pode contribuir para que um site seja lento, especialmente se não for otimizado. A experiência de desempenho de um único usuário é tão importante quanto a de vários usuários.

Teste de performance

Conforme mencionado acima, uma das ferramentas mais populares para realizar as validações de desempenho do lado do cliente é o Lighthouse, uma ferramenta gratuita e de código aberto.

Google Lighthouse

O Lighthouse audita o desempenho de um determinado site através do rastreamento de uma página fornecida e executa as auditorias em relação às principais métricas de desempenho, como também permite auditar outras áreas, dentre elas acessibilidade, práticas recomendadas e otimização de mecanismos de pesquisa.

Cypress

Já o Cypress é uma da ferramenta para testes no front-end e vendo sendo uma das mais utilizadas atualmente, baseada na linguagem JavaScript e adequada para testar aplicações Web modernas. Pois ao contrário das outras ferramentas de automação de testes como o Selenium, o Cypress opera diretamente dentro do navegador da web e vem com uma técnica única de manipulação de DOM.

Como diz a própria documentação do Cypress: “Com o Cypress, você pode facilmente criar testes para seus aplicativos Web modernos, depurá-los visualmente e executá-los automaticamente em suas compilações de integração contínua.”

E para ajudar nessa jornada, o Cypress possui uma biblioteca que integra com o Google Lighthouse, o plugin cypress-audit.

Iniciando um novo projeto

Com o terminal aberto, vamos criar a pasta do nosso projeto:

mkdir play

Acessar a pasta criada:

cd play

Iniciar um projeto node:

npm init -y

Saída gerada deve sem bem parecida com o código abaixo:

{
  "name": "play",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\\\"Error: no test specified\\\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Instalar o Cypress:

npm install cypress --save-dev

Abrir o Cypress pela primeira vez para a ferramenta criar toda a estrutura de pastas automaticamente:

npx cypress open

Instalar a biblioteca cypress-audit:

npm install --save-dev @cypress-audit/lighthouse

Instalar a biblioteca pa11y:

npm install --save-dev @cypress-audit/pa11y

Configurando o Lighthouse CLI:

Essa etapa é para configurar a CLI do Lighthouse, pois o cypress-audit utiliza essa CLI, e como queremos executar o Lighthouse dentro do mesmo navegador que o Cypress, o código a seguir precisa ser adicionado dentro do arquivo cypress.config.js.

const { lighthouse, prepareAudit } = require("@cypress-audit/lighthouse");
const { pa11y } = require("@cypress-audit/pa11y");

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      on("before:browser:launch", (browser = {}, launchOptions) => {
        prepareAudit(launchOptions);
      });

      on("task", {
        lighthouse: lighthouse(),
        pa11y: pa11y(console.log.bind(console)),
      });
    },
  },
};

Adicionar a seguinte linha no arquivo cypress/support/commands.js, e pronto, configuramos o Google Lighthouse dentro dos testes do Cypress:

import "@cypress-audit/lighthouse/commands";

Escrevendo primeiro teste

Dentro da pasta cypress/e2e, vamos criar um arquivo chamado google.spec.cy.js, portanto a estrutura ficará da seguinte maneira: cypress/e2e/google.spec.cy.js e dentro desse arquivo adicionar um testes para visitar a pagina da google e executar o lighthouse através do seguinte código:

describe('Lighthouse', () => {
  it('should run performance audits in google home page', () => {
    cy.visit('<https://google.com.br/>');
    cy.lighthouse();
  });
});

Para executar o teste de forma headless, ou seja, sem abrir o browser, tudo através do terminal, basta executarmos o comando:

npx cypress run --browser chrome --spec 'cypress/e2e/google.spec.cy.js'

👉 Precisamos passar o comando — browser Chrome para executar os testes no Google Chrome, pois o Lighthouse é um plugin do Chrome, caso não passe nada, por padrão o Cypress vai executar no Electron e os testes de perfomance não vão ser executados.

Após os testes serem executados, a seguinte saída deve ser gerada:

Error: cy.lighthouse - Some thresholds have been crossed.

performance record is 69 and is under the 100 threshold
accessibility record is 85 and is under the 100 threshold
best-practices record is 75 and is under the 100 threshold
seo record is 62 and is under the 100 threshold
pwa record is 0 and is under the 100 threshold

👉 Isso acontece porque o Lighthouse por padrão, executará os testes com base em uma pontuação de 100 para cada métrica. Isso significa que nem o site da própria Google é 100% 😁.

Porém essas métricas podem ser alteradas de duas maneiras, a primeira é alterando diretamente nos testes conforme os critérios, ou pode ser alterada de forma global, onde por padrão serão aplicadas para todos os testes.

Para configurar as métricas diretamente nos testes basta seguir a seguinte estrutura:

describe('Lighthouse', () => {
  it('should run performance audits in google home page', () => {
    cy.visit('<https://google.com.br/>');
    
        const customThresholds = {
          performance: 30,
          accessibility: 50,
          seo: 70,
          'first-contentful-paint': 2000,
          'largest-contentful-paint': 10000,
          'cumulative-layout-shift': 0.1,
          'total-blocking-time': 800,
        };
    
        const desktopConfig = {
          formFactor: 'desktop',
          screenEmulation: { disabled: true },
        };
    
        cy.lighthouse(customThresholds, desktopConfig);
  });
});

Ao executarmos novamente os testes através do comando abaixo, provavelmente os testes passarão:

npx cypress run --browser chrome --spec 'cypress/e2e/google.spec.cy.js'

Apesar de não ser recomendado, é possível definir as métricas gerais dentro de um arquivo cypress.json da seguinte maneira:

{
  "lighthouse": {
    "thresholds": {
      "performance": 85,
      "accessibility": 50,
      "best-practices": 85,
      "seo": 85,
      "pwa": 50
    },
    "options": {
        "formFactor": "desktop",
        "screenEmulation": { "disabled": true }
    },
    "config": {
    }
  }
}

👉 Observação: essas métricas substituem as métricas configuradas por teste. Por isso não é muito recomendada.

Gerando reporter dos testes executados em HTML

Para gerar os relatórios em HTML do Lighthouse, primeiramente precisamos especificar html como ouput de saída para o lighthouseConfig, através do seguinte comando:

const lighthouseConfig = {
  output: "html",
};

Portanto o arquivo de testes por completo ficará da seguinte maneira:

describe('Lighthouse', () => {
  it('should run performance audits in google home page', () => {
    cy.visit('<https://google.com.br/>');
    
        const customThresholds = {
          performance: 30,
          accessibility: 50,
          seo: 70,
          'first-contentful-paint': 2000,
          'largest-contentful-paint': 10000,
          'cumulative-layout-shift': 0.1,
          'total-blocking-time': 800,
        };
    
        const desktopConfig = {
          formFactor: 'desktop',
          screenEmulation: { disabled: true },
        };
  
        const lighthouseConfig = {
          settings: { output: "html" },
          extends: "lighthouse:default",
        };
        
    
        cy.lighthouse(customThresholds, desktopConfig, lighthouseConfig);
  });
});

👉 Se não especificarmos o output, então um reporter no formato json será gerado.

Em segundo lugar, precisamos configurar o fs dentro do arquivo de config do cypress(cypress.config.js), para gravar o relatório HTML no disco da seguinte maneira:

const { lighthouse, prepareAudit } = require("@cypress-audit/lighthouse");
const fs = require("fs");

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      on("before:browser:launch", (browser = {}, launchOptions) => {
        prepareAudit(launchOptions);
      });
      on("task", {
        lighthouse: lighthouse((lighthouseReport) => {
          const reportHtml = lighthouseReport.report;
          fs.writeFileSync('cypress/reports/lighthouse.html', reportHtml);
        }),
      });
    },
  },
};

Ao executarmos os testes novamente, após a execução, os relatórios dos mesmos são gerados dentro da pasta cypress/reports, ao abrirmos no browser, algo parecido com a imagem abaixo será exibido:

Testes realizado no google.com

Eu recomendo fortemente uma leitura da documentação do Cypress-audit e do Lighthouse CLI para entender quais outras configurações podem ser modificadas e quais são as métricas exibidas no relatório e o que cada uma significa.

Usar o Lighthouse dentro de seus testes Cypress é apenas uma das muitas maneiras de monitorar o desempenho do seu site. Pense cuidadosamente em suas necessidades e, em seguida, decida se essa abordagem é adequada para você e sua equipe.

Cheers! 🍻

Caso tenha alguma dúvida, sugestão de melhoria ou algum problema, deixe seu comentário. 👌

Caso tenha gostado ou tudo tenha ocorrido direitinho, me siga no Medium e deixa seu like. 😘

Referências:

Using Cypress and Google Lighthouse for Performance Testing

JavaScript Component Testing and E2E Testing Framework | Cypress

Welcome to the cypress-audit documentation | cypress-audit Documentation