Scrivere Test per Axe DevTools per Web per JavaScript nei Browser

Scrivere test con Axe DevTools

Prerequisiti

Per testare le pagine con Axe DevTools, è prima necessario importarlo e inizializzarlo nel tuo progetto. Se non hai ancora completato questo passaggio, consulta questa guida per sapere come farlo.

Questa guida mostra agli utenti come integrare questa libreria Axe DevTools con la libreria di test React

Con lo strumento importato e inizializzato nel tuo file di test, aggiungere test per l'accessibilità è semplice come questo:

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

Questo caso di test rende un componente all'interno dell'utility container della libreria di test React, e poi Axe DevTools lo scansiona per violazioni di accessibilità. Questo esempio prevede zero violazioni di accessibilità di qualsiasi tipo, ma può essere modificato in base alle esigenze della tua organizzazione. Per vedere di più su come utilizzare i risultati delle scansioni, leggi la guida su l'oggetto dei risultati che viene restituito dopo una scansione.

File di esempio

Questo file di esempio che utilizza Axe DevTools con la libreria di test React dovrebbe aiutare a contestualizzare l'uso dello strumento.

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();
     });
   });
});

Prossimi passi

Ora che hai completato con successo una scansione dell'accessibilità, sei pronto per passare a temi di scansione più avanzati come generare rapporti e usare l'oggetto dei risultati.

Risoluzione dei problemi

Se hai problemi a ottenere i risultati delle scansioni, contatta direttamente il tuo rappresentante Deque, raggiungici tramite il nostro supporto tecnico, o mandaci un'email. Saremo felici di aiutarti.