Referencia de la API de Playwright para Axe DevTools para Web

Las firmas de método en esta página están escritas en notación de TypeScript, coincidiendo con las declaraciones de tipo incluidas con el paquete. Los ejemplos de uso están en JavaScript y se compilan sin cambios en TypeScript. Para ver versiones completas de una prueba tanto en JavaScript como en TypeScript, consulte Escribiendo pruebas.

Constructor

En la configuración estándar, el único argumento que se debe pasar al constructor es la instancia de Playwright. Si desea usar una versión diferente de axe-core a la originalmente incluida o un conjunto de reglas personalizado, también puede pasar estas opciones al constructor.

Constructor de Axe DevTools Playwright:

AxeDevToolsBuilder({ page: PlaywrightPage, source: string, rulesetId: AxeDevtoolsRulesetID})

Debes pasar una instancia de PlaywrightPage como primer argumento. El segundo argumento puede ser un id de conjunto de reglas o un objeto axe. Si no proporcionas un segundo argumento, debes configurar el archivo de configuración de reglas personalizadas @axe-devtools/script-builder, o el constructor lanzará una excepción. Debe llamarse con la palabra clave new.

// instantiate with the Section 508 rule set
const builder = new AxeDevToolsBuilder({ page, rulesetId: '508' });

// or with a specific axe instance
const { source } = require('../axe-core-2.3.0');
const builder = new AxeDevToolsBuilder({ page, source });

Reglas Personalizadas

Para obtener información sobre el uso de reglas personalizadas con Axe DevTools, lee la guía sobre generación e integración de conjuntos de reglas personalizadas en el guía CLI

analizar

AxeDevToolsBuilder.analyze(): Promise<axe.Results | Error>

Realiza un análisis y pasa el objeto de resultado y cualquier error.

new AxeDevToolsBuilder({ page })
  .analyze()
  .then(results => {
    console.log(results);
  })
  .catch(e => {
    // Do something with error
  });

analizarUniversal

AxeDevToolsBuilder.analyzeUniversal(): Promise<UniversalExport>

Realiza un análisis y devuelve los resultados en el Formato Universal de Axe. El método existente analyze() no se modifica.

new AxeDevToolsBuilder({ page })
  .analyzeUniversal()
  .then(results => {
    console.log(results);
  })
  .catch(e => {
    // Do something with error
  });

Opciones de Encadenamiento

Existen dos opciones para definir el alcance de sus escaneos con Axe DevTools. Puede elegir incluir o excluir alcances CSS específicos. Los métodos de encadenamiento a continuación hacen esto posible. Estos métodos pueden ser encadenados para crear escaneos complejos y focalizados.

incluir

AxeDevToolsBuilder.include(selector: String | String[])

Agrega un selector CSS a la lista de elementos a incluir en el análisis. Los elementos fuera del ámbito pasado a .include() no serán escaneados.

new AxeDevToolsBuilder({ page }).include('<CSS-Selector>');

excluir

AxeDevToolsBuilder.exclude(selector: String | String[])

Añade un selector CSS a la lista de elementos a excluir del análisis. Solo se escanearán los elementos fuera del ámbito pasado a .exclude().

Estos métodos pueden ser encadenados para refinar aún más el alcance del escaneo.

new AxeDevToolsBuilder({ page }).exclude('<CSS-Selector>');

En este ejemplo, todos los elementos dentro de <CSS-Selector> serían escaneados, excepto los elementos dentro de <Inner-CSS-Selector>:

new AxeDevToolsBuilder({ page }).include('<CSS-Selector>').exclude('<Inner-CSS-Selector>');

Configuración de Reglas

Estas opciones modifican la configuración de reglas para el conjunto de reglas elegido. Estas opciones sobrescriben la configuración estándar de reglas y modificarán sus resultados. Llamadas adicionales con estos métodos sobrescribirán llamadas anteriores.

conReglas

AxeDevToolsBuilder.withRules(rules: String|Array)

Limita el análisis solo a aquellos con los IDs de regla especificados. Acepta una cadena de un solo ID de regla o un arreglo de múltiples IDs de regla.

//with a single rule ID
AxeDevToolsBuilder({ page }).withRules('html-lang');

//with an array of rule IDs
AxeDevToolsBuilder({ page }).withRules(['html-lang', 'image-alt']);

conEtiquetas

AxeDevToolsBuilder.withTags(tags: String|Array)

Limita el análisis solo a aquellas reglas etiquetadas con la etiqueta proporcionada. Acepta una sola etiqueta o un arreglo de etiquetas.

//with a single tag
AxeDevToolsBuilder({ page }).withTags('wcag2a');

//with an array of tags
AxeDevToolsBuilder({ page }).withTags(['wcag2a', 'wcag2aa']);

deshabilitarReglas

AxeDevToolsBuilder.disableRules(rules: String|Array)

Omite la verificación de las reglas proporcionadas. Acepta una cadena que representa un solo ID de regla o un array de múltiples IDs de regla. Las llamadas subsecuentes a AxeDevToolsBuilder.options(), AxeDevToolsBuilder.disableRules() anularán las opciones especificadas.

new AxeDevToolsBuilder({ page }).disableRules('color-contrast');

Opciones de axe-core

Estas opciones acceden a la configuración subyacente de axe-core. Para obtener más información sobre estas opciones, consulta el documentación de axe-core.

configuración

AxeDevToolsBuilder.configure(config: axe.Spec): AxeDevToolsBuilder

Configura la configuración para axe-core. Este valor se pasa directamente a axe.configure().

opciones

AxeDevToolsBuilder.options(runOptions: axe.RunOptions): AxeDevToolsBuilder

Opciones para pasar directamente a axe.run(). Consulta el documentación de axe-core para su uso. Anularán cualquier otra opción configurada, incluidas llamadas a AxeDevToolsBuilder.withRules() y AxeDevToolsBuilder.withTags().

Servicio de Uso

Por defecto, el servicio de uso está habilitado, y la URL predeterminada es https://usage.deque.com. Establece la variable de entorno AXE_TRACK_USAGE en false para desactivarlo.

Variables de entorno

Estas variables de entorno le permiten configurar el servicio de uso y cambiar las propiedades de los eventos informados.

habilitarSeguimiento

Este método permite a los usuarios optar por enviar o no datos al servicio de uso. El envío está habilitado por defecto.

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

establecerUrlDeSeguimiento

Este método permite a los usuarios cambiar dónde se envían los datos de las métricas de uso.

.setTrackingUrl(url: string)

AxeDevToolsBuilder({ page }).setTrackingUrl('https://foobar.biz')

establecerIdDistinto

Este método permite a los usuarios cambiar qué ID distinto se almacena o utiliza.

.setDistinctId(distinctId: string)

AxeDevToolsBuilder({ page }).setDistinctId('foobar')