上报第一个覆盖率
代码插桩
前端工程化、模块化离不开babel。如果说你的项目是的话，只需要安装两个babel插件即可快速开始，
babel-plugin-istanbul (opens in a new tab) 是istanbul官方维护的babel插件。
babel-plugin-canyon (opens in a new tab) 我们是为了便于用户配置项目信息的babel插件。
安装
npm i babel-plugin-istanbul babel-plugin-canyon -D配置
在babel (opens in a new tab)中配置
{
"plugins": [
"istanbul",
"canyon"
]
}babel安装完成后启动项目，在控制打印window.__canyon__与window.__coverage__。如果跟下图一样那么恭喜你，代码插桩成功。
💡
本地开发环境下canyon下的变量是不会存在的，只有在CI环境中才会存在。
-
本地调试时可以手动配置canyon插件，具体可查看手动配置 (opens in a new tab)。
-
各变量的含义可查看变量说明。
构建时环境变量配置
在CI环境中，我们需要配置一些环境变量，用于上报覆盖率数据。
获取DSN与REPORTER
- DSN: Canyon提供的上报接口，{{url}}/coverage/client，其中url为canyon服务地址。
- REPORTER: 用户token，用于区分不同的用户。可前往用户设置页查看。
CI平台变量配置
ℹ️
其中Branch、SHA、Project ID不需要配置，会自动读取环境变量。我们已经适配了gitlab pipeline、github action等CI平台。 具体可查看支持的provider列表。
测试与上报
UI自动化
使用者可以使用任何UI自动化测试框架，如cypress、playwright、puppeteer、selenium等。只需要在测试结束后，将覆盖率数据上报即可。
具体可参考UI自动化测试。
手工上报
chrome可以使用chrome插件canyon-extension (opens in a new tab)手工上报覆盖率数据。
报告查看
Canyon提供了丰富的报告，可以查看覆盖率的摘要与覆盖详情。
摘要
详情
