Schrijf Tests met Axe DevTools Cypress

Toegankelijkheidsscans produceren met Axe DevTools kan net zo eenvoudig zijn als één regel code. Deze resultaten kunnen onbewerkt worden gebruikt, in combinatie met een assertiebibliotheek, of om toegankelijkheidsrapporten te maken.

Vereisten

Om pagina's te testen met Axe DevTools, moet je het eerst in je project geïnstalleerd hebben. Als je deze stap nog niet hebt voltooid, bekijk dan de installatiehandleiding.

Projectstructuur

.
├── package.json
├── cypress.config.js
├── cypress
│   ├── e2e
│   │   └── test.cy.js
│   └── support
│       └── e2e.js
└── results
    └── broken-workshop.json

Cypress 10.0 verving het cypress.json configuratiebestand door cypress.config.js (of cypress.config.ts), hernoemde de cypress/integration spec-map naar cypress/e2e, hernoemde cypress/support/index.js naar cypress/support/e2e.js, en verwijderde de cypress/plugins map ten gunste van de setupNodeEvents functie in het configuratiebestand. Spec-bestanden gebruiken nu de suffix .cy.js in plaats van .spec.js.

De results map bevat de JSON-scanresultaten die zijn geschreven door je tests. Cypress maakt deze map aan bij de eerste schrijfoperatie, dus je hoeft deze niet zelf toe te voegen.

Installatie

Het volgende is vereist om Axe DevTools Cypress te gebruiken.

Neem de volgende regel op in cypress/support/e2e.js:

import '@axe-devtools/cypress';

Binnen het cypress.config.js bestand moet je het volgende toevoegen:

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

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

Volledig Voorbeeldbestand

Roep cy.axeAnalyze() en cy.getAxeResults() aan binnen elk it() blok en gebruik een unieke bestandsnaam voor elke test om te voorkomen dat resultaten van andere tests worden overschreven.

Voeg deze code toe aan het test.cy.js bestand in de e2e directory:

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

Voer je tests uit

Voeg scripts toe aan je package.json zodat je de suite hoofdloos kunt uitvoeren in CI of de Cypress-app kunt openen terwijl je tests schrijft:

{
  "scripts": {
    "test": "cypress run",
    "test:open": "cypress open"
  }
}

Voer alle specs in cypress/e2e hoofdloos uit met npm test, of open de interactieve Cypress-app met npm run test:open. Om een enkele spec uit te voeren, gebruik je de --spec vlag: npx cypress run --spec cypress/e2e/test.cy.js.

Cross-Origin en Sandbox Iframes

cy.axeAnalyze() injecteert axe-core in de testpagina en in elk iframe dat het kan bereiken. Iframes waarin Cypress niet kan injecteren, waaronder cross-origin iframes en iframes met een sandbox attribuut, worden overgeslagen: de scan gaat door en rapporteert resultaten voor de rest van de pagina in plaats van de test te laten falen. Inhoud in een overgeslagen iframe wordt niet geanalyseerd, dus test die pagina's direct in hun eigen specs als je dekking daarvoor nodig hebt.