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中文网其他相关文章！