Intégrer axe-core aux tests Playwright
Faites échouer la compilation en cas de régression d'accessibilité.
Intégrer axe-core aux tests Playwright est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
De l’analyse manuelle au test automatisé
Cliquer sur une extension de navigateur convient parfaitement pour une seule page. Pour surveiller chaque page à chaque validation, vous intégrez axe-core à votre suite de tests automatisés.
Pourquoi Playwright
Playwright pilote un véritable navigateur à partir du code : axe s’exécute donc sur la page exactement comme les utilisateurs la voient, y compris le contenu généré par JavaScript.
Le paquet d’interface
Le paquet axe-core/playwright relie les deux. Installez-le avec Playwright afin que vos tests puissent injecter et exécuter le moteur axe.
npm install --save-dev @axe-core/playwrightImportez le générateur
Dans votre fichier de test, vous importez AxeBuilder. Il s’agit de l’outil auxiliaire qui injecte axe-core dans la page actuelle et recueille les résultats pour vous.
import AxeBuilder from '@axe-core/playwright';Naviguez, puis analysez
Commencez par laisser Playwright charger la page, puis appelez analyze sur un AxeBuilder vierge pour analyser tout ce qui est actuellement affiché dans le navigateur.
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();Vérifiez l’absence de violations
Le résultat contient un tableau violations. Une page conforme possède un tableau vide : vous vérifiez donc que sa longueur est nulle afin de faire échouer le test au moindre problème.
expect(results.violations).toEqual([]);Un cas de test complet
En réunissant ces éléments, vous obtenez un véritable test d’accessibilité qui s’exécute dans l’intégration continue comme toute autre spécification Playwright.
test('home page has no a11y violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});Testez après une interaction
La véritable puissance réside dans l’analyse des états dynamiques. Ouvrez d’abord une fenêtre modale ou développez un menu, puis analysez la page afin qu’axe vérifie l’interface que les utilisateurs déclenchent réellement.
await page.getByRole('button', { name: 'Open menu' }).click();
const results = await new AxeBuilder({ page }).analyze();Limitez la portée
Vous pouvez limiter l’analyse à une seule région avec include, ce qui est pratique pour tester un composant isolé sans être gêné par le reste de la page.
new AxeBuilder({ page }).include('#signup-form').analyze();Choisissez votre ensemble de règles
Utilisez withTags pour exécuter uniquement les règles liées à une norme, comme les critères WCAG 2.1 AA, afin que votre test corresponde à votre objectif de conformité.
new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();N’oubliez pas les limites
Des tests Playwright au vert ne couvrent toujours que la part automatisable des problèmes. Ils complètent les vérifications manuelles avec un lecteur d’écran ; ils ne les remplacent jamais.
Vérification rapide
Rappelez-vous comment faire échouer un test en cas de problème d’accessibilité.
Récapitulatif : l’accessibilité dans votre pipeline
AxeBuilder injecte axe-core dans un véritable navigateur, vous analysez chaque état et vérifiez l’absence de violations. Désormais, les régressions d’accessibilité interrompent automatiquement la compilation. ✅
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 30
- Leçons
- 120
Questions Fréquemment Posées
La leçon « Intégrer axe-core aux tests Playwright » est-elle gratuite ?
Oui — le texte complet de « Intégrer axe-core aux tests Playwright » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Intégrer axe-core aux tests Playwright » ?
Faites échouer la compilation en cas de régression d'accessibilité. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Intégrer axe-core aux tests Playwright » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Ce que l'automatisation peut détecter ou non
- Analyser avec axe DevTools et Lighthouse
- Intégrer axe-core aux tests Playwright
- Analyse statique et barrières d'intégration continue pour l'accessibilité