Comeabbiamoottimizzatoitestdiaccessibilitàeperformancenellosviluppo

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:

• Lighthouse
• 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.

1//npm
2npm i -D cypress @cypress-audit/lighthouse
3
4//yarn
5yarn 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+)

1const { lighthouse, prepareAudit } = require("@cypress-audit/lighthouse");
2
3module.exports = {
4  e2e: {
5    baseUrl: "", // Replace with your app's URL
6    setupNodeEvents(on, config) {
7      on("before:browser:launch", (browser = {}, launchOptions) => {
8        prepareAudit(launchOptions);
9      });
10
11      on("task", {
12        lighthouse: lighthouse(),
13      });
14    },
15  },
16};

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

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

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

1describe('Page testing', () => {
2  it('LightHouse test', () => {
3    cy.visit('/')
4    cy.lighthouse()
5  })
6})

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

1cy.lighthouse(
2  {
3    performance: 90,
4    accessibility: 100,
5    'best-practices': 90,
6    seo: 100,
7  },
8  {
9    formFactor: 'desktop',
10    screenEmulation: {
11      mobile: false,
12      disable: false,
13      width: Cypress.config('viewportWidth'),
14      height: Cypress.config('viewportHeight'),
15      deviceScaleRatio: 1,
16     },
17   },
18)

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:

1//npm
2npm i -D cypress-axe
3
4//yarn
5yarn add -D cypress-axe

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

1import 'cypress-axe'

e, infine, aggiungere il test lighthouse:

1describe('Page testing', () => {
2  beforeEach(() => {
3    cy.visit('/')
4  })
5
6  it('Axe test', () => {
7    cy.injectAxe()
8    cy.checkA11y()
9  })
10})

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.