Escribiendo Pruebas para Axe DevTools para Web para WebdriverIO

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 Agora de Deque. También necesitas tener WebdriverIO descargado y configurado.

Importación e Inicialización

Importa tanto Axe DevTools para Web como WebdriverIO. La sintaxis depende del lenguaje y del sistema de módulos que use tu proyecto. Elige la 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 { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const webdriverio = require('webdriverio');

JavaScript con módulos ES

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

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

TypeScript

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

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

Inicialización del Cliente

En este punto, podrás inicializar tu webdriver dentro de tu función de pruebas. En JavaScript:

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

En TypeScript, el cliente es un WebdriverIO.Browser, que es el tipo que AxeDevToolsWebdriverIO espera:

const client: WebdriverIO.Browser = await remote({
  capabilities: {
    browserName: 'chrome'
  }
});

Luego, puedes inicializar Axe DevTools para Web con el cliente webdriver. Esta declaración es la misma en ambos lenguajes:

const axeDevTools = new AxeDevToolsWebdriverIO({ client });

Obteniendo el contexto de 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 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 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.