Écrire des tests avec axe DevTools Cypress

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'installer dans votre projet. Si vous n'avez pas encore terminé 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.

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

import '@axe-devtools/cypress';

Dans le cypress.config.js fichier, vous devrez ajouter les éléments suivants :

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

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

Fichier d'exemple complet

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

describe('Axe DevTools Cypress', () => {
  before(() => {
    cy.visit('https://broken-workshop.dequelabs.com')
    cy.axeAnalyze()
  })
  it('Get results from analyzing', () => {
    cy.getAxeResults().then(results => {
      cy.writeFile('./results.json', results)
    })
  })
})