Contrôlez vos analyses

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

Le mode manuel de Watcher vous permet de choisir quand ou quelles pages de votre site sont analysées pour des problèmes d'accessibilité

Not for use with personal data

Par défaut, dans ce que l'on appelle le mode automatique, axe Watcher détermine automatiquement quand analyser une page web (que ce soit lorsqu'elle est visitée par votre suite de tests ou en fonction des changements détectés au niveau du DOM de la page). Parfois, cette analyse automatique entraîne un comportement qui n'est pas compatible avec les objectifs de votre organisation : analyser trop de pages (des pages qui ne vous intéressent pas ou qui appartiennent à d'autres départements de votre organisation). Vous pouvez désactiver le mode automatique, ce qui vous permettra de déterminer quand (ou si) analyser une page web (ce que l'on appelle le mode manuel).

Scénarios

Analyser des parties d'un site web

Vous pouvez utiliser le mode manuel pour analyser seulement une partie d'un site web. Par exemple, si votre équipe est responsable de la fonctionnalité du panier d'achat sur votre site mais que votre suite de tests doit visiter des pages de catalogue (que votre équipe ne gère pas) pour ajouter des produits au panier, vous voudrez probablement éviter de tester l'accessibilité des pages de catalogue. Une fois que vous avez atteint la page du panier d'achat dans votre suite de tests, vous pouvez réactiver l'analyse automatique. Ensuite, une fois les tests du panier d'achat terminés, vous pouvez désactiver à nouveau l'analyse automatique.

Prochaines étapes

Chargement dynamique de contenu

Vous pouvez utiliser le mode manuel pour éviter de tester les pages avec des séquences de chargement complexes. Si la page que vous souhaitez tester charge dynamiquement de nombreuses ressources en arrière-plan, vous pouvez désactiver le mode automatique jusqu'à ce qu'elle soit complètement chargée. Cela limitera les problèmes d'accessibilité à ceux qui existent une fois la page entièrement chargée. Cela empêchera également les vérifications d'accessibilité pendant les animations de chargement ou d'autres interfaces utilisateur de chargement.

Prochaines étapes

Capturer des états de page spécifiques

Si vous voulez vous assurer qu'un état de page spécifique est analysé, vous pouvez déclencher manuellement une analyse d'accessibilité après avoir configuré votre page.

Prochaines étapes

Limiter la portée d'une grande suite de tests

En désactivant l'analyse automatique, vous pouvez utiliser une suite de tests plus grande et plus complète tout en limitant vos tests d'accessibilité à une seule partie de celle-ci. Dans ce cas, vous n'avez pas besoin de fragmenter votre grande suite de tests en suites plus petites et de tester uniquement l'accessibilité dans les suites de tests qui vous intéressent.

Prochaines étapes

Comment utiliser le mode manuel

Vous pouvez désactiver l'analyse automatique dans votre configuration (voir Désactiver l'analyse automatique dans la configuration ci-dessous).

L'analyse de la page est contrôlée par trois méthodes sur l'objet Controller ou les commandes équivalentes dans Cypress.

  1. analyze() (dans Cypress : cy.axeWatcherAnalyze()) pour effectuer une analyse de la page actuelle.
  2. start() (dans Cypress : cy.axeWatcherStart()) pour activer l'analyse automatique de l'accessibilité.
  3. stop() (dans Cypress : cy.axeWatcherStop()) pour désactiver l'analyse automatique de l'accessibilité.

Obtention d'un objet de contrôle

(JavaScript/TypeScript) Pour obtenir un Controller objet, voir étape quatre de la page d'instructions de votre framework de test :

JavaScript:

TypeScript:

(Java) Pour Java, voir étape trois de la page d'instructions du framework de test. Étape quatre montre comment caster le wrappedDriver pour appeler sa flush() méthode :

Cypress

(JavaScript/TypeScript) Pour Cypress, vous pouvez utiliser l'objet global cy avec ces commandes équivalentes :

Méthode du contrôleur Commande Cypress
analyse() axeWatcherAnalyze()
flush() axeWatcherFlush()
start() axeWatcherStart()
stop() axeWatcherStop()

Test Playwright

