Contrôle de l'analyse des pages

Normalement, axe Developer Hub analyse automatiquement chaque page visitée par votre suite de tests (appelé mode automatique). Parfois, cette analyse automatique entraîne l'analyse d'un trop grand nombre de pages, de pages qui ne vous intéressent pas ou de pages appartenant à d'autres services de votre organisation (des pages sur lesquelles votre équipe n'a aucun droit de propriété). Vous pouvez désactiver le mode automatique afin de déterminer quand (ou si) analyser chaque page (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 possède la fonctionnalité de panier d'achat sur votre site, mais que votre suite de tests doit visiter les pages du catalogue (que votre équipe ne possède pas) pour ajouter des produits au panier, vous souhaiterez probablement éviter de tester l'accessibilité des pages du catalogue. Une fois que vous avez atteint la page du panier dans votre suite de tests, vous pouvez réactiver l'analyse automatique. Ensuite, lorsque les tests du panier sont terminés, vous pouvez à nouveau désactiver l'analyse automatique.

Prochaines étapes

• Désactiver l'analyse automatique dans la configuration pour éviter de tester les pages du catalogue.
• Activer l'analyse automatique pour votre page de panier.
• Désactiver l'analyse automatique via un appel à la fin du test de votre page de panier pour empêcher que les pages visitées après la page du panier soient testées.

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 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 n’existent qu’une fois la page entièrement chargée. Cela empêcherait également les vérifications d'accessibilité lors du chargement des animations ou d'autres interfaces de chargement.

Prochaines étapes

• Désactiver l'analyse automatique dans la configuration afin que les animations de chargement et l'interface utilisateur ne soient pas testées pour les erreurs d'accessibilité.
• Activer l'analyse automatique pour reprendre les tests d'accessibilité automatiques une fois la page complètement chargée.

Capture d'états de page spécifiques

Si vous souhaitez 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

• Désactiver l'analyse automatique dans la configuration pour empêcher l'analyse d'accessibilité de se produire avant que la page ne soit dans l'état souhaité.
• Analyser manuellement les pages pour tester l'état de page spécifique qui vous intéresse.

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 grande 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 grande en suites de tests plus petites et de tester uniquement l'accessibilité dans les suites de tests qui vous intéressent.

Prochaines étapes

• Désactiver l'analyse automatique dans la configuration pour empêcher l'analyse automatique de l'accessibilité de démarrer au début de votre suite de tests.
• Activer l'analyse automatique lorsque vous atteignez la partie de votre suite de tests que vous souhaitez tester.
• Désactiver l'analyse automatique via un appel pour désactiver les tests d'accessibilité pour les parties de la suite de tests que vous ne souhaitez pas tester pour les erreurs d'accessibilité.

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 page est contrôlée par trois méthodes sur l'objet Contrôleur 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 Contrôleur

Pour plus d'informations sur l'obtention d'un objet Contrôleur , consultez l' étape quatre de la page d'instructions de votre framework de test :

JavaScript :

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

TypeScript :

• Playwright
• Puppeteer
• WebdriverIO
• WebdriverIO TestRunner
• WebDriverJS

Cypress

Pour Cypress, vous pouvez utiliser l'objet global cy avec ces commandes équivalentes :

Test de Playwright

Pour Playwright Test, l'objet Controller (PlaywrightController) peut être obtenu à partir de la page, qui contient un objet axeWatcher . Vous pouvez utiliser l'objet axeWatcher pour appeler 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

Lorsque vous avez modifié votre suite de tests pour ajouter des tests d'accessibilité, vous avez dû créer un objet de configuration axe . Vous pouvez désactiver les tests d'accessibilité automatiques en définissant autoAnalyze sur false dans votre axe objet.

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

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

const API_KEY = process.env.API_KEY

module.exports = defineConfig(  
  cypressConfig({
    axe: {
      apiKey: API_KEY,
      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()

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

await controller.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 à axeWatcherAnalyze() (pour Cypress) ou analyze() (avec les autres intégrations de test). Par exemple, dans 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 Controller :

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.

Voir aussi

• Pour deux exemples fonctionnels de tests en mode manuel (pour Cypress et Playwright), consultez les exemples suivants dans le dépôt watcher-examples sur GitHub :
  • Pour Cypress, voir Cypress mode manuel
  • Pour Playwright, voir Mode manuel Playwright
• Dans la Référence API, vous pouvez trouver des informations de référence sur toutes les API fournies par le package @axe-core/watcher.