Référence API pour la version JavaScript et TypeScript de Watcher

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

La Référence API pour le package @axe-core/watcher

Not for use with personal data

Ce guide de référence décrit les API fournies par le package @axe-core/watcher (également appelé Axe Watcher ou simplement Watcher) pour JavaScript et TypeScript.

Interface AxeConfiguration

La propriété axe (un paramètre passé à fonctions de configuration) est le moyen habituel de changer votre AxeConfiguration pour qu'Axe Watcher configure le test d'accessibilité. Les propriétés suivantes sont contenues dans AxeConfiguration :

Nom Type Requis Description
apiKey string (contenant un UUID) oui Votre clé API secrète personnelle.
autoAnalyze boolean non Si Watcher va exécuter automatiquement une analyse d'accessibilité de votre page. La valeur par défaut est true.
buildID string non La valeur par défaut est null, ce qui est recommandé pour les exécutions de test à processus unique (non parallélisées). Pour les exécutions de test en parallèle, tous les travailleurs devraient avoir la même chaîne buildID non nulle.
configurationOverrides ConfigurationOverrides non Permet de remplacer surcharger les paramètres de configuration globaux.
elementInternals boolean non Active la prise en charge d'ElementInternals pour les éléments personnalisés. Lorsque true, Watcher recueille les rôles et propriétés ARIA définis via l'API ElementInternals, réduisant les faux positifs sur les pages utilisant des éléments personnalisés avec attachInternals(). Nécessite la version 4.12.0 ou ultérieure d'axe-core. La valeur par défaut est false.
excludeUrlPatterns string[] non Exclut les URL qui correspondent aux motifs minimatch spécifiés de l'analyse.
git `boolean GitConfig` non Contrôle la collecte de métadonnées Git. Par défaut à true (détection automatique). Réglez sur false pour désactiver, ou fournissez un objet GitConfig pour fournir des métadonnées explicites.
projectId string (contenant un UUID) oui L'ID du projet pour recevoir les résultats des exécutions de test de Watcher.
runContext axe.ElementContext non Transmis à axe-core.
runOptions RunOptions non Transmis à axe-core.
serverURL string non Le serveur Axe Developer Hub pour envoyer les résultats. Définissez ceci si votre organisation utilise une instance régionale, un cloud privé ou un déploiement local. La valeur par défaut est https://axe.deque.com.
sessionId string non Obsolète. L'ID de session de cette instance. Il est peu probable que vous ayez besoin de changer cette valeur. Consultez plutôt buildId.
testingTypes string[] non À utiliser avec Cypress pour spécifier des tests de composants ou des tests e2e (ou les deux)
timeout Timeouts non Un objet Timeouts qui représente les millisecondes jusqu'à ce que les méthodes spécifiées Contrôleur expirent et échouent.

apiKey

(Obligatoire) La valeur apiKey est l'une des deux propriétés (apiKey et projectId) qui doivent être définies dans votre AxeConfiguration. Vous pouvez obtenir sa valeur depuis la Page de gestion des clés API .

axe: {
  apiKey: process.env.AXE_DEVELOPER_HUB_API_KEY
}

autoAnalyze

(Optionnel) Réglez cette valeur sur false pour empêcher les pages d'être automatiquement analysées. Pour plus d'informations sur le mode manuel, voir Contrôlez vos analyses.

axe: {
  autoAnalyze: false
}

buildID

(Optionnel) La propriété buildID, lorsqu'elle n'est pas null, permet aux testeurs parallèles de générer des résultats qui apparaissent comme un seul test dans Axe Developer Hub. Dans le cas de tests parallèles, chaque testeur doit partager la même chaîne buildID non nulle, ce qui fait que chaque test concatène ses résultats avec les résultats existants pour la même buildID et commit SHA Git. Cependant, lorsque buildID est null, plusieurs tests écrasent des résultats existants qui ont le même commit SHA Git.

Voir Exécution des tests en parallèle pour plus d'informations sur l'utilisation de buildID avec divers fournisseurs d'intégration continue.

axe: {
  buildID: process.env.CI_BUILD_ID
}

configurationOverrides

