Scrivi Test con Axe DevTools Cypress

Produrre risultati di scansioni di accessibilità con Axe DevTools può essere semplice come una singola riga di codice. Questi risultati possono essere utilizzati grezzi, in combinazione con una libreria di asserzioni, o per creare report di accessibilità.

Prerequisiti

Per testare le pagine con Axe DevTools, è necessario prima installarlo nel tuo progetto. Se non hai ancora completato questo passaggio, visualizza il guida all'installazione.

Struttura del Progetto

.
├── package.json
├── cypress.config.js
├── cypress
│   ├── e2e
│   │   └── test.cy.js
│   └── support
│       └── e2e.js
└── results
    └── broken-workshop.json

Cypress 10.0 ha sostituito il file di configurazione cypress.json con cypress.config.js (o cypress.config.ts), rinominato la directory degli spec cypress/integration in cypress/e2e, rinominato cypress/support/index.js in cypress/support/e2e.js e rimosso la directory cypress/plugins a favore della funzione setupNodeEvents nel file di configurazione. I file spec usano il suffisso .cy.js invece di .spec.js.

La directory results contiene i risultati della scansione JSON scritti dai tuoi test. Cypress la crea alla prima scrittura, quindi non è necessario aggiungerla tu stesso.

Configurazione

È necessario quanto segue per utilizzare Axe DevTools Cypress.

Includi la seguente riga in cypress/support/e2e.js:

import '@axe-devtools/cypress';

All'interno del file cypress.config.js, dovrai aggiungere quanto segue:

const { defineConfig } = require('cypress');
const axeDevtoolsCypressPlugin = require("@axe-devtools/cypress/dist/plugin");

module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
       axeDevtoolsCypressPlugin(on);
       return config;
     }
   }
 });

File di Esempio Completo

Chiama cy.axeAnalyze() e cy.getAxeResults() all'interno di ciascun blocco it() e usa un nome file univoco per ogni test per evitare di sovrascrivere i risultati di altri test.

Aggiungi questo codice al file test.cy.js nella directory e2e:

describe('Axe DevTools Cypress', () => {
  it('Scans the home page for accessibility issues', () => {
    // Visit the page to test
    cy.visit('https://broken-workshop.dequelabs.com')
    // Run an accessibility scan on the current page
    cy.axeAnalyze()
    // Write results to a uniquely named file; use a different name for each test to avoid overwriting
    cy.getAxeResults().then(results => {
      cy.writeFile('./results/broken-workshop.json', results)
    })
  })
})

Esegui i tuoi test

Aggiungi script al tuo package.json in modo da poter eseguire la suite in modalità headless in CI o aprire l'app Cypress mentre scrivi test:

{
  "scripts": {
    "test": "cypress run",
    "test:open": "cypress open"
  }
}

Esegui tutti gli spec in cypress/e2e in modalità headless con npm test, oppure apri l'app interattiva Cypress con npm run test:open. Per eseguire un singolo spec, utilizza il flag --spec: npx cypress run --spec cypress/e2e/test.cy.js.

Iframe con Origine Differente e Isolamento

cy.axeAnalyze() inietta axe-core nella pagina sotto test e in ogni iframe che può raggiungere. Gli iframe in cui Cypress non può iniettare, inclusi iframe con origini differenti e iframe con un attributo sandbox, vengono saltati: la scansione continua e riporta i risultati per il resto della pagina anziché fallire il test. Il contenuto all'interno di un iframe saltato non viene analizzato, quindi testa quelle pagine direttamente nei loro speci se hai bisogno di coprirle.