Skip to Content
DocumentationGetting Started首次获取覆盖率数据

首次获取覆盖率数据

Note

Canyon 提供了常见框架的安装指南，帮助您快速上手。

按照以下步骤完成您的首次覆盖率数据报告：

新项目开始

安装

Babel 是前端工程化和模块化开发中不可或缺的工具。对于 Babel 项目，您只需安装两个 Babel 插件即可快速开始。

npm install babel-plugin-istanbul @canyonjs/babel-plugin -D

将 istanbul 和 canyon 插件添加到您的 Babel 配置文件 中：

babel.config.js
module.exports = {
  plugins: [
    'istanbul',
    '@canyonjs'
    // 注意插件顺序：canyon 插件应在 istanbul 插件之后
    ],
};

验证

配置完成后，启动您的项目并在控制台中打印 window.__coverage__。如果输出与下图匹配，则代码插桩成功。

coverage-canyon-console

更新 Babel 插件激活条件

在 CI 阶段，我们需要控制插件激活条件，以防止在生产分支中进行插桩。

module.exports = {
  plugins: (process.env.CI &&
            process.env.CI_COMMIT_REF_NAME !== 'release')
            ? [
              'istanbul',
              '@canyonjs'
            ]:[],
};

报告覆盖率数据

等待 CI 完成后，将页面部署到测试环境。

Tip

此时，覆盖率数据存储在浏览器中。随着用户交互或 UI 自动化测试的执行，window.__coverage__ 数据将不断累积。您可以选择本地生成覆盖率报告或发送到Canyon服务器。

不同场景下的收集方式：

自动化测试手动测试
介绍快速开始