Escritura de pruebas para axe DevTools para la Web para Puppeteer

Escritura de 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 sin procesar, usarse junto con una biblioteca de afirmaciones o utilizarse para crear informes de accesibilidad.

Prerrequisitos

Para probar páginas con axe DevTools, primero debes importarlo e inicializarlo en tu proyecto. Si aún no ha completado este paso, consulte esta guía sobre cómo hacerlo.

Obtener contexto de análisis

Antes de poder escanear una página para verificar su accesibilidad, Puppeteer debe acceder a ella.

//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');

Eludir la política de seguridad de contenido

Si la página que está intentando escanear tiene habilitada la Política de seguridad de contenido, es posible que tenga problemas. Si encuentra este problema, axe DevTools incluye una solución alternativa. Simplemente incluya esta declaración después de crear su página:

await page.setBypassCSP(true);

Una vez que Puppeteer haya accedido a la página, puede escanearla con axe DevTools y guardar los resultados. La forma más sencilla de ver los resultados del escaneo es registrar en la consola el objeto de resultados.

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

Archivo de muestra 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 ha completado con éxito un análisis de accesibilidad, está listo para pasar a temas de análisis más avanzados, como generar informes y usar el objeto de resultados.

Solución de problemas

Si tiene problemas para obtener los resultados del escaneo, comuníquese directamente con su representante de Deque, contáctenos a través de nuestro servicio de asistencia o envíenos un correo electrónico. Estaremos encantados de ayudarle.