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;
}
}
});完全なサンプルファイル
cy.axeAnalyze() および cy.getAxeResults() を各 it() ブロック内で呼び出し、各テストに対してユニークなファイル名を使用して、他のテストの結果が上書きされないようにします。
このコードを test.cy.js ディレクトリ内の e2e ファイルに追加してください：
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)
})
})
})