(Optionnel) Remplace les valeurs définies dans le configuration globale. Voir la ConfigurationOverrides pour plus d'informations.

axe: {
  configurationOverrides: {
    accessibilityStandard: 'WCAG 2.2 AA',
    bestPractices: true
  }
}

elementInternals

important

Le support de ElementInternals est expérimental dans axe-core et sujet à modification. Consultez la documentation ElementInternals axe-core pour les limitations actuelles et l'état du développement.

(Optionnel) Lorsque true, Watcher recueille les rôles et propriétés ARIA définis via l'API ElementInternals à partir des éléments personnalisés qui utilisent attachInternals(). Cela réduit les faux positifs sur les pages utilisant des éléments personnalisés pour les composants interactifs. Nécessite la version 4.12.0 ou ultérieure d'axe-core.

axe: {
  elementInternals: true
}

excludeUrlPatterns

(Optionnel) Empêche toute URL qui correspond à l'un des motifs minimatch dans le tableau excludeUrlPatterns d'être analysée.

axe: {
  excludeUrlPatterns: [ 'https://*.example.com/**', 'https://example.org/**' ]
}

Dans Exclure les URL de l'analyse, vous pouvez trouver un tableau d'URL et de motifs d'exemple pour vérifier les correspondances.

git

(Optionnel) Contrôle la façon dont Watcher collecte les métadonnées Git pour l'exécution actuelle du test. Accepte l'une des trois valeurs :

  • true (par défaut) : Watcher collecte automatiquement les informations Git (branche, commit SHA, auteur et autres champs) en utilisant le binaire Git local.
  • false : Désactive toute collecte de métadonnées Git. Utilisez ceci lors de l'exécution dans des environnements sans Git ou lorsque la collecte des données Git n'est pas nécessaire.
  • Un objet GitConfig : Fournit des métadonnées Git explicites et évite complètement la détection automatique. Tous les champs que vous omettez reviennent par défaut à null. Utilisez ceci lorsque vos tests s'exécutent dans un dépôt séparé du dépôt testé, ou dans des environnements CI où la détection automatique Git est peu fiable.

Consultez Fournir des métadonnées Git pour plus d'informations.

L'objet GitConfig possède les champs suivants :

Champ Type Gitful Description
branch string oui Nom de la branche actuelle
commitAuthor string non Nom d'affichage de l'auteur. Si omis, l'auteur apparaît comme indisponible dans l'Axe Developer Hub.
commitEmail string non Adresse e-mail de l'auteur.
commitMessage string non Message complet du commit. Si omis, le message de commit apparaît comme indisponible dans l'Axe Developer Hub.
commitSha string oui Hash complet ou abrégé du commit
defaultBranch string non Nom de la branche par défaut (par exemple, main). Sans ce champ, Axe Developer Hub ne peut pas identifier quelle branche est la branche par défaut, donc les comparaisons de branche car novembre avec la branche par défaut ne seront pas disponibles.
isDirty boolean non true si des modifications non validées existent. Par défaut à false lorsque omis.
tag string non Étiquette actuelle (par exemple, v1.2.3)
url string oui URL distante du dépôt

branch, commitSha et url sont les champs gitful : une session soumise sans les trois est enregistrée comme gitless et sauvegardée, mais Axe Developer Hub passe à la vue de session gitless, où l'historique des branches et des commit des sessions précédentes ne sera pas visible. Soumettre une session ultérieure avec les trois champs restaure la vue gitful. Si seulement un ou deux des trois sont présents, Axe Watcher abandonne tous les champs gitful, enregistre la session comme gitless et inclut un avertissement dans la réponse.

Exemple d'utilisation des variables d'environnement CI pour fournir des métadonnées Git explicites :

axe: {
  apiKey: process.env.AXE_DEVELOPER_HUB_API_KEY,
  projectId: process.env.AXE_PROJECT_ID,
  git: {
    commitSha: process.env.GIT_COMMIT,
    branch: process.env.GIT_BRANCH,
    url: process.env.GIT_URL,
    commitAuthor: process.env.GIT_AUTHOR_NAME,
    commitEmail: process.env.GIT_AUTHOR_EMAIL,
    commitMessage: process.env.GIT_COMMIT_MESSAGE,
    defaultBranch: 'main'
  }
}

