文档
开始
上报第一个覆盖率

上报第一个覆盖率

一步步教你如何上报第一个覆盖率

代码插桩

前端工程化、模块化离不开babel。如果说你的项目是的话,只需要安装两个babel插件即可快速开始, babel-plugin-istanbul 是istanbul官方维护的babel插件。 babel-plugin-canyon 我们是为了便于用户配置项目信息的babel插件。

安装

npm i babel-plugin-istanbul babel-plugin-canyon -D

配置

babel中配置

{
  "plugins": [
    "istanbul",
    "canyon"
  ]
}

babel安装完成后启动项目,在控制打印window.__canyon__window.__coverage__。如果跟下图一样那么恭喜你,代码插桩成功。

💡

本地开发环境下Canyon下的变量是不会存在的,只有在CI环境中才会对环境变量进行侦测。

  1. 更多 babel-plugin-canyon 配置方法。

  2. 各Canyon变量的含义可查看 变量说明

coverage-canyon-console

构建时环境变量配置

在CI环境中,我们需要配置一些环境变量,用于上报覆盖率数据。

获取DSN与REPORTER

  • DSN: Canyon提供的上报接口,{{url}}/coverage/client,其中url为Canyon后端服务地址。
  • REPORTER: 用户token,用于区分不同的用户。可前往用户设置页查看。

setting

CI平台变量配置

gitlab

ℹ️

其中Branch、SHA、Project ID不需要配置,会自动读取环境变量。我们已经适配了gitlab pipeline、github action等CI平台。 具体可查看 支持的provider列表

测试与上报

UI自动化

使用者可以使用任何UI自动化测试框架,如cypress、playwright、puppeteer、selenium等。只需要在测试结束后,将覆盖率数据上报即可。

具体可参考 UI自动化测试

手工上报

Chrome浏览器可以使用Chrome插件canyon-extension手工上报覆盖率数据。

chrome-crx

报告查看

Canyon提供了丰富的报告,可以查看覆盖率的摘要与覆盖详情。

摘要

report-overview

详情

report-detail