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

@axe-devtools/reporterパッケージを@axe-devtools/cypressと統合してレポートを生成する方法

Not for use with personal data

利用方法 @axe-devtools/reporter について @axe-devtools/cypress

前提条件

Axe DevToolsレポーターを使用するには、まずプロジェクトにインストールする必要があります。

npm install @axe-devtools/reporter
note

これらの指示はCypress 10.0以降に適用されます。

セットアップ

次のセットアップが必要です。Cypressはブラウザコンテキストとノードコンテキストの両方を持つため、 @axe-devtools/reporter はノードモジュールであり、ノードコンテキスト内で初期化する必要があるためです。それは のみ 使用可能で、次の場合にラップされます cy.task

以下を含めてください 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' })
  })
})

内に cypress.config.js 、レポータータスクを追加します 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;
    }
  }
});

以下を含めてください 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()
  })
})

関連情報