Referencia de la API de Playwright para Axe DevTools para Web

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

Debe pasar una instancia de PlaywrightPage como el primer argumento. El segundo argumento puede ser un id de conjunto de reglas o un objeto axe. Si no proporciona un segundo argumento, debe configurar el archivo de configuración personalizado de reglas @axe-devtools/script-builder, o el constructor lanzará una excepción. Debe ser llamado 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 cómo usar reglas personalizadas con Axe DevTools, lea la guía sobre generación e integración de conjuntos de reglas personalizadas en la 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 ha cambiado.

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[])

Añade un selector CSS a la lista de elementos a incluir en el análisis. Los elementos fuera del alcance 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 alcance 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 por 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 arreglo de múltiples IDs de regla. Las llamadas subsecuentes a AxeDevToolsBuilder.options(), AxeDevToolsBuilder.disableRules() sobrescribirá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 más información sobre estas opciones, vea la documentación de axe-core.

configuración

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

Establecer 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(). Consulte la documentación de axe-core para su uso. Sobrescribirá cualquier otra opción configurada, incluidas las llamadas a AxeDevToolsBuilder.withRules() y AxeDevToolsBuilder.withTags().

Servicio de Uso

Por defecto, el servicio de uso está deshabilitado y la URL predeterminada es https://usage.deque.com.

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 datos al servicio de uso.

.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')