介绍
可访问性是 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', () => {
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');
});
});
在此示例中，我们对整个页面以及页眉、主要内容和页脚等特定元素执行可访问性检查。
自定义辅助功能检查
您可以通过提供选项和配置规则来自定义可访问性检查。例如，您可以忽略某些规则或仅运行特定检查。
示例：忽略特定规则
经过一段时间的开发，以及内部测试，同程网联盟景区新版程序正式发布推出，感谢广大联盟会员一直以来的支持与关注！ 同程网联盟景区新版程序新功能介绍：1.统一的页面风格。页面风格将与随后推出的度假线路、酒店、机票以及融合版联盟程序风格保持一直；2.新增后台管理系统。可更加方便快捷的对网站进行个性化设置；3.动态与伪静态切换。后台操作，简单便捷；4.缓存管理。新增缓存，提高网站访问速度，后台可定期清理；5
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}`);
});
});
});
可访问性测试的最佳实践
- 尽早集成： 在开发过程中尽早集成可访问性测试，以更快地发现问题。
- 定期测试： 定期运行可访问性测试作为 ci/cd 管道的一部分，以确保持续合规性。
- 教育您的团队： 教育您的开发团队有关可访问性最佳实践和指南。
- 使用手动测试：结合自动和手动测试以涵盖可访问性的所有方面，因为自动化工具可能无法捕获所有内容。
结论
使用 cypress 和 cypress-axe 进行自动可访问性测试是确保所有用户都可以访问您的 web 应用程序的强大方法。通过将可访问性检查集成到测试过程中，您可以及早发现并修复问题，提供更好的用户体验并确保符合可访问性标准。遵循本指南中概述的最佳实践，使您的应用程序更具包容性和可访问性。
测试愉快！
