Scrivi Test con Axe DevTools Cypress
Scrivere test di accessibilità con Axe DevTools per il Web in 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à.
Queste istruzioni si applicano a Cypress 10.0 e successivi.
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.jsConfigurazione
È 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)
})
})
})