Cypressでのレポート生成
@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()
})
})関連情報
- JSONアクセシビリティ結果をaxe Reportsにアップロードする は、結果をaxe Reportsにアップロードする方法を説明します。
- axe Reports APIキーの取得 は、axe Reportsの使用を開始するためのAPIキーを取得する方法を説明します。
- レポートの作成とフィルタリング は、JSONアクセシビリティ結果からCSV、XML、またはHTMLでアクセシビリティレポートを作成する方法を示します。また、このツールを使用して重大度で出力をフィルタリングすることもできます。
- ディスク上のJSON結果の保存方法 は、JSONアクセシビリティ結果のファイル命名規則を説明します。
- CLIを使用してアクセシビリティ結果をaxe Developer Hubに送信する は、
.json結果ファイルを axe Developer Hubにアップロードする方法を示します。
