Rapporten genereren met Cypress

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Integratie van het @axe-devtools/reporter-pakket met @axe-devtools/cypress voor het genereren van rapporten

Not for use with personal data

Hoe @axe-devtools/reporter met @axe-devtools/cypress te gebruiken

Vereisten

Om de Axe DevTools-reporter te kunnen gebruiken, moet u deze eerst in uw project installeren.

npm install @axe-devtools/reporter

Deze handleiding behandelt de setup die specifiek is voor Cypress. Voor een algemeen overzicht van de verslaggever en zijn rapportformaten, zie de Handleiding voor de verslaggever. Voor de volledige lijst van rapportage-methoden en hun parameters, zie de API-referentie voor de verslaggever. De verslaggever bouwt zijn rapporten op basis van de resultaten die door de Logger worden vastgelegd.

note

Deze instructies gelden voor Cypress 10.0 en hoger.

Installatie

The following setup is required because Cypress has both the browser context and node context and since @axe-devtools/reporter is a node module it needs to be instantiated in the node context, which is alleen available when wrapped within cy.task

Voeg het volgende toe in cypress/support/e2e.js:

import '@axe-devtools/cypress';

after(() => {
  cy.getAxeResults().then(async results => {
    const resultsDir = './results/'
    // Use Cypress.spec.name for a unique filename per spec file to avoid overwriting results
    await cy.writeFile(`${resultsDir}${Cypress.spec.name}.json`, results)
    // reportName labels the results and is used as the prefix in the generated report filenames
    await cy.task('reportAsHTML', { resultsDir, reportName: 'axeDevToolsCypress' })
  })
})

Voeg binnen het cypress.config.js-bestand de reporter-taken toe binnen setupNodeEvents:

const { defineConfig } = require('cypress');
const axeDevToolsPlugin = require('@axe-devtools/cypress/dist/plugin');
const { Reporter } = require('@axe-devtools/reporter');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      axeDevToolsPlugin(on);

      on('task', {
        // Reads all .json result files in resultsDir and generates an HTML report;
        // reportName labels the results and is used as the prefix in the generated HTML filenames
        reportAsHTML: async ({ resultsDir, reportName = 'axeDevToolsCypress' }) => {
          const reporter = new Reporter(reportName, resultsDir);
          await reporter.buildHTML(resultsDir);
          return null;
        },
        // Reads all .json result files in resultsDir and generates a CSV report
        reportAsCSV: async ({ resultsDir, reportName = 'axeDevToolsCypress' }) => {
          const reporter = new Reporter(reportName, resultsDir);
          await reporter.buildCSV(resultsDir);
          return null;
        },
        // Reads all .json result files in resultsDir and generates a JUnit XML report
        reportAsJunit: async ({ resultsDir, reportName = 'axeDevToolsCypress' }) => {
          const reporter = new Reporter(reportName, resultsDir);
          await reporter.buildJUnitXML(resultsDir);
          return null;
        },
        // Reads all .json result files in resultsDir and generates a W3C EARL JSON-LD report
        reportAsEARL: async ({ resultsDir, reportName = 'axeDevToolsCypress' }) => {
          const reporter = new Reporter(reportName, resultsDir);
          await reporter.buildEARL(resultsDir);
          return null;
        }
      });

      return config;
    }
  }
});

Voeg het volgende toe in cypress/e2e/test.cy.js:

describe('Axe DevTools Cypress', () => {
  it('Scans the page for accessibility issues', () => {
    // Visit the page to test
    cy.visit('https://broken-workshop.dequelabs.com')
    // Run an accessibility scan; results are collected and written to a file by the after() hook in support/e2e.js
    cy.axeAnalyze()
  })
})

Zie ook

Is this page helpful?

Help us improve this page

Still need help?