Scrivi test con axe DevTools Cypress

Produrre risultati di scansioni di accessibilità con axe DevTools può essere semplice come scrivere una sola riga di codice. Questi risultati possono essere utilizzati direttamente, insieme a una libreria di asserzioni o per creare report di accessibilità.

Prerequisiti

Per testare le pagine con axe DevTools, è necessario prima installarlo nel 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

Per utilizzare axe DevTools Cypress è necessario quanto segue.

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

import '@axe-devtools/cypress';

All'interno del file cypress.config.js , sarà necessario 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

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

describe('Axe DevTools Cypress', () => {
  before(() => {
    cy.visit('https://broken-workshop.dequelabs.com')
    cy.axeAnalyze()
  })
  it('Get results from analyzing', () => {
    cy.getAxeResults().then(results => {
      cy.writeFile('./results.json', results)
    })
  })
})