Cypress 自动化可访问性测试：综合指南

php中文网 2024-10-15 11:18:31

介绍

可访问性是 web 开发的一个重要方面，确保所有用户（包括残障人士）都可以与您的 web 应用程序有效交互。自动化可访问性测试有助于在开发过程的早期识别和解决可访问性问题。在这篇文章中，我们将探索如何使用 cypress 实现自动化可访问性测试，利用 cypress-axe 等工具使您的应用程序更具包容性。

为什么可访问性很重要

法律合规性： 确保您的应用程序符合法律要求，例如美国残疾人法案 (ada) 和网页内容无障碍指南 (wcag)。
用户体验： 改善所有用户（包括残障人士）的整体用户体验。
包容性： 展现对包容性和多样性的承诺，使您的应用程序可供更广泛的受众使用。
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', () =&gt; {
    cy.window({ log: false }).then(window =&gt; {
        let axe = require('axe-core');
        window.eval(axe.source);
    });
});

cypress.commands.add('checka11y', (selector = null, options = null, violationcallback = null, skipfailures = false) =&gt; {
    cy.window({ log: false }).then(window =&gt; {
        let document = window.document;
        return axe.run(document, options).then(({ violations }) =&gt; {
            if (violations.length) {
                cy.wrap(violations, { log: false }).each(violation =&gt; {
                    let nodes = cypress._.get(violation, 'nodes', []);
                    cypress._.each(nodes, node =&gt; {
                        let target = cypress._.get(node, 'target', []);
                        if (target.length) {
                            cypress._.each(target, target =&gt; {
                                cy.wrap(target, { log: false }).then($target =&gt; {
                                    if (!skipfailures) {
                                        cypress.log({
                                            name: 'a11y error!',
                                            message: violation.help,
                                            consoleprops: () =&gt; violation
                                        });

                                        violationcallback &amp;&amp; violationcallback(violation);
                                    }
                                });
                            });
                        }
                    });
                });
            }
        });
    });
});

第 3 步：创建辅助功能测试
现在，让我们创建一个 cypress 测试来检查网页的可访问性。在cypress/e2e目录中创建一个名为accessibility.spec.js的新文件并添加以下代码：

describe('automated accessibility testing with cypress', () =&gt; {
    beforeeach(() =&gt; {
        cy.visit('/');
        cy.injectaxe();
    });

    it('should have no detectable accessibility violations on load', () =&gt; {
        cy.checka11y();
    });

    it('should have no detectable accessibility violations on specific elements', () =&gt; {
        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) =&gt; {
    violations.forEach((violation) =&gt; {
        cy.log(`${violation.id} - ${violation.description}`);
        violation.nodes.forEach((node) =&gt; {
            cy.log(`Node: ${node.target}`);
        });
    });
});