projectId

(Obligatoire) Spécifie l'ID du projet qui recevra les résultats de l'accessibilité de Watcher. Votre ID de projet est affiché avec les instructions lorsque vous créez un nouveau projet, et vous pouvez également l'obtenir à partir de la Page des projets Axe Developer Hub .

axe: {
  projectId: process.env.AXE_PROJECT_ID
}

runContext

(Optionnel) Vous permet de choisir quels éléments sont inclus et exclus de l'analyse d'accessibilité de votre page.

important

Lorsque vous utilisez runContext pour sélectionner des éléments à inclure dans votre analyse (via un sélecteur CSS unique, un tableau de sélecteurs CSS, ou en utilisant la propriété include), Axe Developer Hub analyse *seulement les éléments sélectionnés par les sélecteurs CSS*. Par conséquent, si aucun élément n'est sélectionné (en raison d'une faute de frappe dans un sélecteur de classe CSS, par exemple), rien ne sera analysé, et, plus important encore, *aucun état de page ne sera capturé*.

La valeur de runContext peut être :

  1. Un sélecteur CSS unique pour les éléments à inclure dans l'analyse :

    axe: {
      runContext: '.main'
    }
  2. Un tableau de sélecteurs CSS pour les éléments à inclure dans l'analyse :

    axe: {
      runContext: [ '.main', '.text-block' ]
    }
  3. Un objet de contexte contenant les propriétés include et exclude (comme montré dans l'exemple ci-dessus). Vous pouvez spécifier include ou exclude ou les deux. Chaque include ou exclude peut être un sélecteur CSS unique ou un tableau de sélecteurs CSS :

    axe: {
      runContext: {
        include: '.main',
        exclude: '.ad-section'
      }
    }

Plus de détails sont disponibles dans le Documentation du contexte axe-core.

runOptions

(Optionnel) L'objet runOptions permet le sous-ensemble de propriétés suivant du type Options axe-core :

  • ancestry : Par défaut, c'est false. Si true, les sélecteurs CSS retournés incluent les éléments ancêtres des éléments retournés.

    important

    Si votre page utilise des ID ou classes dynamiques (ID d'élément ou classes qui changent à chaque rechargement de la page), vous devez spécifier ancestry comme true afin qu'Axe Developer Hub puisse correctement détecter et suivre si des problèmes d'accessibilité sont des doublons car, par défaut, Axe Developer Hub s'attend à ce que les ID et classes des éléments restent les mêmes entre les exécutions de test.

    Lorsque ancestry est true, Axe Developer Hub utilise alors la position de l'élément dans l'arbre DOM pour localiser le même élément entre les exécutions de test.

    Ce qui suit montre un exemple de sélecteur lorsque ancestry est false pour un élément iframe avec un ID de *main-iframe* (<iframe id="main-iframe" ...>) :

    iframe#main-iframe

    Si ancestry est true, le sélecteur inclurait l'ensemble du chemin depuis l'élément racine, et il n'y a pas d'ID ou de classes spécifiées :

    html > body > div:nth-child(20) > div:nth-child(1) > div > div > ul > li:nth-child(1) > div > span > iframe
  • runOnly : Cela vous permet de limiter les règles exécutées en spécifiant des noms ou des balises. Voir runOnly ci-dessous pour plus d'informations.

  • rules : Activer ou désactiver des règles en utilisant la propriété enabled. Voir rules ci-dessous pour plus d'informations.

Ce qui suit montre un exemple de runOptions :

axe: {
  runOptions: {
    ancestry: true,
    runOnly: {
      type: 'tag',
      values: [ 'wcag2a' ]
    },
    rules: {
      'ruleId1': { enabled: false },
      'ruleId2': { enabled: false }
    }
  }
}

runOnly

important

L'utilisation de runOnly est considérée comme une utilisation avancée, et si vous utilisez runOnly (ou rules), vous allez recevoir un avertissement.

Vous ne pouvez pas utiliser à la fois runOptions.runOnly et configurationOverrides. Sinon, vous recevrez une erreur.

La valeur runOnly (partie de l'objet runOptions) peut être l'une des suivantes :

  1. Une chaîne représentant l'ID de la règle que vous souhaitez utiliser pour l'analyse d'accessibilité :

    axe: {
      runOptions: {
        runOnly: 'ruleId'
      }
    }
  2. Un tableau de chaînes représentant les IDs des règles que vous souhaitez utiliser :

    axe: {
      runOptions: {
        runOnly: [ 'ruleId1', 'ruleId2' ]
      }
    }
  3. Un objet avec les propriétés type et values. La valeur type est une chaîne qui peut être rule, rules, tag ou tags. La propriété values doit être un tableau de chaînes représentant les règles ou balises que vous souhaitez utiliser pour l'analyse d'accessibilité. L'exemple suivant montre l'utilisation de l'objet runOnly pour limiter les tests d'accessibilité aux règles marquées comme wcag2a :

    axe: {
      runOptions: {
        runOnly: {
          type: 'tag',
          values: [ 'wcag2a' ]
        }
      }  
    }

rules

La valeur rules (sur l'objet runOptions) vous permet d'activer (enabled: true) ou de désactiver (enabled: false) des règles spécifiques pendant l'analyse, comme indiqué ci-dessous :

axe: {
  runOptions: {
    rules: {
      'ruleId1': { enabled: false },
      'ruleId2': { enabled: false }
    }
  }
}

serverURL

(Optionnel) L'URL du serveur Axe Developer Hub auquel Watcher envoie les résultats d'accessibilité. Par défaut, https://axe.deque.com.

Vous n'avez pas besoin de définir cette valeur si votre projet a été créé sur axe.deque.com. Cependant, si votre organisation utilise une instance régionale, un cloud privé ou un déploiement sur site de Axe Developer Hub, définissez serverURL à l'URL de base de cette instance :

axe: {
  apiKey: process.env.ACCESSIBILITY_API_KEY,
  projectId: process.env.PROJECT_ID,
  serverURL: process.env.SERVER_URL // e.g., 'https://axe-eu.deque.com'
}

sessionId

(Optionnel) La propriété sessionId a été dépréciée et ne devrait pas être utilisée. Voir buildID ci-dessus.

testingTypes

(Optionnel) La propriété testingTypes est un tableau de chaînes à utiliser avec Cypress pour spécifier le test de composants ou e2e (end-to-end) (ou les deux).

axe: {
  testingTypes: ['e2e', 'component']
}

timeout

(Optionnel) L'objet timeout (de type Timeouts) dans AxeConfiguration définit les valeurs de timeout en millisecondes pour les méthodes du contrôleur respectives (ou les commandes personnalisées pour Cypress). (Voir le Classes de Contrôleur pour des informations sur les classes de contrôleur et le Commentaires Personnalisés Cypress pour des informations sur les commandes personnalisées de Cypress.) Lorsqu'un délai expire, le test échoue avec un message indiquant que le délai a été dépassé. Vous pouvez augmenter le délai pour éviter l'erreur.

important

Ces valeurs de temporisation sont indépendantes du cadre de test que vous utilisez, et vous pourriez également devoir augmenter les valeurs de temporisation pour ce cadre.

Cet exemple fixe le timeout de analyze à 8 secondes, flush à 15 secondes, start à 10 secondes, et stop à 10 secondes. (Les valeurs par défaut sont indiquées dans le tableau sous Interface Timeouts.)

axe: {
  timeout: {
    analyze: 8000,
    flush: 15000,
    start: 10000,
    stop: 10000,
  }
}

Fonctions de Configuration

Les fonctions de configuration fournies par Watcher vous permettent de modifier votre configuration pour le framework de test spécifié ainsi que d'adapter l'exécution de Watcher à vos besoins. Voir Interface AxeConfiguration pour plus d'informations.

Cadre de Test Fonction de Configuration
Cypress cypressConfig
**Playwright** playwrightConfig
**Playwright Test** playwrightTest
Puppeteer puppeteerConfig
**WebdriverIO** wdioConfig
**WebdriverIO Testrunner** wdioTestRunner
WebDriverJS webdriverConfig

cypressConfig

Crée une configuration pour Cypress.

cypressConfig(config: Cypress.ConfigOptions & Configuration): Cypress.ConfigOptions

Paramètres cypressConfig

  • config : Cypress.ConfigOptions & Configuration

    Type d'intersection de Cypress.ConfigOptions et Configuration.

Retours : Cypress.ConfigOptions

Exemple cypressConfig

import { defineConfig } from 'cypress'
import { cypressConfig } from '@axe-core/watcher/cypress/config'

export default defineConfig(
  cypressConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    }
  })
)

playwrightConfig

Crée une configuration pour Playwright.

playwrightConfig(opts: Configuration & LaunchOptions): LaunchOptions

Paramètres playwrightConfig

  • opts : Configuration & LaunchOptions

    Type d'intersection de LaunchOptions et Configuration.

Retours : LaunchOptions

Exemple playwrightConfig

import { chromium } from 'playwright'
import { playwrightConfig } from '@axe-core/watcher/playwright'

const browserContext = await chromium.launchPersistentContext(
  '',
  playwrightConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    }
  })
)

