Référence de l'API Playwright pour axe DevTools for Web

Constructeur

Dans la configuration standard, le seul argument devant être passé au constructeur est l'instance Playwright. Si vous souhaitez utiliser une version d'axe-core différente de celle incluse à l'origine ou un ensemble de règles personnalisé, vous pouvez également transmettre 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 deuxième argument peut être soit un identifiant d'ensemble de règles, soit un objet axe. Si vous ne fournissez pas de deuxième argument, vous devez configurer le fichier de configuration de règle personnalisée @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 plus d'informations sur l'utilisation de règles personnalisées avec axe DevTools, lisez le guide sur la génération et l'intégration de règles personnalisées dans le guide CLI

analyser

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

Effectue une analyse et transmet l'objet résultat et toutes les erreurs.

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

Options de séquence

Il existe deux options pour définir 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 enchaînées ci-dessous rendent cela possible. Ces méthodes peuvent être enchaînées pour créer des analyses complexes et ciblées.

comprend

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

Ajoute un sélecteur CSS à la liste des éléments à inclure dans l'analyse. Les éléments hors de la portée 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 hors de la portée 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, à l'exception des é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 de règle standard et modifieront vos résultats. Les appels supplémentaires avec ces méthodes écraseront les appels précédents.

avecRègles

AxeDevToolsBuilder.withRules(rules: String|Array)

Limite l'analyse uniquement aux règles avec les ID de règle spécifiés. Accepte une chaîne d'un seul ID de règle ou un tableau de plusieurs ID 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']);

avecTags

AxeDevToolsBuilder.withTags(tags: String|Array)

Limite l'analyse aux seules règles étiquetées avec la balise fournie. Accepte une seule balise ou un tableau de balises.

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

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

Désactiver les règles

AxeDevToolsBuilder.disableRules(rules: String|Array)

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

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

Options d'axe-core

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

configuration

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

Définir la configuration pour axe-core. Cette valeur est transmise directement à axe.configure() [objet manquant].

options

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

Options à passer directement à axe.run(). Consultez la documentation axe-core pour l'utilisation. Remplacera toutes les autres options configurées, 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

Cette méthode permet aux utilisateurs de modifier des valeurs spécifiques du service d'utilisation via des variables d'environnement.

Activer le suivi

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

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

setTrackingUrl

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

.setTrackingUrl(url: string)

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

setDistinctId

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

.setDistinctId(distinctId: string)

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