Rédaction de tests pour Axe DevTools pour le Web pour Puppeteer

Écrire des tests avec Axe DevTools

Produire des résultats de scan d'accessibilité avec Axe DevTools peut être aussi simple qu'une ligne de code. Ces résultats peuvent être consommés bruts, utilisés avec une bibliothèque d'assertions ou utilisés pour créer des rapports d'accessibilité.

Prérequis

Pour tester des pages avec Axe DevTools, vous devez d'abord l'importer et l'initialiser dans votre projet. Si vous n'avez pas encore effectué cette étape, consultez ce guide pour savoir comment faire.

Obtenir le contexte de scan

Avant de pouvoir scanner une page pour l'accessibilité, elle doit être accessible par Puppeteer.

//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');

Contourner la politique de sécurité du contenu

Si la page que vous essayez de scanner a la politique de sécurité du contenu activée, vous pourriez avoir des problèmes. Si vous rencontrez ce problème, Axe DevTools propose une solution de contournement. Il vous suffit d'inclure cette instruction 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 façon la plus simple de visualiser les résultats du scan est d'utiliser la console pour afficher l'objet des résultats.

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

Fichier d'exemple complet

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();
})();

Étapes suivantes

Maintenant que vous avez réussi à terminer un scan d'accessibilité, vous êtes prêt à passer à des sujets de scan plus avancés comme générer des rapports et utiliser l'objet des résultats.

Dépannage

Si vous avez des problèmes pour obtenir des résultats de scan, contactez directement votre représentant Deque, joignez-nous via notre service d'assistance, ou envoyez-nous un email. Nous serons heureux de vous aider.