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 en tant que premier argument. Le deuxième argument peut être soit un identifiant de jeu de règles soit un objet axe. Si vous ne fournissez pas de deuxième argument, vous devez configurer le fichier de configuration des règles personnalisées de @axe-devtools/script-builder, sinon le constructeur lèvera 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 des informations sur l'utilisation des règles personnalisées avec Axe DevTools, lisez le guide sur la génération et l'intégration de jeux de règles personnalisés 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>

Effectue une analyse et renvoie les résultats dans le Axe Universal Format. La méthode existante analyze() reste 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 du périmètre passé à .include() ne seront pas analysés.

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

exclure

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

Ajoutez un sélecteur CSS à la liste des éléments à exclure de l'analyse. Seuls les éléments en dehors du périmètre passé à .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 ID de règle ou un tableau de plusieurs IDs de règles. 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 d'axe-core. Pour plus d'informations sur ces options, voir le documentation 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 à passer directement à axe.run(). Consultez le documentation axe-core pour l'utilisation. 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 activé, et l'URL par défaut est https://usage.deque.com. Définissez la variable d'environnement AXE_TRACK_USAGE sur false pour le désactiver.

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 ou non des données au service d'utilisation. L'envoi est activé par défaut.

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