Referência da API WebDriverJS para Axe DevTools para Web

Construtor

Na configuração padrão, o único argumento necessário a ser passado para o construtor do Axe DevTools é a instância do WebDriverJS. Se você deseja usar uma versão diferente do axe-core que não a incluída originalmente ou um conjunto de regras personalizado, você pode passar essas opções para o construtor.

Construtor de Axe DevTools WebDriverJS:

AxeDevToolsBuilder(driver:WebDriver, String:ruleset|Object:axe (optional))

Você deve passar uma instância de um Selenium WebDriver como primeiro argumento. O segundo argumento opcional pode ser um ID de conjunto de regras ou um axe objeto. Se você não fornecer um segundo argumento, deve configurar o arquivo de configuração de regras personalizadas @axe-devtools/script-builder, ou o construtor lançará uma exceção.

Estes exemplos mostram como usar o construtor:

// instantiate with the Section 508 rule set
const builder = new AxeDevToolsBuilder(driver, '508');

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

Regras Personalizadas

Para informações sobre como usar regras personalizadas com o Axe DevTools para Web, leia o guia sobre geração e integração de conjuntos de regras personalizadas no guia CLI.

analyze

O método analyze() realiza a análise e retorna os resultados da varredura de acessibilidade.

analyze(): Promise<axe.AxeResults>

Execute uma análise usando a configuração padrão no cliente fornecido. Um Promise é retornado, que é resolvido com o conjunto de resultados de acessibilidade retornados pelo axe-core.

analyzeUniversal

O método analyzeUniversal() realiza a análise e retorna os resultados no Formato Universal do Axe. O método existente analyze() permanece inalterado.

analyzeUniversal(): Promise<UniversalExport>

Opções de Cadeamento

Existem duas opções para delimitar suas varreduras do Axe DevTools. Você pode optar por incluir ou excluir escopos de CSS específicos. Os métodos de cadeia (abaixo) no construtor tornam isso possível.

include

new AxeDevToolsBuilder(driver).include('<CSS-Selector>');

Adiciona um seletor CSS à lista de elementos a serem incluídos na análise. Elementos fora do escopo passado para include() não serão examinados.

exclude

new AxeDevToolsBuilder(driver).exclude('<CSS-Selector>');

Adicione um seletor CSS à lista de elementos a serem excluídos da análise. Somente elementos fora do escopo passado para exclude() serão examinados.

Esses métodos podem ser encadeados para refinar ainda mais o escopo da varredura, como mostrado abaixo:

new AxeDevToolsBuilder(driver).include('<CSS-Selector>').exclude('<Inner-CSS-Selector>');

Neste exemplo, todos os elementos dentro de <CSS-Selector> seriam examinados, exceto pelos elementos dentro de <Inner-CSS-Selector>.

Configuração de Regras

Os métodos de configuração de regras substituem a configuração padrão de regras. Chamadas adicionais com esses métodos substituirão chamadas anteriores.

withRules

O método withRules() limita a análise apenas às regras com os IDs de regras especificados. Aceita uma string para um único ID de regra ou um array de múltiplos IDs de regras.

Estes exemplos mostram o uso de withRules com um único ID de regra e um array de IDs de regras:

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

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

withTags

O método withTags() limita a análise apenas às regras associadas à etiqueta fornecida. Aceita uma única etiqueta ou um array de etiquetas, como mostrado abaixo:

//with a single tag
AxeDevToolsBuilder(driver).withTags('wcag2a');

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

disableRules

AxeDevToolsBuilder.disableRules(rules: RuleID[]): AxeDevToolsBuilder

O método disableRules() método faz com que o array de regras fornecido seja ignorado ao executar uma análise.

opções do axe-core

opções

.options(options: Axe.RunOptions)

O options método especifica opções a serem usadas pelo axe.run. Ele substituirá quaisquer outras opções configuradas, incluindo chamadas para withRules e withTags. Veja a documentação da API do axe-core para obter informações.

new AxeDevToolsBuilder(page).options({
  checks: { 'valid-lang': ['orcish'] }
});

configurar

.configure(config: Axe.Spec)

O configure método injeta um objeto de configuração do axe para modificar o conjunto de regras antes de uma análise. Chamadas subsequentes a este método invalidarão as anteriores ao chamar axe.configure() e substituir o objeto de configuração. Veja a documentação da API do axe-core para a estrutura do objeto.

O exemplo a seguir cria uma nova configuração do axe-core e a passa para o Axe DevTools para ser usada na varredura:

const config = {
  checks: [Object],
  rules: [Object]
};
const results = await new AxeDevToolsBuilder(page).configure(config).analyze();

Serviço de Uso

Por padrão, o serviço de uso está desativado, e a URL padrão é https://usage.deque.com.

Variáveis de Ambiente

Essas variáveis de ambiente permitem que você configure o serviço de uso e altere as propriedades dos eventos relatados.

habilitarRastreamento

Este método permite que os usuários optem por enviar dados para o serviço de uso.

.enableTracking(state: boolean)

AxeDevToolsBuilder(driver).enableTracking(true)

definirUrlRastreamento

Este método permite que os usuários alterem para onde os dados das métricas de uso são enviados.

.setTrackingUrl(url: string)

AxeDevToolsBuilder(driver).setTrackingUrl('https://foobar.biz')

definirIdDistinto

Este método permite que os usuários alterem o ID distinto que está sendo armazenado ou usado.

.setDistinctId(distinctId: string)

AxeDevToolsBuilder(driver).setDistinctId('foobar')