playwrightTest

Crée une configuration pour Playwright Test.

playwrightTest(options: Options): ReturnValue

Paramètres playwrightTest

  • options : Options

    Options est un type d'intersection de Configuration et LaunchOptions.

Retours : ReturnValue

Exemple playwrightTest

// fixtures.ts
import { playwrightTest } from '@axe-core/watcher/playwright-test'

export default playwrightTest({
  axe: {
    apiKey: process.env.API_KEY,
    projectId: process.env.PROJECT_ID
  }
})

puppeteerConfig

Crée une configuration pour Puppeteer.

puppeteerConfig(opts: Configuration & LaunchOptions & BrowserLaunchArgumentOptions & BrowserConnectOptions): Options

Paramètres puppeteerConfig

  • opts : Configuration & LaunchOptions & BrowserLaunchArgumentOptions & BrowserConnectOptions

    Type d'intersection de LaunchOptions, BrowserLaunchArgumentOptions, BrowserConnectOptions et Configuration.

Retours : Options

Exemple puppeteerConfig

import puppeteer from 'puppeteer'
import { puppeteerConfig } from '@axe-core/watcher/puppeteer'

const browser = await puppeteer.launch(
  puppeteerConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    }
  })
)

wdioConfig

Crée une configuration pour WebdriverIO.

