编辑整理｜TesterHome 社区
来源｜携程技术

携程技术团队近日开源了一款用于提升 JavaScript 代码质量的全面覆盖率分析工具--Canyon。

开源项目 Canyon：https://github.com/canyon-project/canyon

根据携程技术官方公众号的介绍，Canyon 是在 Istanbuljs 的基础上开发的，用来解决端到端测试覆盖率难收集的问题。

开发背景

开发这一工具的背景在于，携程技术团队认为，“传统的 istanbuljs 提供的功能已经无法满足我们的需求。我们需要处理 UI 自动化过程中来自前端高并发的覆盖率上报，实时的覆盖率聚合，以及覆盖率数据的聚合展示。”

据携程技术团队介绍，istanbuljs 是一款优秀的 JavaScript 代码覆盖率工具，主要用于单元测试的代码覆盖率检测和生成本地覆盖率报告。然而，随着现代前端技术和 UI 自动化测试的发展，对端到端测试的代码覆盖率检测需求逐渐增加，istanbuljs 提供的功能显得捉襟见肘。

在携程内部 JavaScript 代码覆盖率使用的是 gitlab 内置的 coverage 上报，也是只支持单元测试的覆盖率收集和概览数据展示。随着携程的前端技术日益精进，我们有了自己的前端流量录制平台，并且部署了相当大规模的模拟器集群进行 UI 自动化 (flybirds) 回放。这种场景下，需要对端到端测试的代码覆盖率进行收集和展示，以便开发同学更好的了解到自己的代码质量。

携程技术团队表示，JavaScript 是时下最流行的编程语言，但是端到端测试覆盖率收集领域一直空白，我们的代码开发基于了 istanbuljs，monaco editor 等优秀开源项目，我们有信心推出 Canyon 开源可以赢得 github 社区的反响，并且可以有大量 JavaScript 开发者参与进来。

Canyon 介绍

根据携程技术团队的介绍，Canyon 通过简单的 Babel 插件配置即可实现代码插装、覆盖率上报和实时报告生成。其技术栈完全基于 JavaScript，只需 Node.js 环境即可运行，部署方便，适用于云原生环境的部署（如 Docker、Kubernetes）。

应用的架构设计适用于处理高频、大规模的覆盖率数据上报，能够应对 UI 自动化测试中的各种场景。同时，Canyon 与现有的 CI/CD 工具（如 GitLab CI、Jenkins）无缝集成，使用户能够轻松地在持续集成流水线中使用。

架构图如下：

Canyon 的主要功能：

• 代码覆盖率
• 代码插桩
• 测试与上报
• 覆盖率聚合
• 覆盖率报告
• 变更代码覆盖率
• react native 覆盖率收集方案
• 覆盖率提升优先级列表

以上功能的详细介绍，请点击携程技术官方公众号文章：《开源 | Canyon: 提升 JavaScript 代码质量的全面覆盖率分析工具》

更多行业资讯可以关注 TesterHome 社区公众号