Creación de pruebas para axe DevTools para la Web para Playwright

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, Playwright debe acceder a ella.

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

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 context = await browser.newContext({ bypassCSP: true })

Una vez que Playwright 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 AxeDevtoolsBuilder({ page }).analyze();
console.log(results);

Archivo de muestra completo

const playwright = require('playwright');
const AxeDevtoolsBuilder = require('@axe-devtools/playwright').default;

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

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.