Escribir pruebas con axe DevTools Cypress

Producir resultados de escaneo de accesibilidad con axe DevTools puede ser tan fácil como una línea de código. Estos resultados pueden consumirse sin procesar, usarse junto con una biblioteca de afirmaciones o utilizarse para crear informes de accesibilidad.

Prerrequisitos

Para probar páginas con axe DevTools, primero debes tenerlo instalado en tu proyecto. Si aún no ha completado este paso, consulte la guía de instalación.

Estructura del proyecto

.
├── package.json
├── cypress.config.js
├── cypress
│   ├── e2e
│   │   └── test.cy.js
│   └── support
│       └── e2e.js

Configuración

Se requiere lo siguiente para utilizar axe DevTools Cypress.

Incluya la siguiente línea en cypress/support/e2e.js:

import '@axe-devtools/cypress';

Dentro del archivo cypress.config.js , deberá agregar 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

Agregue este código al archivo test.cy.js en el directorio 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)
    })
  })
})