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 te gebruiken @axe-devtools/reporter met @axe-devtools/cypress

Vereisten

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

npm install @axe-devtools/reporter
note

Deze instructies gelden voor Cypress 10.0 en hoger.

Installatie

De volgende installatie is vereist omdat Cypress zowel een browsercontext als een nodecontext heeft en aangezien @axe-devtools/reporter een node-module is, moet het worden geïnstantieerd in de nodecontext, die alleen beschikbaar is wanneer ingepakt binnen cy.task

Voeg het volgende 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' })
  })
})

In de cypress.config.js -bestand, voeg 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;
        }
      });

      return config;
    }
  }
});

Voeg het volgende 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?