Introduction

Overview

Canyon (meaning “canyon”, pronounced /ˈkænjən/) is a JavaScript code coverage collection platform. We solve the difficulties faced by developers and QA engineers 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 and providing backend APIs.

• A React frontend application  responsible for displaying coverage data.

Why Canyon?

Canyon efficiently processes large amounts of coverage data generated by UI automation testing by separating hit and map data during the compilation phase.

In addition, Canyon adapts to common CI providers, can insert probe code during the build phase, and collect and report coverage data during the UI automation testing phase.

This allows development teams to accurately and in real-time understand the coverage situation of each test case in current UI automation testing, thereby better evaluating and improving code quality.

Features

• Accurate and Efficient: Through separation of hit and map, initial coverage data is generated at compile time, enabling accurate and efficient coverage data collection
• SourceMap: Accurate source code coverage restoration
• Build Tools: Provides coverage solutions for common build tools like next.js, vite, webpack
• Automation Frameworks: 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
canyon-uploader		Scan local .canyon_output data and upload to server
canyon-extension		Chrome extension for manually reporting coverage data

Architecture

The following diagram shows the architecture of Canyon and some of its ecosystem components:

1. The Babel plugin completes code instrumentation in the CI/CD pipeline.
2. The project is deployed to the test environment, and users can choose UI automation or manual testing to trigger the instrumented code probes.
3. The generated coverage data is reported to the Canyon server.
4. The Canyon server consumes the data and generates coverage reports in combination with source code information provided by GitLab.