基于TestComplete的Angular JS应用UI功能测试代码覆盖率方案咨询

TestComplete作为黑盒UI自动化工具，本身不内置前端代码覆盖率采集能力，之前接入istanbul失败基本是插桩、数据上报环节和测试流程没有对齐，以下是经过验证的可行路径：

方案一：正确配置istanbul（nyc）实现覆盖率采集（无额外插件成本） #

这个方案不需要采购额外插件，只要把流程对齐就能跑通：

• 构建阶段完成源码插桩：不要用浏览器端动态插桩的方式（这类方案很容易和AngularJS的模块加载、依赖注入逻辑冲突，也是大部分人接入失败的核心原因）。如果你的AngularJS项目用Gulp/Grunt/Webpack做构建，直接在构建流程里加入istanbul对应的构建插件，只对自有业务代码做插桩，排除angular.min.js、第三方UI库、工具类库等非业务代码，插桩完成后代码运行时会在window全局挂载__coverage__对象，所有覆盖率明细数据都存在这个对象里。
• TestComplete侧配置采集逻辑：不需要修改原有测试用例，只要在测试流程里加两个钩子：
  1. 测试套件启动前，清空浏览器缓存的历史覆盖率数据，避免旧数据干扰结果
  2. 每个用例执行完成、或整个测试套件跑完后，通过TestComplete的浏览器控制能力执行JS脚本，读取当前页面的__coverage__对象，序列化后存为本地json文件。单页应用做路由跳转前也要加一次采集，避免路由切换时内存里的覆盖率数据被覆盖。
     采集逻辑参考代码：

  function exportCoverageData() {
    // 替换为你测试使用的浏览器进程、对应页面匹配规则
    const testPage = Sys.Browser("chrome").Page("*");
    const coverageData = testPage.EvaluateScript("JSON.stringify(window.__coverage__ || {})");
    // 按用例ID+时间戳命名存到本地覆盖率目录
    aqFile.WriteToTextFile(`./coverage-raw/${Project.TestItems.Current.Name}_${Date.now()}.json`, coverageData, aqFile.ctUTF8);
  }
  

• 生成可视化报告：所有测试执行完成后，把采集到的所有json文件放到同一目录，用nyc命令行工具直接合并数据，生成html、lcov等格式的覆盖率报告即可。

方案二：现成适配插件选项 #

如果不想手动开发采集逻辑，可以选择适配好的工具：

• SmartBear官方提供的TestComplete Code Coverage插件：原生支持对接istanbul插桩产生的覆盖率数据，不需要自己写脚本采集__coverage__对象，配置好插桩规则后，测试运行过程中插件会自动拉取、合并覆盖率数据，测试完成后覆盖率结果会直接集成在TestComplete原生测试报告里，不用单独做报告生成。
• 如果不想修改本地构建流程，可以在测试环境部署一层istanbul代理中间件，自动给所有返回的业务JS响应做插桩，TestComplete只要正常访问测试环境地址即可，后续采集、报告生成流程和方案一一致。

高频踩坑说明 #

之前接入istanbul失败的常见原因可以对照排查：

• 动态插桩脚本和AngularJS的ng-app加载顺序冲突，导致页面直接报错
• 插桩时没有生成对应source map，最终报告的代码位置和实际源码对不上
• 测试跑完直接关闭浏览器，没有预留时间执行覆盖率导出逻辑，拿到空数据
• 单页应用路由切换时没有累计覆盖率，只拿到了最后一个页面的覆盖数据

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