Scrivere Test per Axe DevTools per il Web per WebdriverIO

Scrivere test con Axe DevTools

I singoli frammenti nelle sezioni sottostanti sono JavaScript e si compilano invariati in TypeScript. La sezione File di esempio completo fornisce il test completo in entrambe le lingue.

Prerequisiti

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

Ottenere il Contesto della Scansione

Prima di poter scansionare una pagina per l'accessibilità, deve essere accessibile tramite WebdriverIO.

await client.url('<URL>');

Una volta che WebdriverIO ha accesso alla pagina, puoi scansionarla con Axe DevTools e salvare i risultati. Il modo più semplice per visualizzare i risultati della scansione è registrare il risultato nella console.

const results = await axeDevTools.analyze();
console.log(results);

File di Esempio Completo

Lo stesso test è mostrato qui di seguito in JavaScript e in TypeScript. L'API di Axe DevTools è identica in entrambi; la versione TypeScript utilizza la sintassi import e annota il client e i risultati della scansione.

JavaScript

const webdriverio = require('webdriverio');
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');

const simpleExample = async () => {
  const client = await webdriverio.remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

TypeScript

import { remote } from 'webdriverio';
import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import type { AxeResults } from 'axe-core';

const simpleExample = async (): Promise<AxeResults> => {
  const client: WebdriverIO.Browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results: AxeResults = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

Prossimi Passi

Ora che hai completato con successo una scansione per l'accessibilità, sei pronto per passare a argomenti di scansione più avanzati come generare report e utilizzare l'oggetto risultati.

Risoluzione dei Problemi

Se hai difficoltà a ottenere i risultati della scansione, contatta direttamente il tuo rappresentante Deque, contattaci tramite la nostra assistenza, o inviarci un'email. Saremo felici di aiutarti.