wdioConfig({ axe, ...options}: Options): RemoteOptions

Paramètres wdioConfig

  • arg : Options

    Options est un type d'intersection de RemoteOptions et Configuration.

Retours : RemoteOptions

Exemple wdioConfig

import { remote } from 'webdriverio'
import { wdioConfig } from '@axe-core/watcher/wdio'

const browser = await remote(
  wdioConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    },
    capabilities: { browserName: 'chrome' }
  })
)

wdioTestRunner

Crée une configuration pour WebdriverIO Testrunner.

wdioTestRunner(...params: unknown[]): Options.Testrunner

Paramètres wdioTestRunner

  • params : unknown[]

    La valeur params est l'une des suivantes :

    1. Un tableau contenant une valeur, qui est un type d'intersection de Options.Testrunner et Configuration.
    2. Un tableau où la première valeur est un AxeConfiguration et la seconde valeur est un Options.Testrunner.

Retours : Options.Testrunner

Exemple wdioTestRunner

import { wdioTestRunner } from '@axe-core/watcher/wdio'

export const config = wdioTestRunner({
  axe: {
    apiKey: process.env.API_KEY,
    projectId: process.env.PROJECT_ID
  }
})

webdriverConfig

Crée une configuration Selenium WebDriver.

webdriverConfig(arg: WebDriverArgs): Options

Paramètres webdriverConfig

  • arg : WebDriverArgs

    Un Configuration étendu pour inclure un membre Selenium WebDriver Options.

Retours : Options

webdriverConfig Exemple

import { Builder } from 'selenium-webdriver'
import { Options } from 'selenium-webdriver/chrome'
import { webdriverConfig } from '@axe-core/watcher/webdriver'

