Riferimento API di Playwright per Axe DevTools per il Web

Le firme dei metodi in questa pagina sono scritte in notazione TypeScript, corrispondente alle dichiarazioni di tipo incluse nel pacchetto. Gli esempi di utilizzo sono in JavaScript, e si compilano invariati in TypeScript. Per vedere le versioni complete dei test sia in JavaScript che in TypeScript, vedere Scrivere test.

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