如何为基于Selenium+Java的框架使用Istanbul搭建代码覆盖率统计环境

• Istanbul（现常用其命令行工具nyc）本身仅支持JavaScript/TypeScript项目的代码覆盖率统计，仅适用于你这套Selenium+Java自动化测试的被测应用为前端JS/TS项目的场景
• 如果你需要统计的是Java侧的自动化测试框架代码、或者后端Java业务代码的覆盖率，Istanbul不适用，建议改用JaCoCo工具实现

步骤1：前端项目侧注入覆盖率采集能力 #

• 进入你的前端项目根目录，安装nyc和babel-plugin-istanbul（如果用了babel构建）或者对应框架的覆盖率插桩插件

  npm install nyc babel-plugin-istanbul --save-dev
  

• 修改前端项目的构建配置，开启插桩：如果用babel的话修改babel.config.json，加入插桩插件

  {
    "plugins": ["istanbul"]
  }
  

• 用插桩后的配置重新构建前端项目，启动前端服务，注意不要用生产环境压缩混淆后的构建包，否则插桩会失效

步骤2：Selenium测试脚本侧补充覆盖率导出逻辑 #

• 所有Selenium测试用例执行完成后，不要直接关闭浏览器驱动，通过executeScript方法从浏览器全局对象中拿到Istanbul生成的window.__coverage__覆盖率数据

  // Java代码示例，在所有测试用例执行完成后运行
  Object coverageData = ((JavascriptExecutor) driver).executeScript("return window.__coverage__;");
  // 将coverageData序列化为JSON字符串，写入到本地文件，命名为coverage.json
  FileWriter writer = new FileWriter("coverage/coverage.json");
  writer.write(new Gson().toJson(coverageData));
  writer.close();
  

• 注意提前创建本地的coverage目录，避免写入文件时报错

步骤3：生成覆盖率报告 #

• 将上一步导出的coverage.json文件放到前端项目的根目录下，运行nyc命令生成可视化报告

  npx nyc report --reporter=html --reporter=text
  

• 生成的报告默认存在coverage/目录下，打开index.html即可查看行覆盖率、函数覆盖率、分支覆盖率等详细数据

• 拿不到window.__coverage__：确认前端构建时确实开启了插桩，确认访问的是插桩后的前端服务，不是生产环境的线上服务
• 覆盖率数据为0：确认测试用例执行的页面路径和nyc统计的源代码路径匹配，可通过添加--cwd参数指定源代码根目录调整

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