Riferimento API Playwright per axe DevTools per Web

Costruttore

Nella configurazione standard, l'unico argomento richiesto da passare al costruttore è l'istanza di Playwright. Se desideri utilizzare una versione di axe-core diversa da quella originariamente inclusa o un set di regole personalizzato, puoi anche passare queste opzioni al costruttore.

Costruttore di Axe DevTools Playwright:

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

È necessario passare un'istanza di PlaywrightPage come primo argomento. Il secondo argomento può essere un ID del set di regole o un oggetto axe. Se non si specifica un secondo argomento, è necessario configurare il file di configurazione della regola personalizzata @axe-devtools/script-builder, altrimenti il costruttore genererà un'eccezione. Deve essere chiamato con la parola chiave 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 });

Regole personalizzate

Per informazioni sull'utilizzo di regole personalizzate con axe DevTools, leggere la guida sulla generazione e l'integrazione di set di regole personalizzati nella guida CLI

analizzare

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

Esegue un'analisi e passa l'oggetto risultato e gli eventuali errori.

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

Opzioni di concatenazione

Esistono due opzioni per definire l'ambito delle scansioni di axe DevTools. Puoi scegliere di includere o escludere ambiti CSS specifici. I metodi concatenati indicati di seguito rendono possibile tutto ciò. Questi metodi possono essere concatenati per creare scansioni complesse e mirate.

include

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

Aggiunge un selettore CSS all'elenco degli elementi da includere nell'analisi. Gli elementi al di fuori dell'ambito passato a .include() non verranno scansionati.

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

escludi

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

Aggiungere un selettore CSS all'elenco degli elementi da escludere dall'analisi. Verranno analizzati solo gli elementi al di fuori dell'ambito passato a .exclude() .

Questi metodi possono essere concatenati per perfezionare ulteriormente l'ambito della scansione.

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

In questo esempio, tutti gli elementi all'interno di <CSS-Selector> verrebbero scansionati, ad eccezione degli elementi all'interno di <Inner-CSS-Selector>:

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

Configurazione delle regole

Queste opzioni modificano la configurazione delle regole per il ruleset scelto. Queste opzioni sovrascrivono la configurazione standard delle regole e modificheranno i risultati. Ulteriori chiamate con questi metodi sovrascriveranno le chiamate precedenti.

conRegole

AxeDevToolsBuilder.withRules(rules: String|Array)

Limita l'analisi solo alle regole con gli ID regola specificati. Accetta una stringa di un singolo ID regola o un array di più ID regola.

//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 l'analisi solo alle regole contrassegnate con il tag fornito. Accetta un singolo tag o un array di tag.

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

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

disabilitaRegole

AxeDevToolsBuilder.disableRules(rules: String|Array)

Salta la verifica delle regole fornite. Accetta una stringa che rappresenta un singolo ID regola o un array di più ID regola. Le chiamate successive a AxeDevToolsBuilder.options(), AxeDevToolsBuilder.disableRules() sostituiranno le opzioni specificate.

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

Opzioni axe-core

Queste opzioni accedono alla configurazione axe-core sottostante. Per maggiori informazioni su queste opzioni, consultare la documentazione di axe-core.

configurazione

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

Imposta la configurazione per axe-core. Questo valore viene passato direttamente a axe.configure() axe-core.

opzioni

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

Opzioni da passare direttamente a axe.run(). Consultare la documentazione di axe-core per l'uso. Sovrascriverà tutte le altre opzioni configurate, incluse le chiamate a AxeDevToolsBuilder.withRules() e AxeDevToolsBuilder.withTags().

Servizio di utilizzo

Per impostazione predefinita, il servizio di utilizzo è disabilitato e l'URL predefinito è https://usage.deque.com.

Variabili d'ambiente

Questo metodo consente agli utenti di modificare valori specifici del servizio di utilizzo tramite variabili di ambiente.

enableTracking

Questo metodo consente agli utenti di scegliere di inviare dati al servizio di utilizzo.

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

setTrackingUrl

Questo metodo consente agli utenti di modificare la destinazione dei dati relativi alle metriche di utilizzo.

.setTrackingUrl(url: string)

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

impostaDistinctId

Questo metodo consente agli utenti di modificare quale ID specifico viene memorizzato o utilizzato.

.setDistinctId(distinctId: string)

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