Referencia de API de Playwright para axe DevTools for Web

Constructor

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

Constructor de Playwright de Axe DevTools:

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

Debes pasar una instancia de PlaywrightPage como primer argumento. El segundo argumento puede ser un identificador 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 generará 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, lea la guía sobre generación e integración de conjuntos de reglas personalizados 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
  });

Opciones de encadenamiento

Existen dos opciones para delimitar el alcance de los escaneos de axe DevTools. Puede elegir incluir o excluir ámbitos CSS específicos. Los métodos encadenados que se indican a continuación lo hacen posible. Estos métodos se pueden encadenar para crear exploraciones complejas y enfocadas.

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 alcance pasado a .include() no serán escaneados.

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

excluir

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

Agregue un selector CSS a la lista de elementos a excluir del análisis. Sólo se escanearán los elementos fuera del alcance pasado a .exclude() .

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

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

En este ejemplo, se escanearían todos los elementos dentro de <CSS-Selector> , 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 ruleset elegido. Estas opciones sobrescriben la configuración de regla estándar y modificarán sus resultados. Las llamadas adicionales con estos métodos sobrescribirán las llamadas anteriores.

conRules

AxeDevToolsBuilder.withRules(rules: String|Array)

Limita el análisis únicamente a aquellos con los identificadores de reglas especificados. Acepta una cadena de un único ID de regla o un array de múltiples ID de reglas.

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

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

conTags

AxeDevToolsBuilder.withTags(tags: String|Array)

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

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

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

desactivarRules

AxeDevToolsBuilder.disableRules(rules: String|Array)

Omite la verificación de las reglas proporcionadas. Acepta una cadena que representa un único ID de regla o un array de múltiples ID de reglas. Las llamadas posteriores 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, consulte 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 entregar directamente a axe.run(). Consulte la documentación de axe-core para su uso. Anulará cualquier otra opción configurada, incluyendo las invocaciones a AxeDevToolsBuilder.withRules() y AxeDevToolsBuilder.withTags().

Servicio de uso

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

Variables de entorno

Este método permite a los usuarios cambiar valores específicos del servicio de uso a través de variables de entorno.

Habilitar seguimiento

Este método permite a los usuarios aceptar participar en el envío de datos al servicio de uso.

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

setTrackingUrl

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