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 importare e inizializzare Axe DevTools per il Web, è necessario prima installarlo. Se non l'hai ancora fatto, leggi la guida su come installarlo da un pacchetto, dal tuo repository di artefatti o da Deque's Agora. È inoltre necessario avere WebdriverIO scaricato e configurato.

Importazione e Inizializzazione

Importa sia Axe DevTools per il Web che WebdriverIO. La sintassi dipende dal linguaggio e dal sistema di moduli utilizzato nel tuo progetto. Scegli quella che corrisponde al tuo progetto:

JavaScript con moduli CommonJS

Questa è l'impostazione predefinita per un progetto Node.js senza "type": "module" nel suo package.json.

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

JavaScript con moduli ES

Usa questa sintassi in un progetto con "type": "module" nel suo package.json o in file .mjs.

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

TypeScript

TypeScript utilizza la stessa sintassi import dei moduli ES. @axe-devtools/webdriverio include le proprie dichiarazioni di tipo, quindi non c'è un pacchetto di @types/ separato da installare. I risultati delle scansioni sono tipizzati come AxeResults, esportati da axe-core:

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

Inizializzazione del Client

A questo punto, puoi inizializzare il tuo webdriver all'interno della tua funzione di test. In JavaScript:

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

In TypeScript, il client è un WebdriverIO.Browser, che è il tipo che AxeDevToolsWebdriverIO si aspetta:

const client: WebdriverIO.Browser = await remote({
  capabilities: {
    browserName: 'chrome'
  }
});

Quindi, puoi inizializzare Axe DevTools per il Web con il client webdriver. Questa dichiarazione è la stessa in entrambi i linguaggi:

const axeDevTools = new AxeDevToolsWebdriverIO({ client });

Ottenere il Contesto di 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.