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 het 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.
Neem de volgende regel op 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() aan binnen elk it() blok 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 directory:
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)
})
})
})