Polymer 3.0中a11ySuite测试报错求助:ReferenceError与TypeError问题
解决Polymer 3.0中a11ySuite测试的系列问题
看起来你遇到的是Polymer 3.0 ES模块环境与旧版Web Component Tester(WCT)工具链的兼容性问题,我来帮你一步步拆解解决:
1. 先解决资源404问题(lodash、sinonjs、test-fixture)
这些依赖404是因为WCT在Polymer 3的模块环境下无法自动找到正确的资源路径,需要手动安装并引入:
- 首先确保依赖已安装:
npm install test-fixture sinon lodash --save-dev - 在测试页面的
<head>中,用模块方式引入test-fixture(替代全局引入):<script type="module"> import 'test-fixture/test-fixture.js'; </script>
2. 修复Polymer is not defined与fixtureElement.create is not a function
Polymer 3.0彻底移除了全局Polymer对象,而a11ySuite是为Polymer 1.x/2.x设计的,依赖全局Polymer和旧版测试夹具API。我们需要改用WCT原生的无障碍测试方法,适配模块环境:
修改后的完整测试代码
<!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"> import 'test-fixture/test-fixture.js'; import '../src/verifier.js'; </script> </head> <body> <test-fixture id="BUVA11y"> <template> <verifier id="verifier"></verifier> </template> </test-fixture> <script type="module"> suite('A11y testing', function() { let element; setup(async function() { // 新版test-fixture直接调用fixture()即可获取组件实例 element = fixture('BUVA11y'); // 等待自定义组件完成升级(WCT内置方法) await waitForElement(element); }); test('组件无障碍检查通过', async function() { // 用WCT原生的a11yCheck替代a11ySuite,支持模块环境 await a11yCheck(element); }); }); </script> </body> </html>
3. 解决polymer test超时问题
超时通常是因为组件未完成加载或测试未等待异步操作:
- 确保你的
polymer-cli是兼容Polymer 3的最新版本:npm install -g polymer-cli@latest - 检查项目根目录的
polymer.json,确保测试路径配置正确:{ "test": { "paths": ["test/**/*.html"] } } - 测试中用
await waitForElement(element)确保组件完全初始化后再执行检查,避免因组件未就绪导致的超时。
关键说明
a11ySuite是旧版Polymer测试工具的封装,在ES模块环境下已不再兼容。改用a11yCheck手动编写测试,不仅适配Polymer 3,还能更灵活地控制测试流程。
内容的提问来源于stack exchange,提问作者Moustachiste
相关产品推荐
相关产品推荐

