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, prima di tutto devi averlo installato nel tuo progetto. Se non hai ancora completato questo passaggio, consulta la guida all'installazione.

Struttura del Progetto

.
├── package.json
├── cypress.config.js
├── cypress
│   ├── e2e
│   │   └── test.cy.js
│   └── support
│       └── e2e.js

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

Richiama cy.axeAnalyze() e cy.getAxeResults() all'interno di ogni blocco it() , e utilizza un nome file unico per ciascun 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)
    })
  })
})