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.

Los fragmentos individuales en las secciones a continuación son JavaScript y se compilan sin cambios en TypeScript. La sección Archivo de ejemplo completo proporciona la prueba completa en ambos lenguajes.

Requisitos previos

Para importar e inicializar Axe DevTools para Web, primero debe estar instalado. Si aún no lo has hecho, lee la guía sobre cómo instalarlo desde un paquete, desde tu repositorio de artefactos o desde el Agora de Deque. También necesitarás tener Puppeteer instalado.

Importar e Inicializar

Importa tanto Axe DevTools para Web como Puppeteer. La sintaxis depende del lenguaje y sistema de módulos que use tu proyecto. Elige el que coincida con tu proyecto:

JavaScript con módulos CommonJS

Este es el predeterminado para un proyecto de Node.js sin "type": "module" en su package.json.

const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');
const puppeteer = require('puppeteer');

JavaScript con módulos ES

Usa esta sintaxis en un proyecto con "type": "module" en su package.json, o en archivos .mjs.

import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import puppeteer from 'puppeteer';

TypeScript

TypeScript usa la misma sintaxis import que los módulos ES. @axe-devtools/puppeteer incluye sus propias declaraciones de tipos, por lo que no hay un paquete @types/ separado para instalar. Los resultados del escaneo están tipados como AxeResults, que axe-core exporta:

import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import puppeteer from 'puppeteer';
import type { AxeResults } from 'axe-core';

Para cada escaneo, se creará un nuevo objeto AxeDevToolsPuppeteer.

Obteniendo el contexto de 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');

Eludir la política de seguridad de contenido

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

La misma prueba se muestra a continuación en JavaScript y en TypeScript. La API de Axe DevTools es idéntica en ambos; la versión de TypeScript utiliza la sintaxis de import y anota los valores Puppeteer y el retorno del escaneo.

JavaScript

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

TypeScript

import puppeteer from 'puppeteer';
import type { Browser, Page } from 'puppeteer';
import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import type { AxeResults } from 'axe-core';

(async () => {

    //launch puppeteer web driver
    const browser: Browser = await puppeteer.launch();
    const page: Page = await browser.newPage();

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

    //analyze page
    const results: AxeResults = await new AxeDevToolsPuppeteer(page).analyze();

    //log results
    console.log(results);

    //close webdriver
    await 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.