Generieren von Berichten mit 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
Not for use with personal data

So nutzen Sie es @axe-devtools/reporter mit @axe-devtools/cypress

Voraussetzungen

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

npm install @axe-devtools/reporter

Einrichtung

Die folgende Einrichtung ist erforderlich, weil Cypress sowohl den Browserkontext als auch den Knotenkontext hat und @axe-devtools/reporter weil es sich um ein Knotenmodul handelt , muss es im Knotenkontext instantiiert werden , der nur verfügbar ist, wenn er in Folgendes eingebettet ist: cy.task

Fügen Sie die folgende Zeile in cypress/support/index.js ein

import '@axe-devtools/cypress';

after(() => {
  cy.getAxeResults().then(async results => {
    // create the directory with results
    const resultsDir = './results/'
    await cy.writeFile(`${resultsDir}results.json`, results)
    await cy.task('reportAsHTML', { resultsDir })
  })
})

Fügen Sie die folgende Zeile in cypress/plugins/index.js ein

const axeDevToolsPlugin = require('@axe-devtools/cypress/dist/plugin');
const Reporter = require('@axe-devtools/reporter').default

module.exports = (on, config) => {
  axeDevToolsPlugin(on)

  on('task', {
    // task to create HTML report
    reportAsHTML: async ({ resultsDir, branding = 'axeDevToolsCypress' }) => {
      reporter = new Reporter(branding, resultsDir)
      await reporter.buildHTML(resultsDir);
      return null
    },
    // task to create CSV report
    reportAsCSV: async ({ resultsDir, branding = 'axeDevToolsCypress' }) => {
      reporter = new Reporter(branding, resultsDir)
      await reporter.buildCSV(resultsDir);
      return null
    },
    // task to create Junit XML report
    reportAsJunit: async ({ resultsDir, branding = 'axeDevToolsCypress' }) => {
      reporter = new Reporter(branding, resultsDir)
      await reporter.buildJUnitXML(resultsDir);
      return null
    }
  })
}

Fügen Sie die folgende Zeile in cypress/integration/test.spec.js ein

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

Siehe auch

Hochladen von JSON-Zugänglichkeitsergebnissen in axe Reports beschreibt, wie Sie Ihre Ergebnisse in axe Reports hochladen.

Berichte erstellen und filtern zeigt, wie Sie aus Ihren JSON-Zugänglichkeitsergebnissen Zugänglichkeitsberichte im CSV-, XML- oder HTML-Format erstellen können. Mit diesem Tool können Sie Ihre Ausgabe auch nach Schweregrad filtern. – So werden JSON-Ergebnisse auf der Festplatte gespeichert beschreibt die Dateibenennungskonventionen für JSON-Zugänglichkeitsergebnisse.