Escribiendo Pruebas para Axe DevTools para Web para WebdriverIO

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 ejemplo completo proporciona la prueba completa en ambos lenguajes.

Requisitos previos

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

Obteniendo el Contexto del Escaneo

Antes de poder escanear una página por accesibilidad, esta debe ser accedida por WebdriverIO.

await client.url('<URL>');

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

const results = await axeDevTools.analyze();
console.log(results);

Archivo Completo de Ejemplo

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 import y anota el cliente y los resultados del análisis.

JavaScript

const webdriverio = require('webdriverio');
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');

const simpleExample = async () => {
  const client = await webdriverio.remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

TypeScript

import { remote } from 'webdriverio';
import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import type { AxeResults } from 'axe-core';

const simpleExample = async (): Promise<AxeResults> => {
  const client: WebdriverIO.Browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results: AxeResults = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

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