Escribiendo pruebas para Axe DevTools para Web con Playwright

Escribiendo 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 ser utilizados de forma cruda, en conjunto con una librería de aserciones o para crear informes de accesibilidad.

Requisitos previos

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

Obteniendo el contexto de escaneo

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

Bypass de la Política de Seguridad de Contenido

Si la página que estás intentando escanear tiene habilitada la Política de Seguridad de Contenido, puedes tener problemas. Si encuentras este problema, Axe DevTools incluye una solución. Simplemente incluye esta declaración después de que la página sea creada:

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

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

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

Archivo de muestra completo

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

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 directamente a tu representante de Deque, comunícate con nosotros a través de nuestro centro de soporte, o envíanos un correo electrónico. Estaremos encantados de ayudarte.