Escribiendo pruebas para Axe DevTools para Web con WebDriverJS

Escribiendo pruebas con Axe DevTools

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

Prerrequisitos

Para importar e inicializar Axe DevTools para Web, primero debe estar instalado. Si aún no lo ha hecho, lea la guía sobre cómo instalarlo de un paquete, de su repositorio de artefactos, o de Agora de Deque. También necesita un WebDriver de Selenium descargado y configurado a su elección.

Importación e Inicialización

Importe tanto Axe DevTools para Web como WebDriverJS. La sintaxis depende del lenguaje y del sistema de módulos que use su proyecto. Elija el que se ajuste a su proyecto:

JavaScript con módulos CommonJS

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

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const webdriver = require('selenium-webdriver');

JavaScript con módulos ES

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

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import webdriver from 'selenium-webdriver';

TypeScript

TypeScript utiliza la misma sintaxis import que los módulos ES. @axe-devtools/webdriverjs incluye sus propias declaraciones de tipo, por lo que no hay un paquete @types/ separado para instalar. Los resultados del escaneo se tipifican como AxeResults, que exporta axe-core:

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

Inicializando el Driver

Una vez que haya importado Axe DevTools para Web, puede inicializar el driver. Cada escaneo requiere su propia instancia de Axe DevTools para Web, por lo que lo inicializará mientras escribe pruebas.

En JavaScript:

const driver = new webdriver.Builder().forBrowser('chrome').build();

En TypeScript, usando los tipos Builder y WebDriver importados arriba:

const driver: WebDriver = new Builder().forBrowser('chrome').build();

Obteniendo el contexto del escaneo

Antes de que puedas escanear una página por accesibilidad, debe ser accedida por el webdriver.

await driver.get('<URL>');

Una vez que el webdriver 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 registrando el objeto de resultados en la consola.

const results = await new AxeDevToolsBuilder(driver).analyze();
console.log(results);

Archivo de muestra 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 sintaxis import y anota el controlador y los resultados del escaneo.

JavaScript

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');

var driver = new WebDriver.Builder().forBrowser('chrome').build();

driver.get('https://google.com').then(function() {
  new AxeDevToolsBuilder(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    console.log(results);
  });
});

TypeScript

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

(async () => {
  const driver: WebDriver = new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://google.com');
    const results: AxeResults = await new AxeDevToolsBuilder(driver).analyze();
    console.log(results);
  } finally {
    await driver.quit();
  }
})();

Próximos pasos

Ahora que has completado con éxito 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 resultados de escaneo, contacta directamente a tu representante de Deque, comunícate con nosotros a través de nuestra mesa de soporte, o envíanos un correo electrónico. Estaremos encantados de ayudarte.