Generare report con 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

Integrare il pacchetto @axe-devtools/reporter con @axe-devtools/cypress per generare report

Not for use with personal data

Come utilizzare @axe-devtools/reporter con @axe-devtools/cypress

Prerequisiti

Per poter utilizzare il reporter di Axe DevTools è necessario installarlo nel progetto.

npm install @axe-devtools/reporter

Questa guida copre la configurazione specifica per Cypress. Per una panoramica generale del reporter e dei suoi formati di report, vedere la Guida del reporter. Per l'elenco completo dei metodi di creazione dei report e dei loro parametri, vedere il Riferimento API del reporter. Il reporter costruisce i suoi report dai risultati registrati dal Registratore.

note

Queste istruzioni si applicano a Cypress 10.0 e versioni successive.

Configurazione

La seguente configurazione è necessaria perché Cypress ha sia il contesto del browser sia il contesto del nodo e poiché @axe-devtools/reporter è un modulo nodo, deve essere istanziato nel contesto del nodo, che è solo disponibile quando è avvolto all'interno di cy.task

Includi quanto segue 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' })
  })
})

All'interno del file cypress.config.js, aggiungi i task del reporter dentro 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;
    }
  }
});

Includi quanto segue 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()
  })
})

Vedi anche

Is this page helpful?

Help us improve this page

Still need help?