輔助功能是 Web 開發的重要方面，確保所有使用者（包括殘障人士）都可以與您的 Web 應用程式有效互動。自動化可訪問性測試有助於在開發過程的早期識別和解決可訪問性問題。在這篇文章中，我們將探索如何使用 Cypress 實現自動化可訪問性測試，利用 cypress-axe 等工具使您的應用程式更具包容性。
為了在 Cypress 中執行自動化可訪問性測試，我們將使用 cypress-axe 插件，它將 Axe 可訪問性引擎與 Cypress 整合。
第 1 步：安裝 Cypress 和 cypress-axe
首先，請確保您的專案中安裝了 Cypress。如果沒有，您可以使用以下命令安裝它：
npm install cypress --save-dev
接下來，安裝 cypress-axe 外掛：
npm install cypress-axe --save-dev
第 2 步：設定 cypress-axe
在 cypress/support 目錄中建立一個名為 Commands.js 的新文件，並新增以下程式碼以匯入和配置 cypress-axe：
import 'cypress-axe';
Cypress.Commands.add('injectAxe', () => {
cy.window({ log: false }).then(window => {
let axe = require('axe-core');
window.eval(axe.source);
});
});
Cypress.Commands.add('checkA11y', (selector = null, options = null, violationCallback = null, skipFailures = false) => {
cy.window({ log: false }).then(window => {
let document = window.document;
return axe.run(document, options).then(({ violations }) => {
if (violations.length) {
cy.wrap(violations, { log: false }).each(violation => {
let nodes = Cypress._.get(violation, 'nodes', []);
Cypress._.each(nodes, node => {
let target = Cypress._.get(node, 'target', []);
if (target.length) {
Cypress._.each(target, target => {
cy.wrap(target, { log: false }).then($target => {
if (!skipFailures) {
Cypress.log({
name: 'a11y error!',
message: violation.help,
consoleProps: () => violation
});
violationCallback && violationCallback(violation);
}
});
});
}
});
});
}
});
});
});
第 3 步：建立輔助功能測試
現在，讓我們建立一個 Cypress 測試來檢查網頁的可訪問性。在 cypress/e2e 目錄中建立一個名為accessibility.spec.js的新檔案並新增以下程式碼：
describe('Automated Accessibility Testing with Cypress', () => {
beforeEach(() => {
cy.visit('/');
cy.injectAxe();
});
it('should have no detectable accessibility violations on load', () => {
cy.checkA11y();
});
it('should have no detectable accessibility violations on specific elements', () => {
cy.checkA11y('header');
cy.checkA11y('main');
cy.checkA11y('footer');
});
});
在此範例中，我們對整個頁面以及頁首、主要內容和頁尾等特定元素執行可訪問性檢查。
您可以透過提供選項和設定規則來自訂可存取性檢查。例如，您可以忽略某些規則或僅執行特定檢查。
範例：忽略特定規則
cy.checkA11y(null, {
rules: {
'color-contrast': { enabled: false }
}
});
範例：執行特定檢查
cy.checkA11y(null, {
runOnly: {
type: 'tag',
values: ['wcag2a', 'wcag2aa']
}
});
您可以透過提供回呼函數來記錄或處理違規來處理可訪問性違規。例如：
cy.checkA11y(null, null, (violations) => {
violations.forEach((violation) => {
cy.log(`${violation.id} - ${violation.description}`);
violation.nodes.forEach((node) => {
cy.log(`Node: ${node.target}`);
});
});
});
使用 Cypress 和 cypress-axe 進行自動可訪問性測試是確保所有使用者都可以存取您的 Web 應用程式的強大方法。透過將可訪問性檢查整合到測試過程中，您可以及早發現並修復問題，提供更好的使用者體驗並確保符合可訪問性標準。遵循本指南中概述的最佳實踐，使您的應用程式更具包容性和可訪問性。
測試愉快！
以上是Cypress 自動化可訪問性測試：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！
