Escribir pruebas para axe DevTools para JavaScript en el navegador web

Escritura de pruebas con axe DevTools

Prerrequisitos

Para probar páginas con axe DevTools, primero debes importarlo e inicializarlo en tu proyecto. Si aún no ha completado este paso, consulte esta guía sobre cómo hacerlo.

Esta guía muestra a los usuarios cómo integrar esta biblioteca axe DevTools con la biblioteca de pruebas de React.

Con la herramienta importada e inicializada en su archivo de prueba, agregar pruebas de accesibilidad es tan simple como esto:

test('Component has no accessibility violations', () => {
 const {container} = render(<Badcomp></Badcomp>);
 axeDevTools.run(container, (err, results) => {
    expect(results.violations.length).toBe(0);
    done();
 });
});

Este caso de prueba representa un componente dentro de la utilidad de contenedor de la biblioteca de pruebas de React y luego axe DevTools lo escanea en busca de violaciones de accesibilidad. Este ejemplo no espera violaciones de accesibilidad de ningún tipo, pero se puede modificar según las necesidades de su organización. Para obtener más información sobre cómo usar los resultados de los escaneos, lea la guía sobre el objeto de resultados que se devuelve después de un escaneo.

Archivo de muestra

Este archivo de muestra que utiliza axe DevTools con la biblioteca de pruebas React debería ayudar a contextualizar cómo se utiliza la herramienta.

import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import axeDevTools from '@axe-devtools/browser';
import "babel-polyfill"

describe('Bad Component', () => {

  beforeEach(function(done) {
    axeDevTools.init('wcag2', function() {
      done();
    });
  });

   test('Component has no accessibility violations, w/ attest reporter', (done) => {
     const {container} = render(<Badcomp></Badcomp>);
     axeDevTools.run(container, (err, results) => {
        expect(results.violations.length).toBe(0);
        done();
     });
   });
});

Próximos pasos

Ahora que ha completado con éxito un análisis de accesibilidad, está listo para pasar a temas de análisis más avanzados, como generar informes y usar el objeto de resultados.

Solución de problemas

Si tiene problemas para obtener los resultados del escaneo, comuníquese directamente con su representante de Deque, contáctenos a través de nuestro servicio de asistencia o envíenos un correo electrónico. Estaremos encantados de ayudarle.