Scrivere test per Axe DevTools for Web per WebDriverJS

Scrivere test con Axe DevTools

I singoli frammenti nelle sezioni seguenti sono in JavaScript e vengono compilati senza modifiche in TypeScript. La sezione File di esempio completo presenta il test completo in entrambe le lingue.

Prerequisiti

Per importare e inizializzare Axe DevTools per Web, è necessario prima installarlo. Se non lo hai ancora fatto, leggi la guida su come installarlo da un pacchetto, dal tuo repository di artefatti o dall'Agora di Deque. Ti serve anche un Selenium WebDriver scaricato e configurato a tua scelta.

Importazione e Inizializzazione

Importa sia Axe DevTools per Web sia WebDriverJS. La sintassi dipende dal linguaggio e dal sistema di moduli che utilizza il 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 { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const webdriver = require('selenium-webdriver');

JavaScript con moduli ES

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

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import webdriver from 'selenium-webdriver';

TypeScript

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

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

Inizializzazione del Driver

Una volta importato Axe DevTools per Web, puoi inizializzare il driver. Ogni scansione richiede la propria istanza di Axe DevTools per Web, quindi la inizializzerai mentre scrivi i test.

In JavaScript:

const driver = new webdriver.Builder().forBrowser('chrome').build();

In TypeScript, utilizzando i tipi Builder e WebDriver importati sopra:

const driver: WebDriver = new Builder().forBrowser('chrome').build();

Ottenere il contesto della scansione

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

await driver.get('<URL>');

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

const results = await new AxeDevToolsBuilder(driver).analyze();
console.log(results);

File di esempio completo

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

JavaScript

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');

var driver = new WebDriver.Builder().forBrowser('chrome').build();

driver.get('https://google.com').then(function() {
  new AxeDevToolsBuilder(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    console.log(results);
  });
});

TypeScript

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

(async () => {
  const driver: WebDriver = new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://google.com');
    const results: AxeResults = await new AxeDevToolsBuilder(driver).analyze();
    console.log(results);
  } finally {
    await driver.quit();
  }
})();

Prossimi passaggi

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

Risoluzione dei problemi

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