const options = new Options()
const browser = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(
    webdriverConfig({
      axe: {
        apiKey: process.env.API_KEY,
        projectId: process.env.PROJECT_ID
      },
      options
    })
  )
  .build()

Configuration Interface

L'interface Configuration est utilisée avec fonctions de configuration et contient une propriété :

Nom Type Requis Description
axe AxeConfiguration oui Le AxeConfiguration à transmettre à la fonction de configuration de votre framework de test.

Tous les fonctions de configuration utilisent cette propriété axe pour vous permettre de configurer Watcher et de configurer vos tests d'accessibilité. Voir la section Interface AxeConfiguration ci-dessus pour plus d'informations.

ConfigurationOverrides Interface

L'interface ConfigurationOverrides vous permet de remplacer les paramètres de configuration globaux de votre organisation pour des exécutions de test individuelles. Cette propriété doit être utilisée conformément aux autorisations définies dans la configuration globale de votre entreprise.

Nom Type Requis Description
accessibilityStandard string non La norme d'accessibilité à suivre
axeCoreVersion string non Indique quelle version de axe-core doit être utilisée.
bestPractices boolean non Spécifie s'il faut suivre les règles des meilleures pratiques.
experimentalRules boolean non Si vous devez suivre les règles expérimentales

accessibilityStandard

