1

我正在尝试让a11ySuitePolymer 3.0 测试正常工作。

当我使用 运行测试时polymer test,测试超时,我可以在自动浏览器的控制台中看到以下错误:

Uncaught ReferenceError: Polymer is not defined
at Suite.a11ySuite.eachTest (a11ySuite.js:51)
at mocha.js:1550
at Object.exports.forEach (mocha.js:1595)
at Suite.eachTest (mocha.js:1550)
at Runner.grepTotal (mocha.js:1224)
at Runner.grep (mocha.js:1215)
at new Runner (mocha.js:1197)
at Mocha.run (mocha.js:592)
at _runMocha (extend.js:41)
at done (util.js:34)

如果我在调试模式下从polymer serveurl 运行,我会收到此错误:

a11ySuite.js:49 Uncaught TypeError: fixtureElement.create is not a function
at Suite.a11ySuite.eachTest (a11ySuite.js:49)
at mocha.js:1550
at Object.exports.forEach (mocha.js:1595)
at Suite.eachTest (mocha.js:1550)
at Runner.grepTotal (mocha.js:1224)
at Runner.grep (mocha.js:1215)
at new Runner (mocha.js:1197)
at Mocha.run (mocha.js:592)
at _runMocha (extend.js:41)
at done (util.js:34)

这之前还有一堆来自 mocha 的 404,关于 lodash、sinonjs 和 test-fixture,假设这是因为它是在serve模式下运行的。

这是我的测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Verifier - a11y test</title>

    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="../node_modules/web-component-tester/browser.js"></script>
    <script type="module" src="../src/verifier.js"></script>
</head>
<body>
    <test-fixture id="BUVA11y">
        <template>
            <verifier id="verifier"></verifier>
        </template>
    </test-fixture>

    <script>
      suite('A11y testing', function() {
        a11ySuite('BUVA11y');
      });
    </script>
</body>
</html>

我在网上找不到更多信息,而且文档在这个主题上非常有限(实际上并不精确)。

4

1 回答 1

1

a11ySuitewct-browser-legacy已移至web-component-tester版本6.4.3。鉴于“传统”命名,我猜它已被弃用。我假设它是这样使用的:

<script type="module">
  import {a11ySuite} from 'wct-browser-legacy/a11ySuite.js';
  a11ySuite('view1'); // "view1" == template name
</script>

但是我无法让它在其他干净的polymer-3-starter-kit项目中工作(即,该a11ySuite属性存在于模块中,但始终存在undefined)。在定义该变量的位置设置断点,我可以看到该变量实际上从未设置,因为pre-require无论出于何种原因,Mocha 事件处理程序都不会被调用。

但是,根据以下测试代码axe-core, (via )似乎pwa-helpers是 Polymer 3 中使用的最新a11y测试工具:pwa-starter-kit

<script type="module">
  import 'axe-core/axe.min.js';
  import {axeReport} from 'pwa-helpers/axe-report.js';

  suite('views a11y tests', function() {
    test('my-view1', function() {
      const el = fixture('view1');
      return axeReport(el);
    });
    ...
  });
</script>
于 2018-05-24T23:20:32.290 回答