Introduction
Overview
Canyon (meaning “canyon”, pronounced /ˈkænjən/) is a JavaScript code coverage collection platform. We solve the difficulties developers and QA engineers encounter when collecting test case code coverage during end-to-end testing. It consists of three main components:
-
A series of plugins responsible for adapting to various CI providers and detecting environment variables.
-
A Node.js service responsible for collecting and processing coverage data, providing backend APIs.
-
A React frontend application responsible for displaying coverage data.
Why Canyon?
Canyon efficiently handles large amounts of coverage data generated by UI automation tests by separating hit and map data at the compilation stage.
Additionally, Canyon adapts to common CI providers, enabling probe code insertion during the build phase and coverage data collection and reporting during UI automation testing.
This allows development teams to accurately and realtime understand the coverage situation of each test case in current UI automation tests, thereby better evaluating and improving code quality.
Features
- Accurate and Efficient: By separating hit and map, generates initial coverage data at compile time, accurately and efficiently collecting coverage data
- SourceMap: Accurate source code coverage restoration
- Build Tools: Provides coverage solutions for common build tools like Next.js, Vite, Webpack, etc.
- Automation Frameworks: Provides integration solutions for common UI automation frameworks
- CI Providers: Adapts to common CI providers (GitHub Actions, GitLab Runner), detects CI environment variables
Self-Hosting
If you want complete control over your coverage data and test data, you can self-host Canyon on your own infrastructure.
Ecosystem
| Project | Status | Description |
|---|---|---|
| babel-plugin-canyon |  | Babel plugin for detecting pipeline environment variables |
| tools-cli |  | Scans local .canyon_output data and uploads to server |
| tools-collect |  | Script package for web sites to automatically collect coverage data |
| canyon-extension |  | Chrome extension for manually reporting coverage data |
Architecture
The following diagram shows the architecture of some components of Canyon and its ecosystem:
- Babel plugin completes code instrumentation in CI/CD pipelines.
- Project is deployed to test environment, users can choose UI automation or manual testing to trigger instrumented code probes.
- Generated coverage data is reported to Canyon server.
- Canyon server consumes the data and generates coverage reports combined with source code information provided by GitLab.