Définit la norme d'accessibilité à tester. Options disponibles :

  • « Toutes » - Teste contre toutes les normes disponibles
  • « WCAG 2.2 AAA »
  • « WCAG 2.2 AA »
  • « WCAG 2.2 A »
  • « WCAG 2.1 AAA »
  • « WCAG 2.1 AA »
  • « WCAG 2.1 A »
  • « WCAG 2.0 AAA »
  • « WCAG 2.0 AA »
  • « WCAG 2.0 A »
  • « Trusted Tester v5 »
  • « EN 301 549 »
  • « RGAAv4 » - Version 4 du RGAA (norme d'accessibilité française ; nécessite axe-core 4.11.0 ou plus)

Votre organisation doit permettre le remplacement de ce paramètre dans la configuration globale, et la norme sélectionnée doit être parmi les options autorisées.

axe: {
  configurationOverrides: {
    accessibilityStandard: 'WCAG 2.2 AA'
  }
}

axeCoreVersion

Spécifie quelle version d'axe-core utiliser pour les tests. Les options disponibles incluent :

  • « latest » - Dernière version supportée actuellement intégrée à Axe Watcher
  • Versions spécifiques à partir de 4.4.0 et plus (par exemple, « 4.10.2 », « 4.9.1 », etc.)

Votre organisation doit permettre le remplacement de ce paramètre dans la configuration globale, et la version sélectionnée doit être parmi les options autorisées.

axe: {
  configurationOverrides: {
    axeCoreVersion: 'latest'
  }
}

bestPractices

Active ou désactive les règles de bonnes pratiques pour l'exécution du test. Les meilleures pratiques améliorent l'accessibilité mais ne font pas partie des normes formelles. Votre organisation doit autoriser le remplacement de ce paramètre pour qu'il prenne effet.

axe: {
  configurationOverrides: {
    bestPractices: true
  }
}

experimentalRules

Active ou désactive les règles expérimentales pour l'exécution du test. Les règles expérimentales sont encore en développement et peuvent produire des faux positifs. Votre organisation doit autoriser le remplacement de ce paramètre dans le configuration globale pour qu'il prenne effet.

axe: {
  configurationOverrides: {
    experimentalRules: true
  }
}

Controller Classes

Les classes suivantes étendent la classe abstraite Controller pour vous permettre de contrôler manuellement l'analyse d'accessibilité des pages de votre site web.

Cadres de test Nom
Playwright et Playwright Test PlaywrightController
Puppeteer PuppeteerController
WebdriverIO et WebdriverIO Testrunner WdioController
WebDriverJS WebdriverController
note

Pour Cypress, les méthodes des classes *Controller sont implémentées comme commandes personnalisées. Voir Commandes Personnalisées pour Cypress pour plus d'informations.

Controller

abstract class Controller

La classe abstraite Controller contient les méthodes pour contrôler l'analyse des pages. Chacune des classes concrètes étend cette classe, de sorte que les méthodes suivantes sont disponibles dans toutes les classes concrètes.

important

Contexte de cadre : Si votre test change le contexte du navigateur vers un frame enfant en utilisant switchToFrame() (WebdriverIO ou WebDriverJS), Axe Watcher ne capturera pas les états de la page pour les actions effectuées dans le frame enfant. Axe Watcher ne peut analyser que le frame de niveau supérieur. Revenez au frame de niveau supérieur (par exemple, en utilisant switchToParentFrame() dans WebdriverIO ou driver.switchTo().defaultContent() dans WebDriverJS) pour reprendre la capture des états de la page. Voir Aucun État de Page Capturé Après un Changement vers un Cadre Enfant pour plus d'informations.

analyze

analyze(): Promise<void>

Analyse la page actuelle pour les erreurs d'accessibilité. Vous appelez cette méthode après avoir préparé une page web pour l'analyse (par exemple, saisi des valeurs dans un formulaire) et désactivé l'analyse automatique en utilisant la méthode stop ou en définissant autoAnalyze sur false.

analyze Renvoie

Promise<void>

analyze Exemple
await controller.analyze()
analyze Commande Cypress équivalente

cy.axeWatcherAnalyze()

flush

flush(): Promise<void>

Envoie tous les résultats de l'analyse d'accessibilité au Axe Developer Hub. Devrait être appelé à la fin de l'exécution du test pour s'assurer que les résultats ont été envoyés aux serveurs du Axe Developer Hub de Deque.

flush Renvoie

Promise<void>

flush Exemple
await controller.flush()
flush Commande Cypress équivalente

cy.axeWatcherFlush()

start

start(): Promise<void>

Relance l'analyse automatique des pages web. Vous appelez cette méthode lorsque vous souhaitez reprendre l'analyse automatique des pages web pour détecter les erreurs d'accessibilité.

start Renvoie

Promise<void>

start Exemple
await controller.start()
start Commande Cypress équivalente

cy.axeWatcherStart()

stop

stop(): Promise<void>

Arrête l'analyse automatique des pages web. Après avoir appelé la méthode stop, vous pouvez effectuer tout autre paramétrage supplémentaire requis par votre page web et ensuite appeler la méthode analyze pour vérifier la page pour les erreurs d'accessibilité.

stop Renvoie

Promise<void>

stop Exemple
await controller.stop()
stop Commande Cypress équivalente

cy.axeWatcherStop()

PlaywrightController

La classe PlaywrightController vous permet de contrôler manuellement l'analyse d'accessibilité pour les exécutions de test avec Playwright et Playwright Test. Vous pouvez démarrer et arrêter l'analyse d'accessibilité automatique et analyser les pages qui nécessitent une configuration supplémentaire.

Pour plus d'informations sur Playwright, voir Documentation Playwright.

Constructeur

new PlaywrightController(driver: Page): PlaywrightController
Paramètres

La valeur driver est un objet Page de Playwright.

Renvoie PlaywrightController
PlaywrightController Exemple
import { PlaywrightController, wrapPlaywrightPage } from '@axe-core/watcher/playwright'

let page = await browserContext.newPage()
const controller = new PlaywrightController(page)
page = wrapPlaywrightPage(page, controller)

Voir Controller pour les méthodes implémentées dans la classe de base abstraite.

PuppeteerController

La classe PuppeteerController permet un contrôle manuel de vos exécutions de test avec Puppeteer. Le contrôle manuel vous permet de fournir des configurations supplémentaires requises par des pages web plus complexes.

Pour plus d'informations sur Puppeteer, voir Puppeteer.

Constructeur

new PuppeteerController(driver: Page): PuppeteerController
Paramètres

La valeur driver est un objet Page de Puppeteer.

Renvoie PuppeteerController
PuppeteerController Exemple
import { PuppeteerController, wrapPuppeteerPage } from '@axe-core/watcher/puppeteer'

let page = await browser.newPage()
const controller = new PuppeteerController(page)
page = wrapPuppeteerPage(page, controller)

Voir Controller pour les méthodes implémentées dans la classe de base abstraite.

WdioController

Le WdioController vous permet de contrôler manuellement les exécutions de test de WebdriverIO et WebdriverIO Testrunner. Pour les pages qui nécessitent une configuration ou un paramétrage supplémentaire, vous pouvez arrêter les tests automatiques et analyser manuellement chaque page qui nécessite une telle configuration.

Constructeur

new WdioController(driver: Browser): WdioController
Paramètres
  • driver : Browser
Renvoie WdioController
WdioController Exemple
import { WdioController, wrapWdio } from '@axe-core/watcher/wdio'

// browser is the WebdriverIO Browser instance from your wdioConfig() setup
const controller = new WdioController(browser)
wrapWdio(browser, controller)

Voir Controller pour les méthodes implémentées dans la classe de base abstraite.

WebdriverController

Constructeur

new WebdriverController(driver: WebDriver): WebdriverController
Paramètres

La valeur driver est un objet WebDriver de Selenium.

Renvoie WebdriverController
WebdriverController Exemple
import { WebdriverController, wrapWebdriver } from '@axe-core/watcher/webdriver'

// browser is the Selenium WebDriver instance from your webdriverConfig() setup
const controller = new WebdriverController(browser)
browser = wrapWebdriver(browser, controller)

Voir Controller pour les méthodes implémentées dans la classe de base abstraite.

Commandes personnalisées Cypress

Dans la plateforme d'automatisation de navigateur Cypress, les méthodes dans les classes *Controller sont implémentées comme commandes personnalisées. Voir Commandes personnalisées sur le site de documentation de Cypress pour plus d'informations sur la mise en œuvre et l'utilisation des commandes personnalisées.

Les commandes personnalisées suivantes sont implémentées. Chaque commande personnalisée retourne Chainable<void> pour permettre l'enchaînement avec d'autres commandes Cypress.

Méthode de contrôleur Commande personnalisée Cypress équivalente
analyze() axeWatcherAnalyze()
flush() axeWatcherFlush()
start() axeWatcherStart()
stop() axeWatcherStop()
important

Depuis Watcher 3.9.0, les quatre commandes personnalisées Cypress axeAnalyze(), axeFlush(), axeStart() et axeStop() ont été dépréciées et ne doivent pas être utilisées.

Si vous utilisez le package @axe-devtools/cypress avec Watcher, vous devrez passer à au moins la version 3.9.0 de Watcher car les commandes personnalisées dépréciées entrent en conflit avec les commandes personnalisées dans @axe-devtools/cypress.

Exemple de commande Cypress

L'exemple suivant montre comment importer les commandes Cypress du Axe Developer Hub à partir du package @axe-core/watcher et ensuite appeler la commande axeWatcherFlush à la fin de chaque test (en la plaçant à l'intérieur de afterEach()) :

