Riferimento API di Playwright per Axe DevTools per il Web

Costruttore

Nella configurazione standard, l'unico argomento richiesto da passare al costruttore è l'istanza di Playwright. Se si desidera utilizzare una versione di axe-core diversa da quella originariamente inclusa o un set di regole personalizzato, è possibile passare anche queste opzioni nel 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 fornisci un secondo argomento, devi configurare il file di configurazione delle regole personalizzate di @axe-devtools/script-builder, altrimenti il costruttore genererà un'eccezione. Deve essere chiamato con la keyword 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'uso delle regole personalizzate con Axe DevTools, leggi la guida sulla generazione e integrazione del set di regole personalizzate nel guida CLI

analizza

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

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

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

analizzaUniversale

AxeDevToolsBuilder.analyzeUniversal(): Promise<UniversalExport>

Esegue un'analisi e restituisce i risultati nel Formato Universale Axe. Il metodo analyze() esistente non viene modificato.

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

Opzioni di Catena

Esistono due opzioni per delimitare le scansioni Axe DevTools. Puoi scegliere di includere o escludere scopi CSS specifici. I metodi di catena seguenti lo rendono possibile. 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>');

esclude

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

Aggiunge un selettore CSS all'elenco degli elementi da escludere dall'analisi. Solo gli elementi al di fuori dell'ambito passato a .exclude() verranno scansionati.

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

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

In questo esempio, tutti gli elementi all'interno di <CSS-Selector> verrebbero scansionati, tranne gli 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 set di regole scelto. Queste opzioni sovrascrivono la configurazione standard delle regole e modificheranno i tuoi risultati. Chiamate aggiuntive con questi metodi sovrascriveranno le chiamate precedenti.

conRegole

AxeDevToolsBuilder.withRules(rules: String|Array)

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

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

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

conTag

AxeDevToolsBuilder.withTags(tags: String|Array)

Limita l'analisi solo a quelle 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 rappresentante un singolo ID di regola o un array di più ID di regola. Le chiamate successive a AxeDevToolsBuilder.options(), AxeDevToolsBuilder.disableRules() sovrascriveranno le opzioni specificate.

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

Opzioni di axe-core

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

configurazione

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

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

opzioni

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

Opzioni da passare direttamente a axe.run(). Vedi il documentazione axe-core per l'uso. Sovrascriveranno qualsiasi altra opzione configurata, comprese le chiamate a AxeDevToolsBuilder.withRules() e AxeDevToolsBuilder.withTags().

Servizio di utilizzo

Per impostazione predefinita, il servizio di utilizzo è abilitato e l'URL predefinito è https://usage.deque.com. Imposta la variabile d'ambiente AXE_TRACK_USAGE su false per disabilitarlo.

Variabili di ambiente

Queste variabili di ambiente ti permettono di configurare il servizio di utilizzo e modificare le proprietà degli eventi segnalati.

abilitaMonitoraggio

Questo metodo consente agli utenti di scegliere se inviare o meno dati al servizio di utilizzo. L'invio è abilitato per impostazione predefinita.

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

impostaTrackingUrl

Questo metodo consente agli utenti di cambiare dove vengono inviati i dati delle metriche di utilizzo.

.setTrackingUrl(url: string)

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

impostaIdDistinto

Questo metodo consente agli utenti di cambiare quale ID distinto è memorizzato o utilizzato.

.setDistinctId(distinctId: string)

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