Escribe pruebas con Axe DevTools Cypress
Escribir pruebas de accesibilidad con Axe DevTools para Web en Cypress
Producir resultados de escaneo de accesibilidad con Axe DevTools puede ser tan sencillo como una línea de código. Estos resultados pueden ser consumidos en bruto, utilizados junto con una biblioteca de aserciones, o empleados para crear informes de accesibilidad.
Estas instrucciones se aplican a Cypress 10.0 y versiones posteriores.
Requisitos previos
Para probar páginas con Axe DevTools, primero necesitas instalarlo en tu proyecto. Si aún no has completado este paso, consulta la guía de instalación.
Estructura del proyecto
.
├── package.json
├── cypress.config.js
├── cypress
│ ├── e2e
│ │ └── test.cy.js
│ └── support
│ └── e2e.jsConfiguración
Lo siguiente es necesario para usar Axe DevTools Cypress.
Incluye la siguiente línea en cypress/support/e2e.js:
import '@axe-devtools/cypress';Dentro del archivo cypress.config.js , necesitarás añadir lo siguiente:
const { defineConfig } = require('cypress');
const axeDevtoolsCypressPlugin = require("@axe-devtools/cypress/dist/plugin");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
axeDevtoolsCypressPlugin(on);
return config;
}
}
});Archivo de muestra completo
Llama a cy.axeAnalyze() y cy.getAxeResults() dentro de cada bloque it() , y utiliza un nombre de archivo único para cada prueba para evitar sobrescribir los resultados de otras pruebas.
Agrega este código al archivo test.cy.js en el directorio 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)
})
})
})