Scrivere Test per Axe DevTools per Web con Puppeteer

Scrivere test con Axe DevTools

Produrre risultati di scansioni per l'accessibilità con Axe DevTools può essere facile come una riga di codice. Questi risultati possono essere utilizzati grezzi, insieme a una libreria di asserzioni, o per creare report di accessibilità.

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

Prerequisiti

Per importare e inizializzare Axe DevTools per 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 Agora di Deque. Avrai anche bisogno di installare Puppeteer.

Importazione e Inizializzazione

Importa sia Axe DevTools per Web che Puppeteer. La sintassi dipende dalla lingua e dal sistema di moduli che il tuo progetto utilizza. Scegli quella che corrisponde al tuo progetto:

JavaScript con moduli CommonJS

Questo è il predefinito per un progetto Node.js senza "type": "module" nel suo package.json.

const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');
const puppeteer = require('puppeteer');

JavaScript con moduli ES

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

import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import puppeteer from 'puppeteer';

TypeScript

TypeScript utilizza la stessa sintassi import dei moduli ES. @axe-devtools/puppeteer fornisce le proprie dichiarazioni di tipi, quindi non c'è un pacchetto @types/ separato da installare. I risultati della scansione sono tipizzati come AxeResults, che axe-core esporta:

import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import puppeteer from 'puppeteer';
import type { AxeResults } from 'axe-core';

Per ogni scansione, verrà creato un nuovo oggetto AxeDevToolsPuppeteer.

Ottenere il contesto della scansione

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

//Launch the Puppeteer Driver
const browser = await puppeteer.launch();
//Create a new page in the browser
const page = await browser.newPage();
//Send the browser to the desired page to scan
await page.goto('$URL');

Aggirare la Content Security Policy

Se la pagina che stai cercando di scansionare ha abilitato la Content Security Policy, potresti avere dei problemi. Se incontri questo problema, Axe DevTools include una soluzione. Basta includere questa istruzione dopo aver creato la tua pagina:

await page.setBypassCSP(true);

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

const results = await new AxeDevToolsPuppeteer(page).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 entrambi; la versione TypeScript utilizza la sintassi import e annota i valori Puppeteer e il risultato della scansione.

JavaScript

const puppeteer = require('puppeteer');
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');

(async () => {

    //launch puppeteer web driver
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    //launch page for testing
    await page.goto('https://broken-workshop.dequelabs.com');

    //analyze page
    const results = await new AxeDevToolsPuppeteer(page).analyze();
    
    //log results
    console.log(results);

    //close webdriver
    browser.close();
})();

TypeScript

import puppeteer from 'puppeteer';
import type { Browser, Page } from 'puppeteer';
import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import type { AxeResults } from 'axe-core';

(async () => {

    //launch puppeteer web driver
    const browser: Browser = await puppeteer.launch();
    const page: Page = await browser.newPage();

    //launch page for testing
    await page.goto('https://broken-workshop.dequelabs.com');

    //analyze page
    const results: AxeResults = await new AxeDevToolsPuppeteer(page).analyze();

    //log results
    console.log(results);

    //close webdriver
    await browser.close();
})();

Passi successivi

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 usare l'oggetto dei risultati.

Risoluzione dei problemi

Se hai problemi a ottenere i risultati della scansione, contatta direttamente il tuo rappresentante Deque, raggiungici tramite il nostro desk di supporto, o inviaci un'email. Saremo felici di aiutarti.