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é.

Les extraits individuels dans les sections ci-dessous sont en JavaScript, et ils se compilent sans modification en TypeScript. La section Fichier d'exemple complet donne le test complet dans les deux langues.

Prérequis

Pour importer et initialiser Axe DevTools pour le Web, il doit d'abord être installé. Si ce n'est pas encore fait, lisez le guide sur la manière de l'installer à partir d'un bundle, depuis votre dépôt d'artéfacts ou depuis l'Agora de Deque. Vous aurez également besoin d'une version de Playwright téléchargée et configurée selon votre choix.

Importation et Initialisation

Importez à la fois Axe DevTools pour le Web et Playwright. La syntaxe dépend du langage et du système de modules utilisé par votre projet. Choisissez celui qui correspond à votre projet :

JavaScript avec modules CommonJS

C'est le standard par défaut pour un projet Node.js sans "type": "module" dans son package.json.

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

JavaScript avec modules ES

Utilisez cette syntaxe dans un projet avec "type": "module" dans son package.json, ou dans des fichiers .mjs.

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';

TypeScript

TypeScript utilise la même syntaxe import que les modules ES. @axe-devtools/playwright propose ses propres déclarations de types, donc il n'y a pas de paquet @types/ à installer séparément. Les résultats des analyses sont typés en tant que AxeResults, que axe-core exporte :

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import type { AxeResults } from 'axe-core';

Initialisation de Playwright

Une fois que vous avez importé Axe DevTools pour le Web, vous pouvez initialiser le pilote. Chaque analyse nécessite sa propre instance de Axe DevTools pour le Web, donc vous l'initialiserez en écrivant les tests.

Le code d'initialisation est le même en JavaScript et en TypeScript, sauf que TypeScript peut inférer ou annoter les types que Playwright retourne. En JavaScript :

// This will open up a headless instance of chromium
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

En TypeScript, avec les types écrits :

import type { Browser, BrowserContext, Page } from 'playwright';

// This will open up a headless instance of chromium
const browser: Browser = await playwright.chromium.launch();
const context: BrowserContext = await browser.newContext();
const page: Page = await context.newPage();

Obtention du 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

Le même test est présenté ci-dessous en JavaScript et en TypeScript. L'API Axe DevTools est identique dans les deux ; la version TypeScript utilise la syntaxe import et annote les valeurs Playwright et le retour du scan.

JavaScript

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

TypeScript

import * as playwright from 'playwright';
import type { Browser, BrowserContext, Page } from 'playwright';
import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import type { AxeResults } from 'axe-core';

(async () => {

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

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

    //analyze page
    const results: AxeResults = await new AxeDevToolsBuilder({ page }).analyze();

    //log results
    console.log(results);

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

Prochaines Étapes

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.