Axe DevTools 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
CypressでAxe DevTools for Webを使ったアクセシビリティテストを書く
Not for use with personal data
Axe DevToolsを使用したアクセシビリティスキャンの結果を生成するのは、1行のコードで簡単に行うことができます。これらの結果は生のまま利用することも、アサーションライブラリと併用することも、アクセシビリティレポートを作成するのに使用することもできます。
note
これらの指示はCypress 10.0以降に適用されます。
前提条件
Axe DevTools を使用してページをテストするには、まずプロジェクトにインストールされている必要があります。このステップをまだ完了していない場合は、インストールガイドを参照してください。
プロジェクト構成
.
├── package.json
├── cypress.config.js
├── cypress
│ ├── e2e
│ │ └── test.cy.js
│ └── support
│ └── e2e.jsセットアップ
Axe DevTools Cypressを使用するには、以下が必要です。
次の行をcypress/support/e2e.jsに含めてください：
import '@axe-devtools/cypress';cypress.config.jsファイル内には、以下を追加する必要があります：
const { defineConfig } = require('cypress');
const axeDevtoolsCypressPlugin = require("@axe-devtools/cypress/dist/plugin");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
axeDevtoolsCypressPlugin(on);
return config;
}
}
});完全なサンプルファイル
各it()ブロックの内部でcy.axeAnalyze()とcy.getAxeResults()を呼び出し、他のテストの結果が上書きされないように、各テストにユニークなファイル名を使用してください。
e2eディレクトリのtest.cy.jsファイルにこのコードを追加してください：
describe('Axe DevTools Cypress', () => {
it('Scans the home page for accessibility issues', () => {
// Visit the page to test
cy.visit('https://broken-workshop.dequelabs.com')
// Run an accessibility scan on the current page
cy.axeAnalyze()
// Write results to a uniquely named file; use a different name for each test to avoid overwriting
cy.getAxeResults().then(results => {
cy.writeFile('./results/broken-workshop.json', results)
})
})
})