Nightwatch 中的無障礙 (A11y) 測試

概觀

為了將無障礙測試標準化，W3C 發布了網頁內容無障礙指南 (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 的完整清單

建議內容