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

É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é, Playwright doit y accéder.

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

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 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 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 AxeDevtoolsBuilder({ page }).analyze();
console.log(results);

Fichier complet d'échantillon

const playwright = require('playwright');
const AxeDevtoolsBuilder = require('@axe-devtools/playwright').default;

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

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.