Escrever Testes com o Axe DevTools Cypress

Produzir resultados de verificações de acessibilidade com o Axe DevTools pode ser tão fácil quanto uma linha de código. Esses resultados podem ser consumidos em bruto, usados em conjunto com uma biblioteca de asserção ou utilizados para criar relatórios de acessibilidade.

Pré-requisitos

Para testar páginas com o Axe DevTools, primeiro é necessário que ele esteja instalado em seu projeto. Se você ainda não completou esta etapa, consulte o guia de instalação.

Estrutura do Projeto

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

Configuração

O seguinte é necessário para usar o Axe DevTools Cypress.

Inclua a seguinte linha em cypress/support/e2e.js:

import '@axe-devtools/cypress';

Dentro do arquivo cypress.config.js , você precisará adicionar o seguinte:

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

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

Arquivo de Exemplo Completo

Chame cy.axeAnalyze() e cy.getAxeResults() dentro de cada bloco it() , e use um nome de arquivo único para cada teste para evitar sobrescrever os resultados de outros testes.

Adicione este código ao arquivo test.cy.js no diretório 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)
    })
  })
})