Come abbiamo ottimizzato i test di accessibilità e performance nello sviluppo

Da bravi sviluppatori quali siamo, prestiamo sempre attenzione a come ottimizzare i processi di sviluppo; motivo per cui abbiamo creato una libreria che permette di generare la struttura base di un progetto front-end permettendo di scegliere un framework di sviluppo.

Abbiamo poi integrato una serie di strumenti comuni per tutti i nostri progetti ed è proprio con Cypress che siamo riusciti ad ottimizzare questo processo dei test automatici per accessibilità e performance.

Cypress

Per chi non lo conoscesse, Cypress è un framework di test end-to-end automatico basato su JavaScript ed è, quindi, integrabile con qualsiasi framework di linguaggio moderno.

Facile da configurare ed altamente programmabile nelle sue funzionalità, Cypress consente anche di integrare e utilizzare facilmente librerie esterne che offrono servizi di test su performance, SEO, accessibilità.

Tra questi ne abbiamo individuato due di particolare importanza per il nostro obiettivo:

1. Lighthouse;
2. A11y.

Lighthouse

Lighthouse è uno strumento Open Source di Google che offre controlli su rendimento, performance, accessibilità, SEO, Core Web Vitals, e altro ancora.

Ad integrare questo strumento in Cypress ci pensa la libreria @cypress-audit/lighthouse, basterà installarla nel nostro progetto

//npm
npm i -D cypress @cypress-audit/lighthouse

//yarn
yarn add -D cypress @cypress-audit/lighthouse

aggiungere la configurazione base di lighthouse che troviamo in documentazione al file di configurazione di cypress cypress/plugins/index.js (Cypress v.10+)

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

module.exports = {
  e2e: {
    baseUrl: "", // Replace with your app's URL
    setupNodeEvents(on, config) {
      on("before:browser:launch", (browser = {}, launchOptions) => {
        prepareAudit(launchOptions);
      });

      on("task", {
        lighthouse: lighthouse(),
      });
    },
  },
};

aggiungere l’import dei comandi nel file della cartella di struttura di Cypress cypress/support/commands.js, in modo da poter utilizzare il comando cy.lighthouse all’interno dei test di Cypress

import "@cypress-audit/lighthouse/commands"

e, infine, aggiungere il test lighthouse sul main test di cypress cypress/e2e/index.cy.js o su quello desiderato.

describe('Page testing', () => {
  it('LightHouse test', () => {
    cy.visit('/')
    cy.lighthouse()
  })
})

È possibile, inoltre, specificare le opzioni di test Lighthouse, come i goal di punteggio oppure opzioni di viewport, ad esempio:

cy.lighthouse(
  {
    performance: 90,
    accessibility: 100,
    'best-practices': 90,
    seo: 100,
  },
  {
    formFactor: 'desktop',
    screenEmulation: {
      mobile: false,
      disable: false,
      width: Cypress.config('viewportWidth'),
      height: Cypress.config('viewportHeight'),
      deviceScaleRatio: 1,
     },
   },
)

Una volta lanciato Cypress, verrà eseguito il test Lighthouse, il quale analizzerà il sito in caricamento prendendo in considerazione anche l’aspetto mobile e fornendo un punteggio dei core principali, generando un errore se non si è rientrati tra i goal indicati. Viene, inoltre, fornita una metrica in termini di tempo per i principali Core Web Vitals con relativa diagnostica contenente possibili criticità, con allegata spiegazione e possibile soluzione.

A11y

L’accessibilità è un tema fondamentale per noi. Per questo motivo abbiamo integrato in Cypress un test apposito per l’accessibilità basato su Axe, uno degli strumenti di test di accessibilità più automatizzati al mondo e a cui si affidano anche importanti aziende, come Google e Microsoft.

Per integrare Axe in Cypress, ci pensa la libreria cypress-axe:

//npm
npm i -D cypress-axe

//yarn
yarn add -D cypress-axe

Dopo l’installazione, basterà importare il pacchetto nel file di comandi di cypress, visto in precedenza cypress/support/commands.js

import 'cypress-axe'

e, infine, aggiungere il test lighthouse:

describe('Page testing', () => {
  beforeEach(() => {
    cy.visit('/')
  })

  it('Axe test', () => {
    cy.injectAxe()
    cy.checkA11y()
  })
})

L’integrazione di questo ulteriore test in Cypress, analizzerà a fondo gli aspetti legati all’accessibilità del sito, fornendo un elenco di errori: si possono ottenere più informazioni riguardo l’errore — come una descrizione più approfondita o qual è l’elemento interessato — ispezionando l’output di Cypress in DevTools. Cliccando sull’errore, infatti, la libreria stamperà in console una serie di informazioni utili per comprendere e risolvere il problema.

Per concludere

Questi sono due strumenti di cui ci avvaliamo per ottimizzare i processi in fase di sviluppo. Per quanto riguarda l’accessibilità, andiamo a testare attraverso gli User Test, un modo per valutare anche i comportamenti degli utenti rispetto alla progettazione.