Scrivere Test per Axe DevTools per il Web con Playwright

Scrivere test con Axe DevTools

Produrre risultati di scansione dell'accessibilità con Axe DevTools può essere facile quanto una riga di codice. Questi risultati possono essere utilizzati grezzi, in combinazione con una libreria di asserzioni, o per creare report di accessibilità.

I singoli frammenti nelle sezioni sottostanti sono JavaScript e si compilano senza modifiche in TypeScript. La sezione File Completo di esempio 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 bundle, dal tuo repository di artefatti o da Agora di Deque. Hai anche bisogno di una versione di Playwright scaricata e configurata a tua scelta.

Importazione e Inizializzazione

Importa sia Axe DevTools per Web che Playwright. La sintassi dipende dal linguaggio e dal sistema di moduli utilizzati nel tuo progetto. Scegli quello 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 { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');

JavaScript con moduli ES

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

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';

TypeScript

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

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import type { AxeResults } from 'axe-core';

Inizializzazione di Playwright

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.

Il codice di inizializzazione è lo stesso in JavaScript e TypeScript, eccetto che TypeScript può dedurre o annotare i tipi restituiti da Playwright. In JavaScript:

// This will open up a headless instance of chromium
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

In TypeScript, con i tipi scritti:

import type { Browser, BrowserContext, Page } from 'playwright';

// This will open up a headless instance of chromium
const browser: Browser = await playwright.chromium.launch();
const context: BrowserContext = await browser.newContext();
const page: Page = await context.newPage();

Ottenere il contesto della scansione

Prima di poter eseguire una scansione della pagina per l'accessibilità, deve essere acceduta tramite Playwright.

//Launch the Playwright Driver
const browser = await playwright.chromium.launch();
//Create a new browser context
const context = await browser.newContext();
//Create a new page in the browser
const page = await context.newPage();
//Send the browser to the desired page to scan
await page.goto('$URL');

Eludere la Content Security Policy

Se la pagina che stai cercando di scansionare ha la Content Security Policy abilitata, potresti incontrare problemi. In caso di problemi, Axe DevTools include una soluzione. Basta includere questa dichiarazione dopo che la pagina è stata creata:

await context = await browser.newContext({ bypassCSP: true })

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

const results = await new AxeDevToolsBuilder({ 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 Playwright e il ritorno della scansione.

JavaScript

const playwright = require('playwright');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');

(async () => {

    //Launch the Playwright Driver
    const browser = await playwright.chromium.launch();
    //Create a new browser context
    const context = await browser.newContext();
    //Create a new page in the browser
    const page = await context.newPage();

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

    //analyze page
    const results = await new AxeDevToolsBuilder({ page }).analyze();
    
    //log results
    console.log(results);

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

TypeScript

import * as playwright from 'playwright';
import type { Browser, BrowserContext, Page } from 'playwright';
import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import type { AxeResults } from 'axe-core';

(async () => {

    //Launch the Playwright Driver
    const browser: Browser = await playwright.chromium.launch();
    //Create a new browser context
    const context: BrowserContext = await browser.newContext();
    //Create a new page in the browser
    const page: Page = await context.newPage();

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

    //analyze page
    const results: AxeResults = await new AxeDevToolsBuilder({ page }).analyze();

    //log results
    console.log(results);

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

Passi successivi

Ora che hai completato con successo una scansione di accessibilità, sei pronto per passare a temi di scansione più avanzati come generare report e utilizzare 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 servizio clienti, o inviarci un'email. Saremo felici di aiutarti.