axe-core 开源项目教程

axe-core 开源项目教程

axe-coreAccessibility engine for automated Web UI testing项目地址:https://gitcode.com/gh_mirrors/ax/axe-core

项目介绍

axe-core 是一个用于网站和其他基于 HTML 的用户界面的无障碍测试引擎。它快速、安全、轻量级，旨在与任何现有的测试环境无缝集成，使您能够在常规功能测试的同时自动化无障碍测试。axe-core 由 Deque Systems 开发和维护，支持多种浏览器，并提供了丰富的规则集来检查 WCAG 2.0、2.1 和 2.2 的 A、AA 和 AAA 级别，以及一些最佳实践。

项目快速启动

要开始使用 axe-core，首先需要通过 npm 安装它：

npm install axe-core --save-dev

安装完成后，在您的测试文件中引入 axe-core 并运行测试：

// 引入 axe-core
const axe = require('axe-core');

// 在您的测试环境中运行 axe
axe.run(document, {}, function (err, results) {
  if (err) throw err;
  console.log(results);
});

应用案例和最佳实践

axe-core 可以集成到各种测试框架中，如 Jest、Mocha 等。以下是一个使用 Jest 的示例：

const axe = require('axe-core');

test('页面无障碍测试', async () => {
  document.body.innerHTML = `
    <button>按钮</button>
  `;

  const results = await new Promise((resolve, reject) => {
    axe.run(document, {}, (err, results) => {
      if (err) return reject(err);
      resolve(results);
    });
  });

  expect(results.violations.length).toBe(0);
});

典型生态项目

axe-core 不仅是一个独立的库，还与其他工具和扩展集成，提供了更全面的解决方案：

1. axe DevTools: 一个浏览器扩展，提供自动化的无障碍测试和详细的修复指导。
2. axe-linter: 一个 VSCode 扩展，可以在开发过程中实时检查代码的无障碍问题。
3. axe-core-npm: axe-core 的 npm 包，方便在 Node.js 环境中使用。

通过这些工具和扩展，您可以更有效地进行无障碍测试，确保您的网站对所有用户都是友好的。

axe-coreAccessibility engine for automated Web UI testing项目地址:https://gitcode.com/gh_mirrors/ax/axe-core