Référence de l'API Playwright pour Axe DevTools pour le Web

Constructeur

Dans la configuration standard, le seul argument requis à passer au constructeur est l'instance Playwright. Si vous souhaitez utiliser une version différente de axe-core que celle incluse par défaut ou un ensemble de règles personnalisé, vous pouvez également passer ces options au constructeur.

Constructeur Axe DevTools Playwright :

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

Vous devez passer une instance de PlaywrightPage comme premier argument. Le second argument peut être soit un identifiant d'ensemble de règles, soit un objet axe. Si vous ne fournissez pas de second argument, vous devez configurer le fichier de configuration de règles personnalisées @axe-devtools/script-builder, sinon le constructeur générera une exception. Doit être appelé avec le mot-clé 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 });

Règles Personnalisées

Pour plus d'informations sur l'utilisation des règles personnalisées avec Axe DevTools, lisez le guide sur la génération et l'intégration des ensembles de règles personnalisées dans le guide CLI

analyze

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

Réalise une analyse et transmet l'objet résultant ainsi que toutes les erreurs.

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

analyzeUniversal

AxeDevToolsBuilder.analyzeUniversal(): Promise<UniversalExport>

Réalise une analyse et renvoie les résultats au format Axe Universal Format. La méthode existante analyze() est inchangée.

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

Options de Chaînage

Deux options existent pour déterminer la portée de vos analyses Axe DevTools. Vous pouvez choisir d'inclure ou d'exclure des portées CSS spécifiques. Les méthodes de chaîne ci-dessous rendent cela possible. Ces méthodes peuvent être enchaînées pour créer des analyses complexes et ciblées.

inclure

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

Ajoute un sélecteur CSS à la liste des éléments à inclure dans l'analyse. Les éléments en dehors de la portée passée à .include() ne seront pas analysés.

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

exclure

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

Ajoute un sélecteur CSS à la liste des éléments à exclure de l'analyse. Seuls les éléments en dehors de la portée passée à .exclude() seront analysés.

Ces méthodes peuvent être enchaînées pour affiner davantage la portée de l'analyse.

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

Dans cet exemple, tous les éléments à l'intérieur de <CSS-Selector> seraient analysés, sauf pour les éléments à l'intérieur de <Inner-CSS-Selector>:

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

Configuration des Règles

Ces options modifient la configuration des règles pour l'ensemble de règles choisi. Ces options remplacent la configuration standard des règles et modifieront vos résultats. Des appels supplémentaires avec ces méthodes écraseront les appels précédents.

withRules

AxeDevToolsBuilder.withRules(rules: String|Array)

Limite l'analyse uniquement à ceux ayant les identifiants de règle spécifiés. Accepte une chaîne contenant un seul identifiant de règle ou un tableau de plusieurs identifiants de règle.

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

Limite l'analyse uniquement aux règles étiquetées avec l'étiquette fournie. Accepte une étiquette unique ou un tableau d'étiquettes.

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

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

disableRules

AxeDevToolsBuilder.disableRules(rules: String|Array)

Ignore la vérification des règles fournies. Accepte une chaîne représentant un seul identifiant de règle ou un tableau de plusieurs identifiants de règle. Les appels suivants à AxeDevToolsBuilder.options(), AxeDevToolsBuilder.disableRules() remplaceront les options spécifiées.

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

Options axe-core

Ces options accèdent à la configuration sous-jacente de axe-core. Pour plus d'informations sur ces options, consultez la documentation de axe-core.

configuration

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

Définit la configuration pour axe-core. Cette valeur est transmise directement à axe.configure().

options

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

Options à transmettre directement à axe.run(). Voir la documentation axe-core pour l'utilisation. Cela remplacera toute autre option configurée, y compris les appels à AxeDevToolsBuilder.withRules() et AxeDevToolsBuilder.withTags().

Service d'utilisation

Par défaut, le service d'utilisation est désactivé, et l'URL par défaut est https://usage.deque.com.

Variables d'environnement

Ces variables d'environnement vous permettent de configurer le service d'utilisation et de modifier les propriétés des événements rapportés.

activerSuivi

Cette méthode permet aux utilisateurs de choisir d'envoyer des données au service d'utilisation.

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

définirUrlSuivi

Cette méthode permet aux utilisateurs de changer l'endroit où les données de mesures d'utilisation sont envoyées.

.setTrackingUrl(url: string)

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

définirIdDistinct

Cette méthode permet aux utilisateurs de changer quel ID distinct est stocké ou utilisé.

.setDistinctId(distinctId: string)

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