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, ce que l'on appelle mode automatique, Axe Watcher détermine automatiquement quand analyser une page web (qu'elle soit visitée par votre suite de tests ou en fonction des modifications détectées dans le DOM de la page). Parfois, cette analyse automatique entraîne un comportement qui n'est pas compatible avec les objectifs de votre organisation : analyse de trop nombreuses pages (des pages qui ne vous intéressent pas ou des pages appartenant à 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 (appelé mode manuel).

Scénarios

Analyse de parties d'un site web

Vous pouvez utiliser le mode manuel pour analyser uniquement 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 possède pas) pour ajouter des produits au panier, vous souhaitez 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, lorsque les tests du panier d'achat sont terminés, vous pouvez désactiver à nouveau l'analyse automatique.

Prochaines étapes

Chargement de contenu dynamique

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

Prochaines étapes

Capture de situations spécifiques de page

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

Prochaines étapes

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

En désactivant l'analyse automatique, vous pouvez utiliser une suite de tests plus large et plus complète, mais limiter vos tests d'accessibilité à une seule partie de celle-ci. Dans ce cas, vous n'avez pas besoin de diviser votre suite de tests plus large en suites de tests 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 des pages 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 en cours.
  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 contrôleur

(JavaScript/TypeScript) Pour des informations sur l'obtention d'un objet Controller, voir étape quatre de la page d'instructions de votre cadre de test :

JavaScript :

TypeScript :

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

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 Playwright Test, l'objet Controller (PlaywrightController) peut être obtenu à partir de page, qui contient un objet axeWatcher. Vous pouvez utiliser l'objet axeWatcher pour invoquer les méthodes Controller (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 d'accessibilité automatique en

(JavaScript/TypeScript) Par exemple, vous définissez autoAnalyze à false dans votre configuration (la ligne est mise en évidence 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 contrôleur :

await controller.stop()

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

Consultez Obtention d'un objet contrôleur pour plus d'informations sur l'obtention d'un objet contrôleur 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')
  })
})

Consultez Obtention d'un objet contrôleur pour plus d'informations sur l'obtention d'un objet contrôleur 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 contrôleur :

await controller.start()

Consultez Obtention d'un objet contrôleur pour plus d'informations sur l'obtention d'un objet contrôleur pour votre framework de test.

Exécuter le Watcher uniquement sur des tests spécifiques

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

(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, l'un avec la variable définie, l'autre sans :

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

Sur 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 à d'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 détermine si Watcher analyse les pages, et non si Watcher est initialisé. Une partie de la configuration de Watcher se produit toujours dans votre environnement de test, quel que soit la valeur de la variable d'environnement.

Voir également

Is this page helpful?

Help us improve this page

Still need help?