Écrire des tests avec Axe DevTools Cypress

Produire des résultats de scans 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'avoir installé dans votre projet. Si vous n'avez pas encore effectué cette étape, consultez le guide d'installation.

Structure du projet

.
├── package.json
├── cypress.config.js
├── cypress
│   ├── e2e
│   │   └── test.cy.js
│   └── support
│       └── e2e.js

Configuration

Les éléments suivants sont requis pour utiliser Axe DevTools Cypress.

Incluez la ligne suivante dans cypress/support/e2e.js:

import '@axe-devtools/cypress';

Dans le fichier cypress.config.js , vous devrez ajouter ce qui suit :

const { defineConfig } = require('cypress');
const axeDevtoolsCypressPlugin = require("@axe-devtools/cypress/dist/plugin");

module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
       axeDevtoolsCypressPlugin(on);
       return config;
     }
   }
 });

Fichier exemple complet

Appelez cy.axeAnalyze() et cy.getAxeResults() à l'intérieur de chaque bloc it() , et utilisez un nom de fichier unique pour chaque test afin d'éviter d'écraser les résultats d'autres tests.

Ajoutez ce code au fichier test.cy.js dans le répertoire e2e :

describe('Axe DevTools Cypress', () => {
  it('Scans the home page for accessibility issues', () => {
    // Visit the page to test
    cy.visit('https://broken-workshop.dequelabs.com')
    // Run an accessibility scan on the current page
    cy.axeAnalyze()
    // Write results to a uniquely named file; use a different name for each test to avoid overwriting
    cy.getAxeResults().then(results => {
      cy.writeFile('./results/broken-workshop.json', results)
    })
  })
})