Selenium webdriver @testcafe社区/axe不会像其他工具那样报告违规行为

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

然而，我发现@testcafe community/axe及其前身axe-testcafe并没有报告所有违规行为，而带有selenium的axe-core和axe-webdriverjs则报告所有违规行为。例如，使用axe webdriverjs运行时，我有以下代码和结果输出，显示了我正在检查的本地主机页面的违规行为-

代码：

输出：

> 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' ]
  }
]

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并遵循项目github页面（）上的“How to use”，我得到了以下代码和结果输出，显示没有违反相同的localhost页面

代码：

输出：

> 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' ]
  }
]

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（以及带有selenium的axe core）显示了关于“由地标包含的所有页面内容”的冲突

这是@testcafe community/axe中的一个限制，还是您必须在axe.run的options参数中指定规则，以便它对加载页面的呈现内容执行检查？

您需要指定使用

axe.run

选项测试哪些规则的状态

中讨论了地标，这是一个“AAA级”项目。在您的示例中，axe core似乎没有被工具列为WCAG故障，而是最佳实践建议。这可能就是它没有出现在其他工具中的原因

如果你能很容易地实现这个建议，那么我会说，去做吧。如果不是，我不会让这样的事情阻止我的代码投入生产。地标很好，但更重要的是，您必须满足所有“A级”要求和尽可能多的“AA级”要求

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

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

您需要指定使用Axe.run选项测试哪些规则的状态

中讨论了地标，这是一个“AAA级”项目。在您的示例中，axe core似乎没有被工具列为WCAG故障，而是最佳实践建议。这可能就是它没有出现在其他工具中的原因

如果你能很容易地实现这个建议，那么我会说，去做吧。如果不是，我不会让这样的事情阻止我的代码投入生产。地标很好，但更重要的是，您必须满足所有“A级”要求和尽可能多的“AA级”要求

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

---

我也看到过页面/应用程序通过自动工具时没有错误（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的版本与我之前的版本不同。以下是我的依赖项和我的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 -->

{
“名称”：“axe testcafe测试”，
“版本”：“1.0.0”，
“说明”：“axe core和TestCafe测试软件涵盖TMA应用程序的可访问性测试”，
“main”：“index.js”，
“依赖项”：{
“testcafe”：“^1.14.2”
},
“依赖性”：{
“@testcafe community/axe”：“^3.5.0”，
“斧芯”：“^3.5.5”，
“axe testcafe”：“^3.0.0”
},

---

再次感谢@Josh的帮助。也许这会对其他人有所帮助。

我不是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的版本与以前不同-

{
  "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 -->

{
“名称”：“axe testcafe测试”，
“版本”：“1.0.0”，
“说明”：“axe core和TestCafe测试软件涵盖TMA应用程序的可访问性测试”，
“main”：“index.js”，
“依赖项”：{
“testcafe”：“^1.14.2”
},
“依赖性”：{
“@testcafe community/axe”：“^3.5.0”，
“斧芯”：“^3.5.5”，
“axe testcafe”：“^3.0.0”
},

---

再次感谢@Josh提供的帮助。也许这会对其他人有所帮助。

感谢您的回复和这些有用的信息。我将在

axe run

选项中指定规则，并查看这些规则给出了什么。我将发回。当然，我明白自动可访问性测试只不过是手动检查的起点使用辅助技术对抗WCAG。感谢您的回复和这些有用的信息。I