Rédaction de tests pour axe DevTools for Web pour Puppeteer

Écrire des tests avec axe DevTools

Produire des résultats d'analyse d'accessibilité avec axe DevTools peut être aussi simple qu'une seule ligne de code. Ces résultats peuvent être utilisés directement, utilisés conjointement avec une bibliothèque d’assertions ou utilisés pour créer des rapports d’accessibilité.

Prérequis

Afin de tester des pages avec axe DevTools, vous devez d'abord l'importer et l'initialiser dans votre projet. Si vous n'avez pas encore terminé cette étape, consultez ce guide pour savoir comment procéder.

Obtenir le contexte d'analyse

Avant de pouvoir analyser une page pour l'accessibilité, Puppeteer doit y accéder.

//Launch the Puppeteer Driver
const browser = await puppeteer.launch();
//Create a new page in the browser
const page = await browser.newPage();
//Send the browser to the desired page to scan
await page.goto('$URL');

Contournement de la politique de sécurité du contenu

Si la page que vous essayez d'analyser a la politique de sécurité du contenu activée, vous risquez de rencontrer des problèmes. Si vous rencontrez ce problème, axe DevTools inclut une solution de contournement. Incluez simplement cette déclaration après la création de votre page :

await page.setBypassCSP(true);

Une fois que Puppeteer a accédé à la page, vous pouvez la scanner avec axe DevTools et enregistrer les résultats. La manière la plus simple de visualiser les résultats de l'analyse est de console log l'objet de résultats.

const results = await new AxeDevToolsPuppeteer(page).analyze();
console.log(results);

Fichier complet d'échantillon

const puppeteer = require('puppeteer');
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');

(async () => {

    //launch puppeteer web driver
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    //launch page for testing
    await page.goto('https://broken-workshop.dequelabs.com');

    //analyze page
    const results = await new AxeDevToolsPuppeteer(page).analyze();
    
    //log results
    console.log(results);

    //close webdriver
    browser.close();
})();

Prochaines étapes

Maintenant que vous avez terminé avec succès une analyse d'accessibilité, vous êtes prêt à passer à des sujets d'analyse plus avancés tels que génération de rapports et utilisation de l'objet de résultats.

Dépannage

Si vous rencontrez des difficultés pour obtenir les résultats de l'analyse, contactez directement votre représentant Deque, contactez-nous via notre service d'assistance ou envoyez-nous un e-mail. Nous serons heureux de vous aider.