Rédiger des tests pour Axe DevTools for Web pour Playwright

Rédiger 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 servir à 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 le faire.

Obtenir un contexte de scan

Avant de pouvoir scanner une page pour l'accessibilité, elle doit être accédée par Playwright.

//Launch the Playwright Driver
const browser = await playwright.chromium.launch();
//Create a new browser context
const context = await browser.newContext();
//Create a new page in the browser
const page = await context.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 activé la politique de sécurité du contenu, vous pourriez rencontrer des problèmes. Si vous rencontrez ce problème, Axe DevTools inclut une solution de contournement. Il suffit d'inclure cette instruction après que votre page soit créée :

await context = await browser.newContext({ bypassCSP: true })

Une fois que Playwright 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 de les journaliser dans la console.

const results = await new AxeDevToolsBuilder({ page }).analyze();
console.log(results);

Exemple de fichier complet

const playwright = require('playwright');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');

(async () => {

    //Launch the Playwright Driver
    const browser = await playwright.chromium.launch();
    //Create a new browser context
    const context = await browser.newContext();
    //Create a new page in the browser
    const page = await context.newPage();

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

    //analyze page
    const results = await new AxeDevToolsBuilder({ page }).analyze();
    
    //log results
    console.log(results);

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

Étapes suivantes

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

Dépannage

Si vous avez des difficultés à obtenir les 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.