Referência da API Playwright para o Axe DevTools para Web

Construtor

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

Construtor do Axe DevTools Playwright:

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

Você deve passar uma instância de PlaywrightPage como o primeiro argumento. O segundo argumento pode ser um ID de conjunto de regras ou um objeto axe. Se você não fornecer um segundo argumento, deverá configurar o arquivo de configuração de regras personalizadas @axe-devtools/script-builder, caso contrário, o construtor lançará uma exceção. Deve ser chamado com a palavra-chave 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 });

Regras Personalizadas

Para informações sobre como usar regras personalizadas com o Axe DevTools, leia o guia sobre a geração e integração de conjunto de regras personalizadas no guia do CLI

analyze

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

Realiza uma análise e passa o objeto de resultado e quaisquer erros.

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

analyzeUniversal

AxeDevToolsBuilder.analyzeUniversal(): Promise<UniversalExport>

Realiza uma análise e retorna resultados no formato Universal do Axe. O método existente analyze() permanece inalterado.

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

Opções de Sequência

Existem duas opções para delimitar suas varreduras do Axe DevTools. Você pode optar por incluir ou excluir escopos CSS específicos. Os métodos de sequência abaixo tornam isso possível. Esses métodos podem ser encadeados para criar varreduras complexas e focadas.

incluir

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

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 escaneados.

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

excluir

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

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

Esses métodos podem ser encadeados para refinar ainda mais o escopo da análise.

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

Neste exemplo, todos os elementos dentro de <CSS-Selector> seriam escaneados, exceto os elementos dentro de <Inner-CSS-Selector>:

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

Configuração de Regras

Essas opções modificam a configuração de regras para o conjunto de regras escolhido. Essas opções substituem a configuração padrão de regras e modificarão seus resultados. Chamadas adicionais com esses métodos substituirão chamadas anteriores.

withRules

AxeDevToolsBuilder.withRules(rules: String|Array)

Limita a análise apenas aos que possuem os IDs de regras especificados. Aceita uma string de um único ID de regra ou um array de múltiplos IDs de regras.

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

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

withTags

AxeDevToolsBuilder.withTags(tags: String|Array)

Limita a análise apenas às regras marcadas com a tag fornecida. Aceita uma única tag ou um array de tags.

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

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

disableRules

AxeDevToolsBuilder.disableRules(rules: String|Array)

Ignora a verificação das regras fornecidas. Aceita uma string representando um único ID de regra ou um array de múltiplos IDs de regras. Chamadas subsequentes para AxeDevToolsBuilder.options(), AxeDevToolsBuilder.disableRules() substituirão as opções especificadas.

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

Opções do axe-core

Essas opções acessam a configuração subjacente do axe-core. Para mais informações sobre essas opções, consulte a documentação do axe-core.

configuração

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

Define a configuração para o axe-core. Esse valor é passado diretamente para axe.configure().

opções

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

Opções para passar diretamente para axe.run(). Veja a documentação do axe-core para uso. Irá substituir quaisquer outras opções configuradas, incluindo chamadas para AxeDevToolsBuilder.withRules() e AxeDevToolsBuilder.withTags().

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 configurar o serviço de uso e alterar as propriedades dos eventos reportados.

ativarRastreamento

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

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

definirUrlDeRastreamento

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

.setTrackingUrl(url: string)

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

definirIdDistinto

Este método permite que os usuários alterem qual ID distinto é armazenado ou utilizado.

.setDistinctId(distinctId: string)

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