// Import the axe-watcher commands.
require('@axe-core/watcher/cypress/support')

// Flush Axe-watcher results after each test.
afterEach(() => {
  cy.axeWatcherFlush()
})

Interface de délais d'attente

Le objet **timeout** (de type **Timeouts**) dans le AxeConfiguration permet aux utilisateurs de modifier les valeurs de temporisation (en millisecondes) pour les fonctions du contrôleur respectives ou les commandes personnalisées Cypress.

interface Timeouts {
  start?: number
  stop?: number
  flush?: number
  analyze?: number
}
Nom Type Requis Défaut Description
analyser nombre non 5000 Définit la temporisation en millisecondes pour la fonction du contrôleur analyser ou la commande personnalisée commande personnalisée axeWatcherAnalyze (dans Cypress). (dans Cypress).
vider nombre non 5000 Définit la temporisation en millisecondes pour la fonction du contrôleur vider ou la commande personnalisée commande personnalisée axeWatcherFlush (dans Cypress). (dans Cypress).
démarrer nombre non 2000 Définit la temporisation en millisecondes pour la fonction du contrôleur démarrer ou la commande personnalisée commande personnalisée axeWatcherStart (dans Cypress). (dans Cypress).
arrêter nombre non 5000 Définit la temporisation en millisecondes pour la fonction du contrôleur arrêter ou la commande personnalisée commande personnalisée axeWatcherStop (dans Cypress). (dans Cypress).