Schrijf Tests met Axe DevTools Cypress
Toegankelijkheidstests schrijven met Axe DevTools voor het web in Cypress
Toegankelijkheidsscans produceren met Axe DevTools kan net zo eenvoudig zijn als één regel code. Deze resultaten kunnen onbewerkt worden gebruikt, in combinatie met een assertiebibliotheek, of om toegankelijkheidsrapporten te maken.
Deze instructies zijn van toepassing op Cypress 10.0 en later.
Vereisten
Om pagina's te testen met Axe DevTools, moet je deze eerst in je project geïnstalleerd hebben. Als je deze stap nog niet hebt voltooid, bekijk dan de installatiehandleiding.
Projectstructuur
.
├── package.json
├── cypress.config.js
├── cypress
│ ├── e2e
│ │ └── test.cy.js
│ └── support
│ └── e2e.jsInstallatie
Het volgende is vereist om Axe DevTools Cypress te gebruiken.
Voeg de volgende regel toe in cypress/support/e2e.js:
import '@axe-devtools/cypress';Binnen het cypress.config.js bestand, moet je het volgende toevoegen:
const { defineConfig } = require('cypress');
const axeDevtoolsCypressPlugin = require("@axe-devtools/cypress/dist/plugin");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
axeDevtoolsCypressPlugin(on);
return config;
}
}
});Volledig Voorbeeldbestand
Roep cy.axeAnalyze() en cy.getAxeResults() binnen elk it() blok aan, en gebruik een unieke bestandsnaam voor elke test om te voorkomen dat resultaten van andere tests worden overschreven.
Voeg deze code toe aan het test.cy.js bestand in de e2e map:
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)
})
})
})