Generieren von Berichten mit Cypress
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.
- Erhalten eines API-Schlüssels für axe Reports erklärt, wie Sie einen API-Schlüssel erhalten, um mit der Verwendung von axe Reports zu beginnen.
– 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.