Berichte mit Cypress generieren

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

Integration des @axe-devtools/reporter-Pakets mit @axe-devtools/cypress zur Erstellung von Berichten

Not for use with personal data

Wie man @axe-devtools/reporter mit @axe-devtools/cypress nutzt

Voraussetzungen

Um den Axe DevTools Reporter verwenden zu können, müssen Sie ihn zuerst in Ihrem Projekt installieren.

npm install @axe-devtools/reporter

Diese Anleitung behandelt die spezifische Einrichtung für Cypress. Für einen allgemeinen Überblick über den Reporter und seine Berichtsformate siehe die Reporteranleitung. Für die vollständige Liste der Berichtserstellungsverfahren und ihrer Parameter siehe die Reporter-API-Referenz. Der Reporter erstellt seine Berichte aus den vom Logger protokollierten Ergebnissen.

note

Diese Anweisungen gelten für Cypress 10.0 und höher.

Einrichtung

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 nur available when wrapped within cy.task

Fügen Sie Folgendes in cypress/support/e2e.js ein:

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

Fügen Sie im cypress.config.js-Datei die Reporter-Aufgaben innerhalb von setupNodeEvents hinzu:

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

Fügen Sie Folgendes in cypress/e2e/test.cy.js ein:

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

Siehe auch

Is this page helpful?

Help us improve this page

Still need help?