Cypress 自動化可訪問性測試：綜合指南

介紹

輔助功能是 Web 開發的重要方面，確保所有使用者（包括殘障人士）都可以與您的 Web 應用程式有效互動。自動化可訪問性測試有助於在開發過程的早期識別和解決可訪問性問題。在這篇文章中，我們將探索如何使用 Cypress 實現自動化可訪問性測試，利用 cypress-axe 等工具使您的應用程式更具包容性。

為什麼可訪問性很重要

1. 法律合規性：確保您的應用程式符合法律要求，例如《美國殘疾人法案》(ADA) 和《網頁內容無障礙指南》(WCAG)。
2. 使用者體驗：改善所有使用者（包括身心障礙使用者）的整體使用者體驗。
3. 包容性： 展現出對包容性和多樣性的承諾，讓您的應用程式能夠為更廣泛的受眾所使用。
4. SEO 優勢： 改善搜尋引擎優化，因為搜尋引擎青睞可訪問的網站。

在 Cypress 中設定自動可訪問性測試

為了在 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}`);
        });
    });
});

可訪問性測試的最佳實踐

1. 儘早整合：在開發過程中儘早整合可訪問性測試，以更快地發現問題。
2. 定期測試：定期執行無障礙測試作為 CI/CD 管道的一部分，以確保持續合規性。
3. 教育您的團隊： 教育您的開發團隊以了解無障礙最佳實踐和指南。
4. 使用手動測試：結合自動和手動測試以涵蓋可訪問性的所有方面，因為自動化工具可能無法捕獲所有內容。

結論

使用 Cypress 和 cypress-axe 進行自動可訪問性測試是確保所有使用者都可以存取您的 Web 應用程式的強大方法。透過將可訪問性檢查整合到測試過程中，您可以及早發現並修復問題，提供更好的使用者體驗並確保符合可訪問性標準。遵循本指南中概述的最佳實踐，使您的應用程式更具包容性和可訪問性。

測試愉快！

以上是Cypress 自動化可訪問性測試：綜合指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！