辅助功能是 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中文网其他相关文章！
