Nightwatch 中的无障碍 (A11y) 测试

概述

为了标准化无障碍测试，W3C 发布了 Web 内容无障碍指南 (WCAG) 来标准化使网站对所有人包容的做法。从 v2.3 开始，无障碍测试支持现在已内置到 Nightwatch 中，使用由 Deque Systems 开发的 aXe-core 包。

无障碍测试根据 WCAG 规则和其他行业公认的最佳实践，针对一组启发式方法来审核呈现的 DOM。aXe 库拥有超过 90 个关于无障碍测试的不同方法，并且会自动发现高达 57% 的 WCAG 问题。

运行所有规则

使用命令 .axeInject() 首先注入 aXe 库，然后简单地使用 axeRun() 命令运行所有无障碍测试，如下所示

describe('accessibility testing', function() {
  

  it('run all accessibility rules', function(browser) {
    browser
      .navigateTo('https://www.w3.org/WAI/demos/bad/after/home.html')
      .axeInject()
      .axeRun('body');
  });
});

运行选定规则

或者，您可以选择仅运行选定的测试，方法是在数组中传递 规则 ID，如下所示

describe('accessibility testing', function() {
  

  it('accessibility rule subset', function(browser) {
    browser
      .navigateTo('https://www.w3.org/WAI/demos/bad/after/home.html')
      .axeInject()
      .axeRun('body', {
        runOnly: ['color-contrast', 'image-alt'],
      });
  });
});

禁用选定规则

您还可以选择运行所有测试并排除一些测试。

describe('accessibility testing', function() {
  

  it('accessibility rule subset', function(browser) {
    browser
      .navigateTo('https://www.w3.org/WAI/demos/bad/after/home.html')
      .axeInject()
      .axeRun('body', {
        rules: {
            'color-contrast': {
                enabled: false
            },
            'region': {
                enabled: false
            }
        }
    });
  });
});

您可以在 Axe Github 页面 上找到规则 ID 的完整列表

推荐内容