(JavaScript/TypeScript) Pour Test Playwright, l'objet Controller (PlaywrightController) peut être obtenu à partir de page, qui contient un axeWatcher objet. Vous pouvez utiliser l'objet axeWatcher pour invoquer les Controller méthodes (l'exemple ci-dessous est en TypeScript) :

import { test, expect } from './fixtures'

test('example test', async ({ page }) => {
  await page.goto('https://example.com')
  await page.axeWatcher.analyze()
})

Désactiver l'analyse automatique dans la configuration

Vous pouvez désactiver le test automatique d'accessibilité en

  • (JavaScript/TypeScript) configurant la propriété autoAnalyze sur l'objet de configuration axe à false.
  • (Java) Appeler la méthode setAutoAnalyze() avec false.

(JavaScript/TypeScript) Par exemple, vous définissez autoAnalyze sur false dans votre configuration (la ligne est mise en surbrillance dans l'exemple JavaScript de Cypress ci-dessous) : 

const { defineConfig } = require('cypress');
const { cypressConfig } = require('@axe-core/watcher/cypress/config');

const API_KEY = process.env.API_KEY
const PROJECT_ID = process.env.PROJECT_ID

module.exports = defineConfig(  
  cypressConfig({
    axe: {
      apiKey: API_KEY,      projectId: PROJECT_ID,
      autoAnalyze: false
    },
    // Your existing Cypress configuration code here
  })
);

Désactiver l'analyse automatique via un appel

Avec Cypress, vous pouvez utiliser la commande axeWatcherStop() :

cy.axeWatcherStop()

(JavaScript/TypeScript) Les autres intégrations de test utilisent la méthode stop() sur votre objet Controller :

await controller.stop()

(Java) Dans l'intégration Java Watcher, vous utilisez la méthode AxeWatcherController.stop() .

Voir Obtention d'un objet Controller pour plus d'informations sur l'obtention d'un objet controller pour votre framework de test.

Analyser manuellement les pages

Après avoir désactivé l'analyse automatique, vous pouvez ajouter des appels à (JavaScript/TypeScript) axeWatcherAnalyze() (pour Cypress) ou analyze() (avec les autres intégrations de test). (Java) Pour Java, vous utilisez la méthode AxeWatcherController.analyze()](wa-java-watchercontroller#analyze).

Par exemple, pour Cypress :

describe('My Login Application', () => {
  it('should login with valid credentials', () => {
    cy.visit('https://the-internet.herokuapp.com/login')
      // Analyze the page.
      .axeWatcherAnalyze()      .get('#username')
      .type('tomsmith')
      .get('#password')
      .type('SuperSecretPassword!')
      .get('button[type="submit"]')
      .click()
      .wait(1000)
      // Analyze the page.
      .axeWatcherAnalyze()      // Restart automatic axe analysis.
      .axeWatcherStart()
      .get('#flash')
      .should('exist')
  })
})

Voir Obtention d'un objet Controller pour plus d'informations sur l'obtention d'un objet Controller pour votre framework de test.

Activer l'analyse automatique

Avec Cypress, vous pouvez utiliser la commande axeWatcherStart :

cy.axeWatcherStart()

Les autres intégrations de test utilisent la méthode start sur votre objet Controller :

await controller.start()

Voir Obtention d'un objet Controller pour plus d'informations sur l'obtention d'un objet controller pour votre framework de test.

Exécuter Watcher uniquement sur des tests spécifiques

Les tests de bout en bout peuvent être coûteux en termes de temps ou de coûts de calcul dans le cloud. Vous ne souhaitez pas forcément que Watcher analyse les pages à chaque commit ou à chaque exécution de test, mais seulement lorsque vous souhaitez explicitement un scan d'accessibilité. Vous pouvez conditionner l'analyse à une variable d'environnement en passant la valeur de cette variable à autoAnalyze. Cela vous donne deux commandes de test distinctes : une sans analyse, et une autre avec analyse.

(JavaScript/TypeScript) Par exemple, dans une configuration Cypress :

const { defineConfig } = require('cypress')
const { cypressConfig } = require('@axe-core/watcher/cypress/config')

const API_KEY = process.env.API_KEY
const PROJECT_ID = process.env.PROJECT_ID
const ACCESSIBILITY_TESTING = process.env.ACCESSIBILITY_TESTING === 'true'

module.exports = defineConfig(
  cypressConfig({
    axe: {
      apiKey: API_KEY,
      projectId: PROJECT_ID,
      autoAnalyze: ACCESSIBILITY_TESTING
    },
    // Your existing Cypress configuration code here
  })
)

Ajoutez deux scripts à votre package.json, un avec la variable définie, l'autre sans :

{
  "scripts": {
    "test:e2e": "cypress run",
    "test:e2e:accessibility": "ACCESSIBILITY_TESTING=true cypress run"
  }
}

Sous Windows, utilisez cross-env pour définir des variables d'environnement de manière multiplateforme. Vous pouvez choisir n'importe quel nom de variable d'environnement ; ACCESSIBILITY_TESTING n'est qu'un exemple.

La même approche s'applique aux autres frameworks de test JavaScript et TypeScript : lisez la variable dans votre fichier de configuration et passez sa valeur booléenne à autoAnalyze. (Java) Les utilisateurs de Java peuvent passer la valeur à setAutoAnalyze().

note

Cette approche contrôle si Watcher analyse les pages, pas si Watcher est initialisé. Une certaine configuration de Watcher a toujours lieu dans votre environnement de test, quelle que soit la valeur de la variable d'environnement.

Voir aussi

Is this page helpful?

Help us improve this page

Still need help?