Блог

Я изучаю инструменты, которые могу использовать для автоматического тестирования доступности, и хотел попробовать axe-core с TestCafe. Я сторонник TestCafe, мне нравится, что это легкий инструмент, который не зависит от WebDriver. Документы отличные, а написание сценариев простое.

Однако я обнаружил, что @testcafe-сообщество/axe и его предшественник axe-testcafe сообщают не обо всех нарушениях, в то время как axe-core с селеном и axe-webdriverjs сообщают. Например, при работе с axe-webdriverjs у меня есть следующий код и результирующий вывод, показывающий нарушения страницы локального хоста, которую я проверяю —

Код:

 var AxeBuilder = require('axe-webdriverjs');
var WebDriver = require('selenium-webdriver');

const path = require('path');
process.env.PATH = path.resolve(`__dirname/../WebDriver/bin/Firefox/0.29.1`)   ':'   process.env.PATH;

var driver = new WebDriver.Builder()
  .forBrowser('firefox')
  .build();

driver
  //.get('https://dequeuniversity.com/demo/mars/')
  .get('http://localhost:3000')
  .then(function() {
    AxeBuilder(driver).analyze(function(err, results) {
      if (err) {
        // Handle error somehow
      }
      console.log(results.violations);
    });
  });
 

Выход:

 > axe-webdriverjs-tests@1.0.0 test1 /Users/nabeen.jamal/gitlab.com/notifications-service/text-messaging-application/tma-test/app/axe-webdriverjs-tests
> node test/axe.test1.js

[
  {
    description: 'Ensures all page content is contained by landmarks',
    help: 'All page content must be contained by landmarks',
    helpUrl: 'https://dequeuniversity.com/rules/axe/3.5/region?application=webdriverjs',
    id: 'region',
    impact: 'moderate',
    nodes: [ [Object], [Object] ],
    tags: [ 'cat.keyboard', 'best-practice' ]
  }
]
 

Используя @testcafe-сообщество/axe и следуя инструкциям «Как использовать» на странице проекта github (https://github.com/testcafe-community/axe), у меня есть следующий код и результирующий вывод, который не показывает нарушений одной и той же страницы локального хоста.

Код:

 import { checkForViolations } from '@testcafe-community/axe';

fixture `TestCafe tests with Axe`
    //.page `http://example.com`;
    .page `http://localhost:3000`;

test('Automated accessibility testing', async t => {
    // do stuff on your page
    await checkForViolations(t);
});
 

Выход:

 nabeen.jamal@DEM-C02DFG1UMD6M axe-testcafe-tests % npx testcafe --config-file cfg/testcaferc.json chrome src/test1.js 
(node:88006) ExperimentalWarning: Conditional exports is an experimental feature. This feature could change at any time
(node:88006) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time
 Running tests in:
 - Chrome 90.0.4430.212 / macOS 10.15.7

 TestCafe tests with Axe
 ✓ Automated accessibility testing


 1 passed (0s)
 

Как видно из выходных данных, тест @testcafe-community/axe проходит и не показывает нарушений, в то время как axe-webdriverjs (и axe-core с селеном) показывает нарушение в отношении «всего содержимого страницы, содержащегося в ориентирах».

Является ли это ограничением в @testcafe-community/axe, или вам нужно указать правила в параметре параметров axe.run, чтобы он выполнял проверки отображаемого содержимого загруженной страницы?

В документации для axe-core указано, что вам необходимо указать, какие правила вы собираетесь протестировать с использованием axe.run опций.

Ориентиры обсуждаются в WCAG 1.3.6., который является элементом «уровня AAA«. Похоже, что axe-core способен тестировать только на «Уровне A» и «Уровне AA«. В вашем примере этот элемент не указан инструментом как ошибка WCAG, а скорее рекомендация по лучшей практике. Возможно, именно поэтому он не отображается в других ваших инструментах.

Если вы можете легко выполнить эту рекомендацию, то я бы сказал, что продолжайте и сделайте это. Если нет, я бы не позволил чему-то подобному помешать запуску моего кода в производство. Достопримечательности приятны, но гораздо важнее, чтобы вы соответствовали всем требованиям «Уровня А» и как можно большему количеству требований «Уровня АА«, насколько это возможно.

Стоит отметить, что любой автоматизированный инструмент тестирования доступности-это не более чем отправная точка для ручной оценки. Эти инструменты часто генерируют тонны ложных срабатываний (и иногда пропускают важные вещи!) потому что часто невозможно алгоритмически определить, действительно ли что-то полезно для посетителей-людей.

Я также видел страницы/приложения, которые передают автоматизированные инструменты без ошибок (Wave, Axe и т. Д.), Но их совершенно невозможно использовать с помощью вспомогательных технологий.

Я не уверен на 100%, как это сделать, но мои тесты с использованием axe-testcafe и @testcafe-community/axe теперь показывают нарушение —

  Running tests in:
 - Chrome 90.0.4430.212 / macOS 10.15.7

 TestCafe tests with Axe
 ✓ Verify Welcome Page loads properly
 ✖ Automated accessibility testing

   1) AssertionError: 1 violations found:
      1) All page content must be contained by landmarks
      * https://dequeuniversity.com/rules/axe/3.5/region?application=axeAPI
      * cat.keyboard, best-practice
      * moderate
      * region
          "#global-cookie-message"
        ".app-phase-banner"
      : expected false to be truthy

      Browser: Chrome 90.0.4430.212 / macOS 10.15.7

         67 |const checkForViolations = async (t, context, options) => {
         68 |    const { error, results } = await axeCheck(t, context, options);
         69 |
         70 |    await t.expect(error).notOk();
         71 |
       > 72 |    await t.expect(results.violations.length === 0).ok(createReport(results.violations));
         73 |}
         74 |
         75 |
         76 |module.exports = {
         77 |    runAxe,

         at checkForViolations
      (/Users/nabeen.jamal/gitlab.com/notifications-service/text-messaging-application/tma-test/app/axe-testcafe-tests/node_modules/@testcafe-community/axe/index.js:72:53)



 1/2 failed (1s)
 

Мне не нужно было указывать правила в параметре options для axe.run — я сделал это, но с или без, теперь о нарушении сообщается.

Однако я удалил и переустановил пакеты узлов, и я думаю, что версия axe-core отличается от той, что была у меня ранее. Вот мои зависимости и версии в моем пакете.json, которые работают для меня —

 {
  "name": "axe-testcafe-tests",
  "version": "1.0.0",
  "description": "axe-core and TestCafe testware to cover Accesibility Testing of the TMA App",
  "main": "index.js",
  "dependencies": {
    "testcafe": "^1.14.2"
  },
  "devDependencies": {
    "@testcafe-community/axe": "^3.5.0",
    "axe-core": "^3.5.5",
    "axe-testcafe": "^3.0.0"
  },
<-- snip -->
 

Еще раз спасибо @Josh за вашу помощь. Возможно, это могло бы помочь другим.