@testcafe-community/axe 不报告其他工具所做的违规行为

Question

我正在探索可用于自动辅助功能测试的工具，并想尝试将 axe-core 与 TestCafe 结合使用。我是 TestCafe 的拥护者，我喜欢它是一个轻量级的工具，并且不依赖于 WebDriver。文档很棒，脚本编写也很简单。

然而，我发现@testcafe-community/axe 及其前身 axe-testcafe 不会报告所有违规行为，而 axe-core with selenium 和 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-community/axe 并遵循项目 github 页面 (https://github.com/testcafe-community/axe) 上的 'How to use'，我有以下代码和结果输出，显示没有违反相同的本地主机页面。

代码：

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 with selenium）显示关于“地标包含的所有页面内容”的违规行为。

这是@testcafe-community/axe的限制，还是你必须在axe.run的选项参数中指定规则，才能对加载页面的呈现内容进行检查？

Answer 1

documentation for axe-core 声明您需要指定要使用 axe.run 选项测试哪些规则。

地标在 WCAG 1.3.6., which is a "Level AAA" item. It appears that axe-core is only capable of testing against "Level A" and "Level AA." 中进行了讨论在您的示例中，工具未将项目列为 WCAG 故障，而是最佳实践建议。这可能就是它没有出现在您的其他工具中的原因。

如果您可以轻松实施此建议，那么我会说继续做吧。如果没有，我不会让这样的事情阻止我的代码投入生产。地标固然好，但更重要的是满足所有“A 级”要求和尽可能多的“AA 级”要求尽你所能。

值得注意的是，任何自动化的可访问性测试工具都不过是手动评估的起点。这些工具通常会产生大量误报（有时会遗漏重要的事情！），因为通常无法通过算法确定某些内容是否对人类访问者真正有用。

我还看到 pages/apps 通过自动化工具（Wave、Axe 等）没有错误，但它们完全不可能与辅助技术一起使用。

Answer 2

我不是 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)

我不必在 axe.run 的选项参数中指定规则 - 我确实这样做了，但不管有没有，现在都会报告违规行为。

但是我确实卸载并重新安装了节点包，我认为 axe-core 的版本与我以前的版本不同。这是我的依赖项和我的 package.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 的帮助。也许这对其他人有帮助。

@testcafe-community/axe 不报告其他工具所做的违规行为

@testcafe-community/axe does not report violations that other tools do

automation

accessibility

selenium-webdriver

testcafe

axe