Playwright API-referentie voor Axe DevTools voor Web

Constructor

In de standaardconfiguratie is het enige argument dat aan de constructor moet worden doorgegeven de Playwright-instantie. Als je een andere axe-core-versie dan die oorspronkelijk is opgenomen wilt gebruiken, of een aangepaste regels, kun je deze opties ook aan de constructor doorgeven.

Axe DevTools Playwright constructor:

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

Je moet een instantie van PlaywrightPage als het eerste argument doorgeven. Het tweede argument kan ofwel een regels-set ID of een axe-object zijn. Als je geen tweede argument geeft, moet je het @axe-devtools/script-builder configuratiebestand voor aangepaste regels configureren, anders zal de constructor een uitzondering veroorzaken. Moet aangeroepen worden met het nieuwe sleutelwoord.

// 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 });

Aangepaste Regels

Voor informatie over het gebruik van aangepaste regels met Axe DevTools, lees de gids over het genereren en integreren van aangepaste regels sets in de CLI-gids

analyze

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

Voert een analyse uit en geeft het resultaatobject en eventuele fouten door.

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

analyzeUniversal

AxeDevToolsBuilder.analyzeUniversal(): Promise<UniversalExport>

Voert een analyse uit en geeft resultaten terug in de Axe Universal Format. De bestaande analyze() methode is ongewijzigd.

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

Ketenopties

Er zijn twee opties voor het bepalen van het bereik van je Axe DevTools-scans. Je kunt ervoor kiezen om specifieke CSS-ranges in of uit te sluiten. De onderstaande ketenmethoden maken dit mogelijk. Deze methoden kunnen gecombineerd worden om complexe, gerichte scans te creëren.

include

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

Voegt een CSS-selector toe aan de lijst van elementen die in de analyse moeten worden opgenomen. Elementen buiten het bereik dat aan .include() is doorgegeven, zullen niet worden gescand.

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

exclude

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

Voeg een CSS-selector toe aan de lijst van elementen die van de analyse moeten worden uitgesloten. Alleen elementen buiten het bereik dat aan .exclude() is doorgegeven, zullen worden gescand.

Deze methoden kunnen gecombineerd worden om de scope van de scan verder te verfijnen.

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

In dit voorbeeld zouden alle elementen binnen <CSS-Selector> worden gescand, behalve de elementen binnenin <Inner-CSS-Selector>:

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

Regelconfiguratie

Deze opties wijzigen de regelconfiguratie voor de gekozen regels. Deze opties overschrijven de standaardregelconfiguratie en zullen je resultaten wijzigen. Extra oproepen met deze methoden zullen eerdere oproepen overschrijven.

withRules

AxeDevToolsBuilder.withRules(rules: String|Array)

Beperkt de analyse tot alleen die met de opgegeven regel-ID's. Accepteert een string van één regel-ID of een reeks van meerdere regel-ID's.

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

Beperkt de analyse tot alleen die regels die zijn getagd met de opgegeven tag. Accepteert een enkele tag of een reeks 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)

Slaat verificatie van de opgegeven regels over. Accepteert een string die een enkele regel-ID vertegenwoordigt of een array van meerdere regel-ID's. Latere aanroepen van AxeDevToolsBuilder.options(), AxeDevToolsBuilder.disableRules() zullen de gespecificeerde opties overschrijven.

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

axe-core Opties

Deze opties geven toegang tot de onderliggende axe-core configuratie. Voor meer informatie over deze opties, zie de axe-core documentatie.

configuratie

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

Stel de configuratie voor axe-core in. Deze waarde wordt direct doorgegeven aan axe.configure().

opties

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

Opties om direct door te geven aan axe.run(). Zie de axe-core documentatie voor gebruik. Zullen alle andere geconfigureerde opties overschrijven, inclusief aanroepen van AxeDevToolsBuilder.withRules() en AxeDevToolsBuilder.withTags().

Gebruik Service

Standaard is de gebruiksservice uitgeschakeld, en de standaard-URL is https://usage.deque.com.

Omgevingsvariabelen

Deze omgevingsvariabelen stellen u in staat om de gebruik service te configureren en de eigenschappen van gerapporteerde gebeurtenissen te wijzigen.

enableTracking

Met deze methode kunnen gebruikers ervoor kiezen om gegevens naar de gebruik service te sturen.

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

setTrackingUrl

Met deze methode kunnen gebruikers wijzigen waar de gegevens van gebruiksstatistieken naartoe worden gestuurd.

.setTrackingUrl(url: string)

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

setDistinctId

Met deze methode kunnen gebruikers wijzigen welke afzonderlijke ID wordt opgeslagen of gebruikt.

.setDistinctId(distinctId: string)

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