Skip to Content
DocumentationGetting StartedIntroduction

Introduction

Overview

Canyon (pronounced /ˈkænjən/) is a JavaScript code coverage collection platform. We solve the challenges faced by developers and QA engineers in collecting test case code coverage during end-to-end testing. It consists of three main components:

  • A series of plugins  responsible for adapting 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 handles large amounts of coverage data generated by UI automation testing by separating hit and map data during the compilation phase.

Furthermore, Canyon adapts to common CI providers, enabling probe code insertion during the build phase and collecting and reporting 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: Accurately and efficiently collect coverage data by separating hit and map data during compilation
  • SourceMap: Accurate source code coverage restoration
  • Build Tools: Coverage solutions for common build tools like Next.js, Vite, and Webpack
  • Automation Frameworks: Integration solutions for common UI automation frameworks
  • CI Providers: Adaptation for common CI providers (Github Actions, GitLab Runner) and detection of CI environment variables

Self-Hosting

If you want complete control over your coverage and test data, you can self-host Canyon on your own infrastructure.

Ecosystem

ProjectStatusDescription
babel-plugin-canyonbabel-plugin-canyon-statusBabel plugin for detecting pipeline environment variables
canyon-uploadercanyon-uploader-statusScan local .canyon_output data and upload to server
canyon-extensioncanyon-extension-statusChrome extension for manual coverage data reporting

Architecture

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

  1. Babel plugin completes code instrumentation in the CI/CD pipeline.
  2. Project is deployed to the test environment, where users can trigger instrumented code probes through UI automation or manual testing.
  3. Generated coverage data is reported to the Canyon server.
  4. Canyon server processes the data and generates coverage reports in conjunction with source code information provided by GitLab.

First Coverage Data