导入官方paper/iron库后Polymer测试在Chrome中失效的解决咨询

我之前也碰到过类似的Chrome测试异常情况，结合Polymer 2.x的特性和Chrome的特性，给你几个实用的排查和解决方向：

1. 确认依赖安装与路径正确性 #

• 先确保你是通过bower install --save paper-input iron-icons命令正确安装了这些元素，bower_components目录里必须有完整的paper-input和iron-icons文件夹。有时候自动依赖解析会漏掉一些子依赖，手动安装能避免这个问题。
• 检查测试文件（比如test/xxx-element-test.html）里的导入路径是否准确，Chrome对相对路径的容错性比Firefox低。举个正确的导入例子：

  <!-- 先导入Polymer核心，再导入其他元素 -->
  <link rel="import" href="../../bower_components/polymer/polymer.html">
  <link rel="import" href="../../bower_components/paper-input/paper-input.html">
  <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
  

2. 处理Chrome的安全策略限制 #

Chrome默认对本地资源的跨域和文件访问限制很严格，哪怕用Polymer CLI启动测试服务器，偶尔也会因为缓存或配置问题触发限制：

• 确保你是用polymer test命令启动测试，它会自动启动本地HTTP服务器（默认是http://localhost:8081），而非直接打开本地HTML文件。
• 如果还是报错，可以临时给Chrome加启动参数绕过限制（仅测试用，生产环境禁止）：

  chrome --allow-file-access-from-files --disable-web-security
  

  用这个命令启动Chrome后再运行测试，能快速判断是不是安全策略导致的问题。

3. 检查Polymer CLI的测试配置 #

打开项目根目录的polymer.json，确认extraDependencies字段包含了Iron/Paper元素的资源路径，这样CLI在打包测试资源时会把这些元素包含进去，避免Chrome加载不到资源：

"extraDependencies": [
  "bower_components/paper-input/**/*",
  "bower_components/iron-icons/**/*",
  "bower_components/iron-input/**/*" // paper-input依赖iron-input，可能需要额外添加
]

4. 升级Polymer CLI版本 #

你当前用的Polymer CLI 1.6.0在Chrome测试兼容性上有一些已知问题，升级到1.x分支的最新版本（Polymer 2.x对应CLI 1.x）能修复不少这类问题：

npm install -g polymer-cli@1

升级后重新运行polymer test，很多时候版本兼容问题会直接解决。

5. 查看Chrome控制台的具体报错 #

打开Chrome开发者工具（F12）的Console标签，仔细看具体的错误信息：

• 如果是资源404错误，那肯定是路径或依赖安装的问题；
• 如果是自定义元素注册失败，可能是Polymer核心的导入顺序不对，或者子依赖缺失；
• 如果是CORS相关错误，那就是安全策略的问题。

根据具体报错针对性解决，比盲目试方案效率高很多。

内容的提问来源于stack exchange，提问作者Randy