Escribir Pruebas para Axe DevTools for Web para Puppeteer

Escribir pruebas con Axe DevTools

Producir resultados de escaneo de accesibilidad con Axe DevTools puede ser tan fácil como una línea de código. Estos resultados pueden consumirse en bruto, usarse en conjunto con una biblioteca de aserciones, o emplearse para crear informes de accesibilidad.

Requisitos previos

Para poder probar páginas con Axe DevTools, primero debes importarlo e inicializarlo en tu proyecto. Si aún no has completado este paso, consulta esta guía para saber cómo hacerlo.

Obteniendo el Contexto del Escaneo

Antes de poder escanear una página para accesibilidad, debe ser accedida por 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');

Evitando la Política de Seguridad de Contenidos

Si la página que estás intentando escanear tiene habilitada la Política de Seguridad de Contenidos, podrías tener problemas. Si encuentras este inconveniente, Axe DevTools incluye una solución. Simplemente incluye esta declaración después de crear tu página:

await page.setBypassCSP(true);

Una vez que Puppeteer ha accedido a la página, puedes escanearla con Axe DevTools y guardar los resultados. La manera más sencilla de ver los resultados del escaneo es loguear el objeto de resultados en la consola.

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

Archivo de Ejemplo Completo

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();
})();

Próximos Pasos

Ahora que has completado exitosamente un escaneo de accesibilidad, estás listo para avanzar a temas de escaneo más avanzados como generar informes y usar el objeto de resultados.

Solución de Problemas

Si tienes problemas para obtener los resultados del escaneo, contacta a tu representante de Deque directamente, contáctanos a través de nuestra mesa de ayuda, o envíanos un correo electrónico. Estaremos encantados de ayudarte.